• Django模板语言-(母板、组件、静态文件相关、simple_tag、inclusion_tag)


    母板

    1. 母版的写法
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
        {% block page-css %}
        
        {% endblock %}
      </head>
      <body>
      
      <h1>这是母板的标题</h1>
      
      {% block page-main %}
      
      {% endblock %}
      <h1>母板底部内容</h1>
      {% block page-js %}
      
      {% endblock %}
      </body>
      </html>

      注意:我们通常会在母板中定义页面专用的CSS块和JS块,方便子页面替换。

    2. 继承母版
      # 在子页面中在页面最上方使用下面的语法来继承母板。
      
      {% extends 'layouts.html' %}
    3. block(块)的替换
      # 通过在母板中使用{% block  xxx %}来定义"块"。
      
      # 在子页面中通过定义母板中的block名来对应替换母板中相应的内容。
      
      {% block page-main %}
        <p>世情薄</p>
        <p>人情恶</p>
        <p>雨送黄昏花易落</p>
      {% endblock %}

    组件

    #可以将常用的页面内容如导航条,页尾信息等组件保存在单独的文件中,然后在需要使用的地方按如下语法导入即可。
    
    {% include 'navbar.html' %}

    静态文件相关

    1. {% static %}

      {% load static %}
      <img src="{% static 'images/hi.jpg' %}" alt="Hi!" />

      引用JS文件时使用:

      {% load static %}
      <script src="{% static 'mytest.js' %}"></script>

      某个文件多处被用到可以存为一个变量

      {% load static %}
      {% static "images/hi.jpg" as myphoto %}
      <img src="{{ myphoto }}"></img>
    2. {% get_static_prefix %}

      # {% get_static_prefix %} 的作用跟{%static%}差不多。
      # {% get_static_prefix %} 会在页面上打印static的访问路径
      
      {% load static %}
      <img src="{% get_static_prefix %}images/hi.jpg" alt="Hi!" />
      # 上面这段代码等于 <img src="/static/images/hi.jpg" alt="Hi!" />
      
      
      # 另一种写法
      
      
      {% load static %}
      {% get_static_prefix as STATIC_PREFIX %}
      
      <img src="{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi!" />
      <img src="{{ STATIC_PREFIX }}images/hi2.jpg" alt="Hello!" />

    filter (创建存放自定义标签,过滤器的文件夹(文件名是固定的,必须是:templatetags))

    1. 定义:

      from django import template
      
      #变量名称不能变 Django固定名称
      register=template.Library()
      
      
      @register.filter #加上此装饰器说明是过滤器
      def multi_fliter(x,y):
      
          return x*y
      
      @register.simple_tag #加上此装饰器说明是标签
      def multi_tag(x,y):
      
          return x*y
    2. 应用

      <h1>自定义标签,过滤器</h1>
      
      <h5>导入</h5>
      {% load my_tag_filter %}
      
      
      <h6>过滤器</h6>
      {{ 7|multi_fliter:5 }}
      
      
      <h6>标签</h6>
      {% multi_tag 7 7 %}
      
      
      
       注意:
      
          过滤器最多之能传入两个参数,如果过滤器返回的结果可以参与if判断
      
          标签可以传入多个参数,但是不能参与if判断
       
      {% if 7|multi_fliter:5 >100 %}
      <p>大于100</p>
      {% else %}
      <p>小于100</p>
      {% endif %}

     

    simple_tag(创建存放自定义标签,过滤器的文件夹(文件名是固定的,必须是:templatetags))

    # 和自定义filter类似,只不过接收更灵活的参数。
    
    # 定义注册simple tag
    
    @register.simple_tag(name="plus")
    def plus(a, b, c):
        return "{} + {} + {}".format(a, b, c)
    
    # 使用自定义simple tag
    
    {% load app01_demo %}
    
    {# simple tag #}
    {% plus "1" "2" "abc" %}

    inclusion_tag(创建存放自定义标签,过滤器的文件夹(文件名是固定的,必须是:templatetags))

    多用于返回html代码片段

    示例:

    templatetags/my_inclusion.py

    from django import template
    
    register = template.Library()
    
    
    @register.inclusion_tag('result.html')
    def show_results(n):
        n = 1 if n < 1 else int(n)
        data = ["第{}项".format(i) for i in range(1, n+1)]
        return {"data": data}

    templates/snippets/result.html

    <ul>
      {% for choice in data %}
        <li>{{ choice }}</li>
      {% endfor %}
    </ul>

    templates/index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>inclusion_tag test</title>
    </head>
    <body>
    
    {% load inclusion_tag_test %}
    
    {% show_results 10 %}
    </body>
    </html>
  • 相关阅读:
    小 X 的密码破译
    时光机
    战争
    iOS TDD
    iOS url schemes应用


    二分查找
    搜索
    链表
  • 原文地址:https://www.cnblogs.com/wtil/p/11488620.html
Copyright © 2020-2023  润新知