您的位置：首页 > 编程技术 > python  >  python include标签的使用方式及说明

python include标签的使用方式及说明

 更新时间：2023年3月3日 15:46  点击：546 作者：现在叫阿汤哥

include标签如何使用？

include标签的使用

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

截图如下

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style: none;}
        a{text-decoration: none;
            color: #ffffff;}
        nav,footer,.main{width:1000px; height:40px; margin:0 auto;}
        ul{width: 1000px; height:40px; line-height: 40px;
            background-color:#000000;}
        li{width:120px; height:40px; line-height:40px; text-align: center;
        float:left;}
        .main{clear:both; line-height:40px; background-color:pink;}
        footer{height:40px;  background-color: green;}
    </style>
</head>
<body>
 
        <nav>
            <ul>
                <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>
                <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>
                <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>
                <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>
                <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>
                <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>
            </ul>
        </nav>
        <div class="main">
            网站首页主体部分
        </div>
       <footer>
            网站首页footer部分
       </footer>
 
</body>
</html>

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

from flask import Flask,render_template
 
app = Flask(__name__)
 
@app.route('/')
def hello_world():
    return render_template("index.html")
 
 
if __name__ == '__main__':
    app.run(debug=True)

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

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

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

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

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style: none;}
        a{text-decoration: none;
            color: #ffffff;}
        nav,footer,.main{width:1000px; height:40px; margin:0 auto;}
        ul{width: 1000px; height:40px; line-height: 40px;
            background-color:#000000;}
        li{width:120px; height:40px; line-height:40px; text-align: center;
        float:left;}
        .main{clear:both; line-height:40px; background-color:pink;}
        footer{height:40px;  background-color: green;}
    </style>
</head>
<body>
      <nav>
            <ul>
                <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>
                <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>
                <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>
                <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>
                <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>
                <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>
            </ul>
        </nav>
</body>
</html>

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <footer>
            网站首页footer部分
     </footer>
     </footer>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   {% include "header.html" %}
        <div class="main">
            网站首页主体部分
        </div>
    {% include "footer.html" %}
</body>
</html>

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

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

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

总结

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

原文出处：https://blog.csdn.net/aimill/article/details/81408188

[!--infotagslink--]

相关文章

  • python opencv 画外接矩形框的完整代码

    这篇文章主要介绍了python-opencv-画外接矩形框的实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-04

  • Python astype(np.float)函数使用方法解析

    这篇文章主要介绍了Python astype(np.float)函数使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-08

  • 最炫Python烟花代码全解析

    2022虎年新年即将来临，小编为大家带来了一个利用Python编写的虎年烟花特效，堪称全网最绚烂，文中的示例代码简洁易懂，感兴趣的同学可以动手试一试...2022-02-14

  • python中numpy.empty()函数实例讲解

    在本篇文章里小编给大家分享的是一篇关于python中numpy.empty()函数实例讲解内容，对此有兴趣的朋友们可以学习下。...2021-02-06

  • python-for x in range的用法(注意要点、细节)

    这篇文章主要介绍了python-for x in range的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-10

  • Python 图片转数组,二进制互转操作

    这篇文章主要介绍了Python 图片转数组,二进制互转操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09

  • Python中的imread()函数用法说明

    这篇文章主要介绍了Python中的imread()函数用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-16

  • python实现b站直播自动发送弹幕功能

    这篇文章主要介绍了python如何实现b站直播自动发送弹幕，帮助大家更好的理解和学习使用python，感兴趣的朋友可以了解下...2021-02-20

  • python Matplotlib基础--如何添加文本和标注

    这篇文章主要介绍了python Matplotlib基础--如何添加文本和标注，帮助大家更好的利用Matplotlib绘制图表，感兴趣的朋友可以了解下...2021-01-26

  • 解决python 使用openpyxl读写大文件的坑

    这篇文章主要介绍了解决python 使用openpyxl读写大文件的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-13

  • python 计算方位角实例(根据两点的坐标计算)

    今天小编就为大家分享一篇python 计算方位角实例(根据两点的坐标计算)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-27

  • python实现双色球随机选号

    这篇文章主要为大家详细介绍了python实现双色球随机选号，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-05-02

  • python中使用np.delete()的实例方法

    在本篇文章里小编给大家整理的是一篇关于python中使用np.delete()的实例方法，对此有兴趣的朋友们可以学习参考下。...2021-02-01

  • 使用Python的pencolor函数实现渐变色功能

    这篇文章主要介绍了使用Python的pencolor函数实现渐变色功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-03-09

  • python自动化办公操作PPT的实现

    这篇文章主要介绍了python自动化办公操作PPT的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-05

  • Python getsizeof()和getsize()区分详解

    这篇文章主要介绍了Python getsizeof()和getsize()区分详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-20

  • Jquery 获取指定标签的对象及属性的设置与移除

    1、先讲讲JQuery的概念，JQuery首先是由一个 America 的叫什么 John Resig的人创建的，后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库，这个类库集合了很多功能方法，利用类库你可以用简单的一些代...2014-05-31

  • python实现学生通讯录管理系统

    这篇文章主要为大家详细介绍了python实现学生通讯录管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-02-25

  • PyTorch一小时掌握之迁移学习篇

    这篇文章主要介绍了PyTorch一小时掌握之迁移学习篇，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-09-08

  • 解决python 两个时间戳相减出现结果错误的问题

    这篇文章主要介绍了解决python 两个时间戳相减出现结果错误的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-12