模板代码复用的三种方式: 宏, 继承, 包含

模板代码复用

在模板中，可能会遇到以下情况：

• 多个模板具有完全相同的顶部和底部内容
• 多个模板中具有相同的模板代码内容，但是内容中部分值不一样
• 多个模板中具有完全相同的 html 代码块内容

  宏

  对宏(macro)的理解：

  • 可以把宏理解为一个函数，它会返回一个模板或者 HTML 字符串
  • 为了避免反复地编写同样的模板代码，出现代码冗余，可以把他们写成函数以进行重用
  • 需要在多处重复使用的模板代码片段可以写入单独的文件，再包含在所有模板中，以避免重复

  使用

  • 定义宏

  {% macro input(name,value='',type='text') %}
      <input type="{{type}}" name="{{name}}"
          value="{{value}}" class="form-control">
  {% endmacro %}
  

  • 调用宏

  {{ input('name' value='zs')}}
  

  • 这会输出

  <input type="text" name="name"
      value="zs" class="form-control">
  

  • 把宏单独抽取出来，封装成html文件，其它模板中导入使用，文件名可以自定义macro.html

  {% macro function(type='text', name='', value='') %}
  <input type="{{type}}" name="{{name}}"
  value="{{value}}" class="form-control">
  
  {% endmacro %}
  

  • 在其它模板文件中先导入，再调用

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

• 继承

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

  • 相当于在父模板中挖个坑，当子模板继承父模板时，可以进行填充。
  • 子模板使用 extends 指令声明这个模板继承自哪个模板
  • 父模板中定义的块在子模板中被重新定义，在子模板中调用父模板的内容可以使用super()

  父模板

  • base.html

  {% block top %}
    顶部菜单
  {% endblock top %}
  
  {% block content %}
  {% endblock content %}
  
  {% block bottom %}
    底部
  {% endblock bottom %}
  

  子模板

  • extends指令声明这个模板继承自哪

  {% extends 'base.html' %}
  {% block content %}
   需要填充的内容
  {% endblock content %}
  

  • 模板继承使用时注意点：
    • 不支持多继承
    • 为了便于阅读，在子模板中使用extends时，尽量写在模板的第一行。
    • 不能在一个模板文件中定义多个相同名字的block标签。
    • 当在页面中使用多个block标签时，建议给结束标签起个名字，当多个block嵌套时，阅读性更好。

      包含

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

      • include的使用

      {% include 'hello.html' %}
      

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

      • include 的使用加上关键字ignore missing

      {% include 'hello.html' ignore missing %}
      

      小结

      • 宏(Macro)、继承(Block)、包含(include)均能实现代码的复用。
      • 继承(Block)的本质是代码替换，一般用来实现多个页面中重复不变的区域。
      • 宏(Macro)的功能类似函数，可以传入参数，需要定义、调用。
      • 包含(include)是直接将目标模板文件整个渲染出来。