1. 简单示例

1.1. 父模板 base.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <link rel="stylesheet" href="style.css" />
  5.     <title>{% block title %}My amazing site{% endblock %}</title>
  6. </head>
  8. <body>
  9.     <div id="sidebar">
  10.         {% block sidebar %}
  11.         <ul>
  12.             <li><a href="/">Home</a></li>
  13.             <li><a href="/blog/">Blog</a></li>
  14.         </ul>
  15.         {% endblock %}
  16.     </div>
  18.     <div id="content">
  19.         {% block content %}{% endblock %}
  20.     </div>
  21. </body>
  22. </html>

1.2. 子模板 example.html

  1. {% extends "base.html" %}
  3. {% block title %}My amazing blog{% endblock %}
  5. {% block content %}
  6.     {% for entry in blog_entries %}
  7.         <h2>{{ entry.title }}</h2>
  8.         <p>{{ entry.body }}</p>
  9.     {% endfor %}
  10. {% endblock %}

注意

  • {% extends %} 标签告诉模板引擎继承了哪个模板
  • 子模板中没有定义的部分将继承父模板内容

2. 多级继承

2.1. 步骤

  1. 创建 base.html 控制整站视觉及体验
  2. app 中
    a. 创建 base_SECTION.html 比如 base_news.html
    b. 继承 命名空间/base.html 同时又自有样式
  3. 创建页面独立模板，继承对应 app 的模板

2.2. 说明

  1. {% extends %} 必须是第一个标签，必须在首行
  2. {% block %}
    a. 在 base.html 中越多越好
    b. 如果有大量内容重复，都应该放到其中
  3. 如果用到父模板中内容用 {{ block.super }}