优化

引入模版

有些代码是重复的，可以单独抽取出来，哪里需要用到，就使用{% include "html模板" %}(模板查找路径也是跟setting.py中的DIRS有关)

  • 实例

    • 定义两个html文件，分别作为可重复的页面头和页面尾的内容

      1. <!-- header.html -->
      2. <h1>
      3. <br>
      4. <a href="{% url 'main' %}"> 首页 </a>
      5. <br>
      6. <a href="{% url 'first' %}"> page1 </a>
      7. <br>
      8. </h1>
      1. <!-- footer.html -->
      2. <h1>
      3. 这是尾部
      4. </h1>

    • 定义两个页面，用{% include 'xxx.html' %}引入以上两个模版 ```html

<!DOCTYPE html>

{% include “header.html” %} 这是首页 {% include “footer.html” %} 

  1. ```html
  2. <!-- page1 -->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>page1</title>
  8. </head>
  9. <body>
  10.     {%  include "header.html" %}
  11.         这是页面一
  12.     {%  include "footer.html" %}
  13. </body>
  14. </html>
  • urls映射 ```python

    urls.py

path(‘main/‘, views.url_main, name=”main”), #给URL一个名字 path(‘page1/‘, views.url_page1, name=”first”), #给URL一个名字

  2.    - 视图函数
  3. ```python
  4. # views.py
  5. def url_main(request):
  6.     return render(request, "main.html")
  9. def url_page1(request):
  10.     return render(request, "page1.html")
  • 运行
    模版结构 - 图1
    模版结构 - 图2

引入模板的变量

设定引入模板的称为父模板，被引入模板称为子模板

  • 传给父模版的上下文(reverse()的context参数)，如果在子模板中也有定义，子模板也可以获得该值

    • 修改上述的header.html

      1. <h1>
      2. <br>
      3. <a href="{% url 'main' %}"> 首页 </a>
      4. <br>
      5. <a href="{% url 'first' %}"> page1 </a>
      6. <br>
      7. 这里有个值-> {{ value }}  ｛# 这里有个变量 #｝
      8. <br>
      9. </h1>

    • 修改main.html

      1. {% include "header.html" %}
      2. 这是首页
      3. 这里有个值->{{ value }} {# 加一个变量 #}
      4. {% include "footer.html" %}

    • 修改视图函数

      1. # views.py
      2. def url_main(request):
      3. context = {
      4.    "value": "jack",
      5. }
      6. return render(request, "main.html", context=context)

    • 运行
      模版结构 - 图3
      模版结构 - 图4
      可以看到page1.html中引入的header.html中的{{value}}没有获得该值

  • 如果子模板有一个变量，而父模板没有获得上下文，那么可以在include的时候给子模板的变量一个值

    • 在上述步骤后修改page1.html

      1. {%  include "header.html" with value="lee"%} {# 注意value和值之间的=没有空格 #}
      2. 这是页面一
      3. {%  include "footer.html" %}

    • 运行
      模版结构 - 图5

继承模版

类似python中的类，在父模板中先定义好一些子模板需要用到的代码，由子模板直接继承。

父模块中可以定义一个block接口，子模板来实现

  • 实现

    • 定义一个父模版base.html

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>base</title>
      6. </head>
      7. <body>
      8. <h1> 开头 </h1>
      9. <div>
      10.    {% block block_name %} {# block标签用于给子模板重写，block后面带一个名字#}
      11.        这里是父模版的内容
      12.    {% endblock %}
      13. </div>
      14. <h1> 结尾 </h1>
      15. </body>
      16. </html>

    • 继承父模板的模板child.html,extends标签必须写在最前面

      1. {% extends "base.html" %}

    • urls映射

      1. path('base/', views.url_base, name='base'),

    • 视图函数

      1. def url_base(request):
      2. return render(request, 'child.html')

    • 运行
      模版结构 - 图6

  • 子模板可以重写block标签
    • 修改child.html ```html {% extends “base.html” %} {% block block_name %}

      {{ block.super }}

      {# 这个是调用父模板block的内容 #} 改写！重写block {% endblock %}

block标签外的改写无效！

  2.    - 运行
  3. <br />![](https://cdn.nlark.com/yuque/0/2019/png/367873/1559638075733-583a1066-12ca-43f6-9bb3-0df75d99e3e4.png#align=left&display=inline&height=269&originHeight=269&originWidth=293&size=0&status=done&width=293)
  4. - 如果父模板的有变量，可以接收到子模板的上下文内容
  5.    - 修改`base.html`
  6. ```html
  7. {% block block_name %}
  8.     <a href="{% url 'base' %}"> base跳转主页 </a>
  9.     接收子模板的上下文 {{ value }}
  10.     这里是父模版的内容
  11. {% endblock %}
  • 修改child.html ```html {% extends “base.html” %} {% block block_name %}

    {{ block.super }}

    {# 这个是调用父模板block的内容 #} child跳转主页 这个是上下文内容: {{ value }} {% endblock %}

block标签外的改写无效！

  2.    - 修改视图函数
  3. ```python
  4. def url_base(request):
  5.     context = {
  6.         "value": "NOTHING"
  7.     }
  8.     return render(request, 'child.html', context=context)
  • 运行
    模版结构 - 图7
    • 注意事项
  • block带名字最好
  • extends标签必须放在最前面
  • 字模板的代码在block中才会被渲染