首页 > 其他分享 >模板中的继承和include标签

模板中的继承和include标签

时间:2024-07-23 13:39:42浏览次数:14  
标签:parent 标签 html 模版 include 模板

一般我们的网站虽然页面多,但是很多部分是重用的,比如页首,页脚,导航栏之类的。对于每个页面,都要写这
些代码,很麻烦。
Flask的Jinja2模板支持模板继承功能,省去了这些重复代码。

第一种方法: 使用extends 方法继承
父模板:

<div>
    {% block temp1 %}
    <p> parent页面的头部</p>
    <hr>
    {% endblock %}
    <hr>

    {% block temp2 %}
    <p> parent页面的尾部部</p>
    {% endblock %}
</div>

  子模版:

 

{% extends "parent.html" %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子模版内容</title>
</head>
<body>
<div>
    {% block temp1 %}
    {{ super() }}
    <p>这个是子模版内容</p>
    {% endblock %}
</div>

</body>
</html>

需要注意的是子模版 中html 第一行代码{ % extend “parent.html" %} 表面继承关系, 如果不想修改父 模板中temp1 中的函数,需要添加{{ super() }}方法,
就可以完全继承父模板内容了,实现效果如下:

 第二种方法:使用include 继承(企业使用最多)

include标签
这个标签相当于是直接将指定的模版中的代码复制粘贴到当前位置。include 标签,如果想要使用父模版中的变
量,直接用就可以了。include 的路径,也是跟import 一样,直接从templates 根目录下去找,不要以相对路
径去找。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>include标签内容</title>
</head>
<body>
{% include "header.html" %}
<p>include 中间内容</p>
{% include "footer.html" %}

</body>
</html>

 

 
最后我们看下实现效果:(其实和第一种方法一样的效果)不过更简单一些

 

标签:parent,标签,html,模版,include,模板
From: https://www.cnblogs.com/yongheng999/p/18318181

相关文章

  • 易优CMS模板标签adv广告列表每3条记录输出如下html元素
    【基础用法】标签:adv描述:获取广告列表内容。用法:{eyou:advpid='1'loop='3'}<ahref='{$field.links}'><imgalt='{$field.title}'src='{$field.litpic}'/></a>{/eyou:adv}属性:pid=''广告位置IDloop='......
  • 易优CMS网站screening筛选标设置与调用标签
    {eyou:screeningid='field'currentstyle='active'addfields='danxuan'alltxt='不限'}<divclass='row'><divclass='filter-box'>{eyou:volistname='$field.list'id='vo&......
  • 更改 pyplot 中 xaxis 标签的格式
    我正在尝试重新格式化x轴,但我所做的一切都不起作用当我使用:importpandasaspdimportmatplotlib.pyplotaspltz=pd.DataFrame([[2000,1,2],[2001,2,3],[2004,5,6]])z=z.set_index(0)z.plot()plt.show()x轴标签格式为2,000.0到2,000.0如何让它简单地显......
  • 第8章 Express的模板引擎
    在Express应用中,模板引擎是一个重要的工具,它允许你使用静态模板文件生成动态的HTML。模板文件通常包含占位符变量和表达式,这些变量和表达式在渲染时会被实际数据替换。使用模板引擎可以使得前端代码和后端逻辑分离,提升开发效率和代码维护性。本章节将详细介绍如何在Express......
  • luoguP3379 【模板】最近公共祖先(LCA)
    思路可以用倍增法去解决问题代码#include<bits/stdc++.h>usingnamespacestd;intn,m,root,parent[30][600005],dep[600005],head[1000005];intlog_v;intcnt=0;structe{ intto,next;}edge[1000005];intgetint(){ charch='*'; while(!isdi......
  • 手写Kd树(C++模板非递归实现)
    手写Kd树(C++模板非递归实现)1.Kd树1.1Kd树简介1.2Kd树的建立1.3Kd树的查找2.C++完整代码实现3.测试代码3.1代码实现3.2测试结果4.与PCL中的Kd树做对比本文实现的Kd树实现参考了高翔博士的书《自动驾驶与机器人中的slam技术从理论到实践》;高博士原书中是递归......
  • Chrome浏览器标签页扩展程序推荐
        Chrome浏览器的初始标签页只能添加几个标签,功能性受限,自由度不高,幸好新标签页支持扩展,网上有广受推荐的Infinity等,今天推荐一个更好看更好用的WeTab-AI。    相较Infinity,WeTab-AI的优点有:    1.底部支持堆放常用网站,类似手机,十分方便。 ......
  • [Vani有约会] 雨天的尾巴 /【模板】线段树合并
    [Vani有约会]雨天的尾巴/【模板】线段树合并题目背景深绘里一直很讨厌雨天。灼热的天气穿透了前半个夏天,后来一场大雨和随之而来的洪水,浇灭了一切。虽然深绘里家乡的小村落对洪水有着顽固的抵抗力,但也倒了几座老房子,几棵老树被连根拔起,以及田地里的粮食被弄得一片狼藉。无......
  • 使用 beautifulsoup python 更改内部标签的文本
    我想更改使用Beautifulsoup获得的HTML中标签的内部文本。示例:<ahref="index.html"id="websiteName">Foo</a>变成:<ahref="index.html"id="websiteName">Bar</a>我已经设法通过其id获取标签:HTMLDocument.find(id......
  • 编辑距离与滚动数组优化 - 二维动态规划模板
    题目:编辑距离。思路显然,定义\(f[i][j]\)表示字符串\(a\)中前\(i\)个字符到字符串\(b\)中前\(j\)个字符的编辑距离。那么对于\(a_i=b_j\)时,我们对当前位无需进行任何编辑操作,则\(f[i][j]=f[i-1][j-1]\)。如果\(a_i\neb_j\),那么我们就要对当前位进行编辑:......