【Jinja2】宏、继承、包含

本文介绍了Jinja2模板引擎中的宏、模块继承及包含功能,包括宏定义与使用、模块继承的基本语法及其注意事项、以及如何使用包含来复用代码。

一、宏

类似于python中的函数,宏的作用就是在模板中重复利用代码,避免代码冗余。

Jinja2支持宏,还可以导入宏,需要在多处重复使用的模板代码片段可以写入单独的文件,再包含在所有模板中,以避免重复。

1.1 不带参数的宏
{% macro input() %}
    <input type="text" value="" size="30">
    {% endmacro %}

    <h1>input 1</h1>
    {{ input() }}

    <h1>input 2</h1>
    {{ input() }}
1.2 带参数的宏
{% macro input2(type, value, size) %}
    <input type="{{type}}" value="{{value}}" size="{{size}}">
    {% endmacro %}

    <h1>input2 </h1>
    {{ input2("password", "", 50) }}

    <hr/>
	
    {% macro input3(type="text", value="", size=30) %}
    <input type="{{type}}" value="{{value}}" size="{{size}}">
    {% endmacro %}

    <h1>input3 </h1>
    {{ input3() }}

    <h1>input3 </h1>
    {{ input3("password", "", 100) }}
1.3 把宏单独抽取出来,封装成html文件,其它模板中导入使用

文件名可以自定义macro.html

{% macro function() %}

    <input type="text" name="username" placeholde="Username">
    <input type="password" name="password" placeholde="Password">
    <input type="submit">
{% endmacro %}

在其他模块中导入并使用

{% import 'macro.html' as func %}
{% func.function() %}

二、模块继承

模板继承是为了重用模板中的公共内容。一般Web开发中,继承主要使用在网站的顶部菜单、底部。这些内容可以定义在父模板中,子模板直接继承,而不需要重复书写。

{% block top %}``{% endblock %}标签定义的内容,相当于在父模板中挖个坑,当子模板继承父模板时,可以进行填充。

子模板使用extends指令声明这个模板继承自哪?父模板中定义的块在子模板中被重新定义,在子模板中调用父模板的内容可以使用super()。

父模板:base.html

  {% block top %}
    顶部菜单
  {% endblock top %}

  {% block content %}
  {% endblock content %}

  {% block bottom %}
    底部
  {% endblock bottom %}

子模板:

  {% extends 'base.html' %}
  {% block content %}
   需要填充的内容
  {% endblock content %}
  • 模板继承使用时注意点:
    • 不支持多继承。
    • 为了便于阅读,在子模板中使用extends时,尽量写在模板的第一行。
    • 不能在一个模板文件中定义多个相同名字的block标签。
    • 当在页面中使用多个block标签时,建议给结束标签起个名字,当多个block嵌套时,阅读性更好。

三、包含(Include)

Jinja2模板中,除了宏和继承,还支持一种代码重用的功能,叫包含(Include)。它的功能是将另一个模板整个加载到当前模板中,并直接渲染。
示例:

include的使用

{\% include 'hello.html' %}

包含在使用时,如果包含的模板文件不存在时,程序会抛出TemplateNotFound异常,可以加上ignore missing关键字。如果包含的模板文件不存在,会忽略这条include语句。

示例:

include的使用加上关键字ignore missing

{\% include 'hello.html' ignore missing %}
  • 宏、继承、包含:
    • 宏(Macro)、继承(Block)、包含(include)均能实现代码的复用。
    • 继承(Block)的本质是代码替换,一般用来实现多个页面中重复不变的区域。
    • 宏(Macro)的功能类似函数,可以传入参数,需要定义、调用。
    • 包含(include)是直接将目标模板文件整个渲染出来。
<think>我们讨论的是Jinja2模板继承,这是Jinja2模板引擎中一个非常强大的特性。 模板继承允许你构建一个基础模板(通常称为“骨架”模板),然后让其他模板继承这个基础模板并覆盖其中的特定块。 主要概念: 1. 基础模板(base template):定义整个页面的基本结构,并包含一些可被子模板覆盖的块(block)。 2. 子模板(child template):使用`{% extends %}`标签继承基础模板,然后通过`{% block %}`标签覆盖基础模板中同名的块。 步骤: 1. 创建基础模板(base.html) 2. 创建子模板,继承基础模板并覆盖部分块 下面是一个具体的例子: 基础模板(base.html): ```html <!DOCTYPE html> <html lang="en"> <head> {% block head %} <meta charset="UTF-8"> <title>{% block title %}{% endblock %} - My Webpage</title> {% endblock %} </head> <body> <div id="content">{% block content %}{% endblock %}</div> <div id="footer"> {% block footer %} © Copyright 2023 by <a href="http://example.com/">you</a>. {% endblock %} </div> </body> </html> ``` 子模板(child.html): ```html {% extends "base.html" %} {% block title %}Index{% endblock %} {% block head %} {{ super() }} <style type="text/css"> .important { color: #336699; } </style> {% endblock %} {% block content %} <h1>Index</h1> <p class="important"> Welcome to my awesome homepage. </p> {% endblock %} ``` 解释: 1. `{% extends "base.html" %}`:告诉Jinja2这个模板继承自base.html。 2. `{% block title %}Index{% endblock %}`:覆盖基础模板中的`title`块,设置标题为“Index”。注意:在基础模板中,标题是动态的,后面会加上“- My Webpage”,所以最终标题是“Index - My Webpage”。 3. `{% block head %}`:覆盖基础模板中的`head`块。但是,在子模板中,我们使用`{{ super() }}`来保留基础模板中head块的内容,然后添加额外的样式。 4. `{% block content %}`:覆盖基础模板中的`content`块,填入自己的内容。 注意: - 在子模板中,只能定义在基础模板中已经存在的块。如果定义了一个基础模板中不存在的块,它将被忽略。 - 使用`{{ super() }}`可以在子模板中引用父模板中对应块的内容。 模板继承的优点: 1. 代码复用:避免重复编写相同的结构(如页眉、页脚、导航栏等)。 2. 易于维护:修改基础模板可以同时影响所有继承它的子模板。 3. 灵活性:子模板可以自由覆盖父模板的特定部分。 进阶:嵌套继承 你可以创建多级继承,例如: base.html -> layout.html -> child.html 其中,layout.html继承base.html,child.html继承layout.html。 下面是一个嵌套继承的例子: 基础模板(base.html)同上。 布局模板(layout.html): ```html {% extends "base.html" %} {% block content %} <div class="sidebar"> {% block sidebar %}{% endblock %} </div> <div class="main-content"> {{ super() }} {# 如果base.html中有content块,这里会覆盖,但通常我们不会在base.html的content块中写内容,所以这里可以不用super #} {% block main %}{% endblock %} </div> {% endblock %} ``` 然后,child.html继承layout.html: ```html {% extends "layout.html" %} {% block sidebar %} <ul> <li>Home</li> <li>About</li> </ul> {% endblock %} {% block main %} <h1>Home Page</h1> <p>Welcome to the home page!</p> {% endblock %} ``` 在这个例子中,child.html提供了sidebar块和main块的内容,而layout.html定义了页面的布局(侧边栏和主内容区),base.html定义了整个页面的基本结构。 使用Jinja2渲染模板的Python代码示例: 假设我们使用Flask框架(Jinja2Flask的默认模板引擎),但也可以单独使用Jinja2。 单独使用Jinja2的示例代码: ```python from jinja2 import Environment, FileSystemLoader # 创建模板环境,指定模板所在的文件夹 env = Environment(loader=FileSystemLoader('templates')) # 加载基础模板 template = env.get_template('child.html') # 渲染模板,可以传入上下文变量 output = template.render(title='Index', some_variable='value') # 输出渲染后的内容 print(output) ``` 在Flask中使用(更简单): ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('child.html', title='Index', some_variable='value') ``` 注意:在Flask中,模板文件默认放在项目目录下的`templates`文件夹中。 总结: 模板继承Jinja2中非常实用的功能,通过定义基础模板和块,子模板可以继承并覆盖这些块,从而实现页面结构的复用和定制。 §§相关问题§§: 1. 在Jinja2模板中,如何包含另一个模板文件? 2. Jinja2模板中的(macro)是什么?如何使用? 3. 如何在Jinja2模板中使用条件语句和循环? 4. 如何防止Jinja2模板中的跨站脚本攻击(XSS)?</think># Jinja2 模板继承详解 Jinja2Python 中最流行的模板引擎之一,其模板继承功能允许您创建可重用的模板结构,极大提高了开发效率和代码可维护性。 ## 模板继承核心概念 ### 1. 基础模板 (Base Template) 定义页面的基本骨架,包含可被子模板覆盖的区块 ### 2. 子模板 (Child Template) 继承基础模板并覆盖特定区块 ### 3. 区块 (Block) 使用 `{% block block_name %}` 定义的占位区域,可在子模板中覆盖 ## 完整实现示例 ### 基础模板 (base.html) ```html <!DOCTYPE html> <html lang="en"> <head> {% block head %} <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}默认标题{% endblock %}</title> <link rel="stylesheet" href="styles.css"> {% endblock %} </head> <body> <header> {% block header %} <h1>网站标题</h1> <nav> <ul> <li><a href="/">首页</a></li> <li><a href="/about">关于</a></li> <li><a href="/contact">联系</a></li> </ul> </nav> {% endblock %} </header> <main> {% block content %}{% endblock %} </main> <footer> {% block footer %} <p>© 2023 我的网站. 保留所有权利.</p> {% endblock %} </footer> {% block scripts %} <script src="main.js"></script> {% endblock %} </body> </html> ``` ### 子模板 (home.html) ```html {% extends "base.html" %} {# 覆盖标题区块 #} {% block title %}首页 - 我的网站{% endblock %} {# 覆盖头部区块并保留父模板内容 #} {% block head %} {{ super() }} {# 包含父模板中的内容 #} <link rel="stylesheet" href="home.css"> {% endblock %} {# 覆盖内容区块 #} {% block content %} <section class="hero"> <h2>欢迎访问我们的网站</h2> <p>这是我们的首页内容...</p> </section> <section class="features"> <div class="feature"> <h3>功能一</h3> <p>功能描述...</p> </div> <div class="feature"> <h3>功能二</h3> <p>功能描述...</p> </div> </section> {% endblock %} {# 覆盖脚本区块 #} {% block scripts %} {{ super() }} <script src="home.js"></script> {% endblock %} ``` ### 另一个子模板 (about.html) ```html {% extends "base.html" %} {% block title %}关于我们 - 我的网站{% endblock %} {% block content %} <article> <h2>关于我们</h2> <p>公司简介...</p> <section> <h3>团队介绍</h3> <ul> <li>成员一</li> <li>成员二</li> </ul> </section> </article> {% endblock %} {% block footer %} <p>© 2023 我的网站. 保留所有权利. | 关于我们</p> {% endblock %} ``` ## 模板继承工作原理 1. **继承声明**:子模板使用 `{% extends "base.html" %}` 声明继承关系 2. **区块覆盖**:子模板定义同名的 `{% block %}` 来覆盖父模板内容 3. **父内容引用**:使用 `{{ super() }}` 引用父模板中对应区块的内容 4. **渲染过程**: - 加载基础模板 - 用子模板的区块内容替换基础模板中的对应区块 - 渲染最终结果 ## 高级功能 ### 1. 嵌套继承 创建多级模板继承结构 ```html {# layout.html #} {% extends "base.html" %} {% block content %} <div class="sidebar"> {% block sidebar %}{% endblock %} </div> <div class="main-content"> {% block main %}{% endblock %} </div> {% endblock %} {# product.html #} {% extends "layout.html" %} {% block sidebar %} <h3>产品分类</h3> <ul> <li>类别一</li> <li>类别二</li> </ul> {% endblock %} {% block main %} <h1>产品详情</h1> <p>产品描述...</p> {% endblock %} ``` ### 2. 动态继承 根据条件选择继承的模板 ```jinja2 {% if user.is_admin %} {% extends "admin_base.html" %} {% else %} {% extends "user_base.html" %} {% endif %} ``` ### 3. 区块追加 在父模板内容后追加内容 ```jinja2 {% block scripts %} {{ super() }} <script src="extra.js"></script> {% endblock %} ``` ### 4. 区块预处理 在父模板内容前添加内容 ```jinja2 {% block head %} <meta name="description" content="页面描述"> {{ super() }} {% endblock %} ``` ## Python 代码渲染模板 使用 Flask 框架渲染模板的示例: ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/') def home(): return render_template('home.html', page_title="首页", features=get_features()) @app.route('/about') def about(): return render_template('about.html', team_members=get_team_members()) if __name__ == '__main__': app.run(debug=True) ``` ## 最佳实践 1. **命名规范**: - 基础模板:`base.html` 或 `layout.html` - 子模板:使用描述性名称如 `home.html`, `product_detail.html` 2. **区块组织**: ```jinja2 {# 推荐区块结构 #} {% block head %}{% endblock %} {% block header %}{% endblock %} {% block content %}{% endblock %} {% block sidebar %}{% endblock %} {% block footer %}{% endblock %} {% block scripts %}{% endblock %} ``` 3. **默认内容**: ```jinja2 {% block sidebar %} <div class="default-sidebar"> <h3>默认侧边栏</h3> <p>默认内容...</p> </div> {% endblock %} ``` 4. **模板组织目录**: ``` templates/ ├── base.html ├── layouts/ │ ├── admin_layout.html │ └── user_layout.html ├── partials/ │ ├── header.html │ └── footer.html ├── home/ │ ├── index.html │ └── features.html └── products/ ├── list.html └── detail.html ``` ## 常见问题解决 ### 问题1:区块未覆盖 **症状**:子模板未覆盖父模板区块,显示默认内容 **解决**:在子模板中添加同名区块定义 ### 问题2继承链中断 **症状**:`super()` 调用未按预期工作 **解决**:确保继承链完整,中间模板也使用 `super()` ### 问题3:性能问题 **症状**:复杂继承结构导致渲染变慢 **解决**: 1. 简化继承层级 2. 使用模板片段 (`{% include %}`) 3. 启用 Jinja2 缓存 ```python # Flask 中启用缓存 app.jinja_env.cache = {} ``` ## 总结 Jinja2 模板继承提供了强大的代码复用能力: - 基础模板定义整体结构和通用元素 - 子模板覆盖特定区域实现定制化 - `super()` 方法允许扩展而非完全替换 - 嵌套继承支持复杂界面结构 - 与 Python 逻辑无缝集成 通过合理使用模板继承,可以显著减少重复代码,提高开发效率,并保持项目的一致性。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值