其他分享
首页 > 其他分享> > Django模版语言

Django模版语言

作者:互联网

模版

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

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

渲染上下文时,渲染顺序是  模板、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 }}

标签

标签:有些用于在输出中创建文本,有些用于控制循环或逻辑。
extends 表示当前模板继承自一个父模板,该标签必须使用在文件的首行。
{% extends "base.html" %} (要有引号).继承名为"base.html"的父模板
include 加载模板并以标签内的参数渲染。这是一种可以引入别的模板的方法。
{% include "foo/bar.html" %}
block block标签可以被子模板覆盖
父模板定义 {% 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>
if
<ul>
{% if data == 1 %}
    <li>青青子衿<li>
{% elif data == 2 %}	
    <li>悠悠我心<li>
{% else%}
    <li>低糖海鲜饼<li>
{% endif %}
<ul>
复合表达式 对于这样的表达式,重要的是要知道在表达式求值时如何对运算符进行分组 - 即优先级规则。操作符的优先级从低至高如下:
  1. or
  2. and
  3. not
  4. in
  5. ==!=<><=>=
所以,例如,下面的复杂 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,所以系统将使用父模版中的值。 您可以根据需要使用多级继承。使用继承的一个常用方式是类似下面的三级结构:
  1. 创建一个 base.html 模版来控制您整个站点的主要视觉和体验。
  2. 为您的项目的每一个“分支”创建一个base_branch.html 模版。这些模版都继承自 base.html ,并且包含了每部分特有的样式和设计。
  3. 为每一种页面类型创建独立的模版,例如新闻内容或者博客文章。这些模版继承对应“分支”的模版。
  4. 这种方式使代码得到最大程度的复用,并且使得添加内容到共享的内容区域更加简单,例如分支范围内的导航。
这里是使用继承的一些提示:
  1. {% extends %} 标签,它必须是模版中的第一个标签。其他的任何情况下,模版继承都将无法工作。
  2. 在base模版中设置越多的 {% block %} 标签越好,子模版不必使用全部父模版中的blocks,你可以在大多数blocks中填充合理的默认内容,使base可以满足更多的使用场景。
  3. 在一个模板中不能定义多个相同名字的block 标签。
  4. 如果你发现你自己在大量的模版中复制内容,那你应该考虑把这些内容移动到父模版中的一个 {% block %} 中。
  5. 如果需要获取父模板中的block 的内容,可以使用{{ block.super }} 变量。如果你想要在父block 中新增内容而不是完全覆盖它,它将非常有用。
  6. 为了更好的可读性,你也可以给你的 {% endblock %} 标签一个 名字 。例如:
{% block content %}
    ...
{% endblock content %}
在大型模版中,这个方法帮你清楚的看到哪一个   {% block %}  标签被关闭了。




标签:语言,模版,Django,base,block,标签,模板,endblock
来源: https://blog.51cto.com/u_12768449/2771739