模板继承

做过web station的朋友应该知道,网页中常会有大量的冗余代码。

比较传统的方法是把相同的代码单独写在一起。

然后在用include加载到实际的页面中。

django中{% include %}就起到这个作用,不过通常情况下并不这样用


更有效的方法是使用模板继承,简单来说,需要先写一个包含所有共用代码的模板作为父模板,然后实际的网页继承父模板,并体现其不同的地方。

这里是父模板,base.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <h1>My helpful timestamp site</h1>
    {% block content %}{% endblock %}
    {% block footer %}
    <hr>
    <p>Thanks for visiting my site.</p>
    {% endblock %}
</body>
</html>

在父模板中<% block *** %><% endblock %>之间的内容是子模板中可以编辑的部分,而在父模板的内容是默认设置,其他部分是共用代码。


实际页面,current_date.html

{% extends "base.html" %}

{% block title %}The current time{% endblock %}

{% block content %}
<p>It is now {{ current_date }}.</p>
{% endblock %}
{% block footer %}
    {{ block.super }}
    <p> Thanks </p>
{% endblock %}

<% extends %>指名要继承的父模板。

{{ block.super }}代表父模板中的默认设置,常在追加编辑时使用。


然后,是相应的视图函数date,在views.py中

from django.http import HttpResponse
from django.shortcuts import render_to_response
import datetime

def hello(request):
    return HttpResponse("hello world")

def showtime(request):
    now = datetime.datetime.now()
    html = "<html><body>It is now "+str(now)+"</body></html>"
    return HttpResponse(html)


def letter(request):
    name = "wangxb"
    company = "kuxun"
    date = datetime.datetime.now()
    item = ["abcd","dbdkj"]
    ordered_warranty = True
    return render_to_response('letter.html',{
        'person_name':name,
        'company':company,
        'ship_date':date,
        'item_list':item,
        'ordered_warranty':ordered_warranty})

def time(request):
    time = datetime.datetime.now()
    return render_to_response('time.html',locals())

def date(request):
    current_date = datetime.datetime.now()
    return render_to_response('current_date.html',locals())


最后,设置映射,urls.py

from django.conf.urls import patterns, include, url
from mysite.views import hello,showtime,letter,time,date
# Uncomment the next two lines to enable the admin:
# from django.contrib import admin
# admin.autodiscover()

urlpatterns = patterns('',
    # Examples:
    # url(r'^$', 'mysite.views.home', name='home'),
    # url(r'^mysite/', include('mysite.foo.urls')),

    # Uncomment the admin/doc line below to enable admin documentation:
    # url(r'^admin/doc/', include('django.contrib.admindocs.urls')),

    # Uncomment the next line to enable the admin:
    # url(r'^admin/', include(admin.site.urls)),
    ('^hello/$',hello),
    ('^time/$',showtime),
    ('^letter',letter),
    ('^_time',time),
    ('^date',date),
)

添加最后的date内容就可以了


以上就是模板继承的方法了

里面包含了之前文章中的代码,并不是全部有用的,如果感觉看不懂的话,建议看下前面的文章,了解下django的工作原理。

<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框架(Jinja2是Flask的默认模板引擎),但也可以单独使用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 模板继承详解 Jinja2 是 Python 中最流行的模板引擎之一,其模板继承功能允许您创建可重用的模板结构,极大提高了开发效率和代码可维护性。 ## 模板继承核心概念 ### 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、付费专栏及课程。

余额充值