zoukankan      html  css  js  c++  java
  • 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>
        <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>

    使用get_static_profix

    {% load static %}
    <img src="{% get_static_prefix %}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!" />

    自定义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代码片段

    示例:

    templatetages/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>
  • 相关阅读:
    HDU5418.Victor and World(状压DP)
    POJ2686 Traveling by Stagecoach(状压DP)
    POJ3254Corn Fields(状压DP)
    HDU5407.CRB and Candies(数论)
    CodeForces 352D. Jeff and Furik
    CodeForces 352C. Jeff and Rounding(贪心)
    LightOj 1282 Leading and Trailing
    Ural 1057. Amount of Degrees(数位DP)
    HDU 2089 不要62 (数位DP)
    HDU5366 The mook jong (DP)
  • 原文地址:https://www.cnblogs.com/ALADL/p/9767423.html
Copyright © 2011-2022 走看看