经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » Python » 查看文章
python?include标签的使用方式及说明
来源：jb51　　时间：2023/3/3 8:50:36　　对本文有异议

include标签如何使用？

include标签的使用

在讲python include标签使用之前，我们新建一个include_demo项目

截图如下

项目新建好了，再在templates文件下新建一个index.html文件，代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{margin:0;padding:0;}
  8.         ul{list-style: none;}
  9.         a{text-decoration: none;
  10.             color: #ffffff;}
  11.         nav,footer,.main{width:1000px; height:40px; margin:0 auto;}
  12.         ul{width: 1000px; height:40px; line-height: 40px;
  13.             background-color:#000000;}
  14.         li{width:120px; height:40px; line-height:40px; text-align: center;
  15.         float:left;}
  16.         .main{clear:both; line-height:40px; background-color:pink;}
  17.         footer{height:40px;  background-color: green;}
  18.     </style>
  19. </head>
  20. <body>
  21.  
  22.         <nav>
  23.             <ul>
  24.                 <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >首页</a></li>
  25.                 <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >关于我们</a></li>
  26.                 <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >产品中心</a></li>
  27.                 <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >新闻中心</a></li>
  28.                 <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >服务宗旨</a></li>
  29.                 <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >联系我们</a></li>
  30.             </ul>
  31.         </nav>
  32.         <div class="main">
  33.             网站首页主体部分
  34.         </div>
  35.        <footer>
  36.             网站首页footer部分
  37.        </footer>
  38.  
  39. </body>
  40. </html>

然后在include_demo.py页面渲染一下index模板文件，代码如下：

  1. from flask import Flask,render_template
  2.  
  3. app = Flask(__name__)
  4.  
  5. @app.route('/')
  6. def hello_world():
  7.     return render_template("index.html")
  8.  
  9.  
  10. if __name__ == '__main__':
  11.     app.run(debug=True)

运行include_demo.py文件，运行结果如下：

在这里主要是为了方便讲解include标签，所有没太注重前端页面部分。

通过上面index.html文件就能发现，我将公共和私有代码部分都在一块，假设网站有几十个页面，我将所有公共代码和私有代码

都放一块，如果有一天要修改某个公共代码块，哪就得修改几十个页面，那将是件非常麻烦的事。为了方便管理项目，我们将页面公共、私有代码部分抽取出来。

我们新建一个header.html文件，把css样式及nav标签内容复制到header.html页面中。

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{margin:0;padding:0;}
  8.         ul{list-style: none;}
  9.         a{text-decoration: none;
  10.             color: #ffffff;}
  11.         nav,footer,.main{width:1000px; height:40px; margin:0 auto;}
  12.         ul{width: 1000px; height:40px; line-height: 40px;
  13.             background-color:#000000;}
  14.         li{width:120px; height:40px; line-height:40px; text-align: center;
  15.         float:left;}
  16.         .main{clear:both; line-height:40px; background-color:pink;}
  17.         footer{height:40px;  background-color: green;}
  18.     </style>
  19. </head>
  20. <body>
  21.       <nav>
  22.             <ul>
  23.                 <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >首页</a></li>
  24.                 <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >关于我们</a></li>
  25.                 <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >产品中心</a></li>
  26.                 <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >新闻中心</a></li>
  27.                 <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >服务宗旨</a></li>
  28.                 <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >联系我们</a></li>
  29.             </ul>
  30.         </nav>
  31. </body>
  32. </html>

然后新建一个footer.html文件，把footer标签中的内容复制到该文件中。

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.      <footer>
  9.             网站首页footer部分
  10.      </footer>
  11.      </footer>
  12. </body>
  13. </html>

我们在运行主app文件，结果如下：

(＾－＾)，为啥没有居中，背景色也不见了？？因为我们没有把样式引入进来（嗯，页面太丑了，没法看了，赶紧关了！！）

OK！我们将公共代码抽取出来后。记得在index.html文件中用include标签导入header、footer代码块，代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.    {% include "header.html" %}
  9.         <div class="main">
  10.             网站首页主体部分
  11.         </div>
  12.     {% include "footer.html" %}
  13. </body>
  14. </html>

再运行主app文件，结果如下：

嗯，结果是不是和之前一样，对吧！

通过上面例子，相信大部分小伙伴都明白了include标签的作用及用法。总之一句话，include标签的作用就相当于把抽取的代码复制到当前页面中。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Python热门文章

  • Python | 新冠肺炎疫情数据的爬取与可视化分析
  • Python爬小草1024图片，盖达尔的诱惑（urllib.request）
  • pytorch如何获得模型的计算量和参数量
  • 计算曲线与坐标轴的面积
  • 基于Python实现语音合成小工具
  • PyQt5笔记之弹出窗口大全
  • python反编译学习之字节码详解
  • Python爬虫基础讲解（二十）：多进程——multiprocessing模块的使用
  • python?OpenCV计算图片相似度的5种算法
  • matplotlib 设置图形大小时 figsize 与 dpi 的关系

    • Python推荐文章

  • python 音频处理（2)——提取PPG特征之whisper库的使用（2.1）
  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-60 - 判断元素是否显示 - 下篇 - 北京-宏哥
  • [python] 启发式算法库scikit-opt使用指北
  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-59 - 判断元素是否显示 - 上篇 - 北京-宏哥
  • 界面自动化测试录制工具，让python selenium自动化测试脚本开发更加方便
  • 《最新出炉》系列入门篇-Python+Playwright自动化测试-56- 多文件上传 - 下篇 - 北京-宏哥
  • 音频文件降噪及python示例
  • 全网最适合入门的面向对象编程教程：20 类和对象的 Python 实现-组合关系的实现与 CSV 文件保存
  • 张高兴的 MicroPython 入门指南：（一）环境配置、Blink、部署
  • Python——比 Seaborn 更好的相关性热力图：Biokit Corrplot

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号