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>
复合表达式
对于这样的表达式,重要的是要知道在表达式求值时如何对运算符进行分组 - 即优先级规则。操作符的优先级从低至高如下:
- or
- and
- not
- in
- ==, !=, <, >, <=, >=
{% 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 %}
标签被关闭了。
标签:语言,模版,Django,base,block,标签,模板,endblock 来源: https://blog.51cto.com/u_12768449/2771739