zoukankan      html  css  js  c++  java
  • django的母板和继承

    Django模板中只需要记两种特殊符号:

    {{  }}和 {% %}

    {{ }}表示变量,在模板渲染的时候替换成值,{% %}表示逻辑相关的操作。

    母板

    <!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块,方便子页面替换。

    继承母板

    在子页面中在页面最上方使用下面的语法来继承母板。
    {% extends 'layouts.html' %}

    块(block)

    通过在母板中使用{% block  xxx %}来定义""。
    
    在子页面中通过定义母板中的block名来对应替换母板中相应的内容。
    {% block page-main %}
      <p>世情薄</p>
      <p>人情恶</p>
      <p>雨送黄昏花易落</p>
    {% endblock %}

    组件

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

    静态文件

    {% 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>

    自定义simpletag

    和自定义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

    多用于返回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/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 my_inclusion %}
    
    {% show_results 10 %}
    </body>
    </html>

    简单总结

        2. 母板和继承
            1.为什么要用母板和继承:
                很多页面有重复或相似的代码,减少代码的重复和修改方便才用母板和继承
            2.具体步骤:
                1. 创建一个母板,'base.html' 将多个页面的重复代码提取出来
                2. 在母板中定义多个block,来区分不同页面的不同内容
                3. 在子页面中继承母板  {% extends 'base.html' %}
                4. 在block中写自己页面独特的内容
                
            3. 注意事项
                1. {% extends 'base.html' %} 写在第一个行
                2. {% extends 'base.html' %}  base.html加上引号  不然当做是变量
                3. 通常定义多个block,还有一个page-css 和 page-js 
        3. 组件
            将一小部分的HTML代码写在一个模板中。———》 组件
            在其他的页面中 {% include 'nav.html' %}
            
        4. 静态文件的内容
            {% load static %}
            "{% static 'css/mycss.css' %}"    ——》 /static/css/mycss.css
            
            {% get_static_prefix %}  —— 》  /static/
            
            "{% get_static_prefix %}css/mycss.css"
                
                
        5. 自定义simple_tag 和自定义filter类似,只不过接收更灵活的参数。 和 
    inclusion_tag 多用于返回html代码片段
  • 相关阅读:
    变形金刚还有一个星期!
    SQLSERVER中日期显示样式(网络收集)
    美国《商业周刊》网站提前公布的2007年度世界最有价值品牌
    昨天论文被录 开心
    怎样用javascript操作ftb编辑区内容
    c#中 @的用处
    图片滚动代码。
    一段实现分页的存储过程
    下拉列表控制文本框的个数思路
    什么是ERP (转载自百度知道)
  • 原文地址:https://www.cnblogs.com/hnlmy/p/10601619.html
Copyright © 2011-2022 走看看