模板继承、组件

模板继承、组件

  • 模板继承

    • 母板: 尽可能多的放勾子,以达到代码复用, 减少重复代码

      勾子block 名称不能重复,endblock 加上名称以便清晰标识

      # base.html
      
      {% block href %}
          <a href="">base push me</a>
      {% endblock href %}
      
    • 子模板: 需要继承母板的html

      {{ block.super }}: 类似oop的super, 调用母板样式,再渲染自己的样式

      # index.html
      
      {% block href %}
          <a href="">index push me</a>
      {% endblock href %}
      
      {% block href %}
      	{{ block.super }}
          <a href="">index push me</a>
      {% endblock href %}
      
  • 组件

    可以将常用的页面内容如导航条,页尾信息等组件保存在单独的文件中,然后在需要使用的地方,文件的任意位置按如下语法导入即可

    语法: {% include 'nav.html' %}

    • 如导航栏nav.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .c1{
                background-color: red;
                height: 40px;
            }
        </style>
    </head>
    <body>
    
    <div class="c1">
        <div>
            <a href="">xx</a>
            <a href="">dd</a>
        </div>
    </div>
    
    </body>
    </html>
    

    nav.html嵌入其他页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    {% include 'nav.html' %}
    <h1>xxxxxxxxxx</h1>
    </body>
    </html>
    
  • block extends include三者的差别跟用法

    1. 定义基础模板,在html内容中定义多个block块,block由子模板引用同名block块,来决定是否替换这些部分

      {% block title %}一些内容,这里可不填{% endblock %}
      {% block content %}一些内容,这里可不填{% endblock %}
      {% block footer %}一些内容,这里可不填{% endblock %}

      这里 title content footer 不是变量,名字自定义

      block一般定义在base.html中 block是可以在那些继承base的html中添加内容的区

    2. 子模板的引用方式
      {% extends “base.html” %}
      {% block title %}The current time{% endblock %}
      {% block content %}

      It is now {{ current_date }}.

      {% endblock %}
      第一句是固定的格式,必须为模板中的第一个模板标记
      extends的参数一般为字符串,也可为变量
      可带路径,相对路径,以 TEMPLATE_DIRS 的模板目录 为基准
      子模板决定替换的block块,无须关注其它部分,没有定义的块即不替换,直接使用父模板的block块

    3. 引用上级代码块在其基础上进行一些修改 {{ block.super }}
      {% block footer %}
      {{ block.super }}
      AAAAA
      {% endblock %}

    • Django模板系统——模板包含另一模板 include

      使用模板加载API机制之后,可用的包含其它模板标签
      {% include ‘nav.html’ %}
      {% include “nav.html” %}

      可带路径,相对路径,以 TEMPLATE_DIRS 的模板目录 为基准
      {% include ‘includes/nav.html’ %}

      可使用变量名
      {% include template_name %}
      包含的变量都会统一处理,不区分是第几层模板

      Django的{{ block.super }}模板标签
      Django模板中{{ block.super }}这个标签非常有用,可以做到不仅仅是覆盖父模板,而是在父模板基础上追加内容。当然也可以覆盖。

      这就给了我们灵活性:既可以完全重写,也可以复用父模板,也可以在复用的基础上扩展。

      locals() 技巧

      locals()返回一个包含当前作用域里面的所有变量和它们的值的字典

      from django.shortcuts import render_to_response
      import datetime
      def current_datetime6(request):
      	current_date = datetime.datetime.now()
      	return render_to_response(‘current_datetime6.html’, locals())
      
原文地址:https://www.cnblogs.com/relaxlee/p/12842651.html