Django模版语言-CFANZ编程社区

模版

模版是纯文本文件。包括在使用时会被值替换掉的变量，和控制模版逻辑的标签。

下面是一个小模版，它说明了一些基本的元素。后面的文档中会解释每个元素。

渲染上下文时，渲染顺序是模板、HTML、JS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    {% block title %}
    <title>前端神器</title>
    {% endblock %}

    <!-- HTML图标 -->
    <link rel="icon" href="/static/images/宁夏西部绿谷节水技术有限公司logo.png" type="image/x-icon"/>

    <link rel="stylesheet" href="/static/css/uikit.css" />
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/uikit.min.js"></script>
    {% block styles %}
        <!-- 实例页面的单独使用的js css -->
    {% endblock %}
</head>
<body>

{% block header %}
<!-- 基础页面头部 -->
{% csrf_token %}
<nav data-uk-sticky class="tm-navbar uk-navbar">
    <div class="uk-container uk-container-center">

        <a class="uk-navbar-brand uk-hidden-small" href="#"><img class="uk-margin uk-margin-remove" src="/static/images/materialPreview2.svg" title="前端神器" alt="前端神器"></a>

        <ul class="uk-navbar-nav uk-hidden-small">
            <li><a href="#">首页</a></li>
            {% if request.user.is_authenticated %}
            <li><a href="#">项目</a></li>
            <li><a href="#">服务</a></li>
            <li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false">
                <a href="/setting/{{ request.user.username }}/info/">{{ request.user.username }}</a>
                <div class="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom" style="top: 40px; left: 0px;">
                    <ul class="uk-nav uk-nav-navbar">
                        <li><a href="/setting/{{ request.user.username }}/info/">个人中心</a></li>
                        {% if request.session.is_brancher %}
                        <li><a href="#">系统管理</a></li>
                        {% endif %}
                        <li><a href="#">注销</a></li>
                    </ul>
                </div>
            </li>
            {% else %}
            <li><a href="#">欢迎登录</a></li>
            {% endif %}
        </ul>
    </div>
</nav>
{% endblock %}


{% block left %}
<!-- 基础页面左侧 -->
{% endblock %}

{% block right %}
<!-- 基础页面右侧 -->
{% endblock %}

{% block content %}
<!-- 基础页面内容 -->
{% endblock %}


{% block footer %}
<!-- 基础页面底部 -->
<div class="uk-block uk-block-large tm-footer-color tm-footer">
    <div class="uk-container uk-container-center uk-text-center tm-footer-padd">

        <ul class="uk-subnav uk-subnav-line uk-flex-center">
            <!--<li><a href="{% url 'advise/'%}">建议&反馈</a></li>-->
            <li><a href="#">更新日志</a></li>
            <li><a href="#">帮助文档</a></li>
            <li><a href="#">加入我们</a></li>
        </ul>

        <div class="uk-panel">
            <p>Made by <a href="#">宁夏西部绿谷节水技术有限公司</a> .</p>
            <a href="#"><img src="/static/images/materialPreview2.svg" width="90" height="30" title="前端神器前端神器" alt="峡谷先锋"></a>
        </div>

    </div>
</div>
{% endblock %}

<div class="tm-top-btn">
    <a href="#" class="uk-icon-button uk-icon-arrow-up" data-uk-smooth-scroll="{offset: 100000}"></a>
    <a href="#" class="uk-icon-button uk-icon-home"></a>
    <a href="#" class="uk-icon-button uk-icon-arrow-down" data-uk-smooth-scroll="{offset: -100000}"></a>
</div>

</body>
<script>
    console.log('欢迎找BUG\n请将反馈发送至 %c bad886@dingtalk.com（ 邮件标题请以“神器-来自console”命名 ）\n%c恶意捣乱，请手下留情，我还是个孩子。\n鸣谢 Uikit http://www.getuikit.net',"color:red","color:black");
</script>
</html>

变量

{{ variable }}像这样来使用变量。

当渲染模版时遇到一个变量，它将计算这个变量，然后用结果替换掉它本身。

当模版系统遇到点(".")，它将以这样的顺序查询：

字典查询

{{defaultlist.title}}

属性或方法查询

{% for k, v in defaultdict.iteritems %}
 {{k}},{{v}}

{% endfor %}

列表索引查询

{{defaultlist.0}}

过滤器

{{ variable|default:"nothing"}}像这样来改变变量的值。

过滤器能够被“串联”。一个过滤器的输出将被应用到下一个。{{ text|escape|linebreaks }} 就是一个常用的过滤器链，它编码文本内容，然后把行打破转成<p> 标签。

一些过滤器带有参数。过滤器的参数看起来像是这样： {{ bio|truncatewords:30 }}。这将显示 bio 变量的前30个词。

过滤器参数包含空格的话，必须被引号包起来；例如，使用逗号和空格去连接一个列表中的元素，你需要使用 {{ list|join:", " }}

Django提供了大约六十个内置的模版过滤器。你可以在内置过滤器参考手册中阅读全部关于它们的信息。为了体验一下它们的作用，这里有一些常用的模版过滤器：

default

如果 value

没有被提供，或者为空，将显示“ nothing

”

{{ value|default:"nothing" }}

length 返回值的长度。它对字符串和列表都有效

{{ value|length }}

wordwrap 以指定的行长度换行单词，每5个字符换行

{{ value|wordwrap:5 }}

upper 将字符串转换为大写形式

{{ value|upper }}

lower 将字符串转换为全部小写

{{ value|lower }}

truncatewords 在一定数量的字后截断字符串

{{ value|truncatewords:2 }}

first 返回列表中的第一项

{{ value|first }}

last 返回列表中的最后一个项目

{{ value|last }}

safe 将字符串标记为在输出之前不需要进一步的HTML转义。当自动转义关闭时，此过滤器不起作用。

{{ var|safe }}

父模板定义 {% block title %} 父模板 {% endblock %}
子模板可重写 {% block title %} 子模版 {% endblock %}
{{ block.super }} 如果你想要在父block 中新增内容而不是完全覆盖它，block.super获取父模板中的block 的内容。
子模板可重写 {% block title %} {{ block.super }}-子模块 {% endblock %}

url

返回一个绝对路径的引用(不包含域名的URL)，该引用匹配一个给定的视图函数和一些可选的参数。

{% url 'some-url-name' v1 v2 %}

csrf_token

用于跨站请求伪造保护

for

循环组中的每一个对象，并让这些对象在上下文可用。可以循环列表 datalist

中的每个成员：

<ul>
{% for athlete in datalist %}
    <li>{{ athlete.name }}</li>
{% endfor %}
</ul>

可以循环字典datadict的键和值：

{% for key, value in datadict.items %}
    {{ key }}: {{ value }}
{% endfor %}

for ... empty

当循环内容为空时执行 empty

内语句

<ul>
{% for athlete in athlete_list %}
    <li>{{ athlete.name }}</li>
{% empty %}
    <li>Sorry, no athletes in this list.</li>
{% endfor %}
</ul>

<ul>
{% if data == 1 %}
    <li>青青子衿<li>
{% elif data == 2 %}    
    <li>悠悠我心<li>
{% else%}
    <li>低糖海鲜饼<li>
{% endif %}
<ul>

复合表达式

对于这样的表达式，重要的是要知道在表达式求值时如何对运算符进行分组 - 即优先级规则。操作符的优先级从低至高如下：

or
and
not
in
==, !=, <, >, <=, >=

所以，例如，下面的复杂 if

标签：

{% if a == b or c == d and e %}

verbatim

停止模版引擎在该标签中的渲染常见的用法是允许与Django语法冲突的JavaScript模板图层。例如：

{% verbatim %}
    {{if dying}}Still alive.{{/if}}
{% endverbatim %}

autoescape

控制自动转义是否可用.这种标签带有任何 on

或 off

作为参数的话，他将决定转义块内效果。

{% autoescape on %}
    {{ body }}
{% endautoescape %}

模版继承

模版继承可以让您创建一个基本的“骨架”模版，它包含您站点中的全部元素，并且可以定义能够被子模版覆盖的 blocks

。从上面的例子开始：基础模版构建了页面基础结构，并分出了 title、styles、header、left、right、content、footer能被子模版重写的block块，这样的模板被我们称为base.html,它定义了一个简单HTML骨架。 “子模版”的工作是用它们的内容填充空的block或者继承父模版的内容并修改它。

{% extends 'base.html' %}

{% block title %}
<title>综合管理系统</title>
{% endblock title %}

{% block styles %}
<!-- 实例页面的单独使用的js css -->
<!-- 可以使用{{ block.super }} 变量 -->
<script src="/static/js/hcharts/highcharts.js"></script>
<script src="/static/js/hcharts/exporting.js"></script>
<script src="/static/js/hcharts/sand-signika.js"></script>
<script src="/static/js/hcharts/drilldown.js"></script>
<script src="/static/js/hcharts/highcharts-zh_CN.js"></script>
{% endblock styles %}

{% block content %}
<div class="uk-container-center uk-margin tm-margin-left">
    <div class="uk-grid uk-grid-small">
        <div class="uk-width-1-10" data-uk-grid-margin="">
            <div class="uk-width-1-1">
                <div class="tm-sidebar uk-hidden-small uk-row-first">
                    <ul class="tm-nav uk-nav" data-uk-nav="">
                        <li class="uk-nav-header">系统管理</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="uk-width-9-10">

            <div class="tm-margin-left tm-margin-right">
                {% block monitor_content %}

                {% endblock monitor_content %}
            </div>

        </div>
    </div>
</div>
{% endblock content %}

extends

标签是这里的关键。它告诉模版引擎，这个模版“继承”了“base.html”模版。那时，模版引擎将注意到 base.html

中的七个 block

标签，并用子模版中的内容来替换这些block。子模版中一样可以定义新的 block

标签，供更低级的子模版使用。请注意，子模版并没有定义 footer

block，所以系统将使用父模版中的值。您可以根据需要使用多级继承。使用继承的一个常用方式是类似下面的三级结构：

创建一个 base.html 模版来控制您整个站点的主要视觉和体验。
为您的项目的每一个“分支”创建一个base_branch.html 模版。这些模版都继承自 base.html ，并且包含了每部分特有的样式和设计。
为每一种页面类型创建独立的模版，例如新闻内容或者博客文章。这些模版继承对应“分支”的模版。
这种方式使代码得到最大程度的复用，并且使得添加内容到共享的内容区域更加简单，例如分支范围内的导航。

这里是使用继承的一些提示：

{% extends %} 标签，它必须是模版中的第一个标签。其他的任何情况下，模版继承都将无法工作。
在base模版中设置越多的 {% block %} 标签越好，子模版不必使用全部父模版中的blocks，你可以在大多数blocks中填充合理的默认内容，使base可以满足更多的使用场景。
在一个模板中不能定义多个相同名字的block 标签。
如果你发现你自己在大量的模版中复制内容，那你应该考虑把这些内容移动到父模版中的一个 {% block %} 中。
如果需要获取父模板中的block 的内容，可以使用{{ block.super }} 变量。如果你想要在父block 中新增内容而不是完全覆盖它，它将非常有用。
为了更好的可读性，你也可以给你的 {% endblock %} 标签一个名字。例如：

{% block content %}
    ...
{% endblock content %}

在大型模版中，这个方法帮你清楚的看到哪一个　 {% block %}

标签被关闭了。