theme: smartblue
本文简介
点赞 + 关注 + 收藏 = 学会了
上一篇文章介绍了 Django 视图的基础用法，当时提到了“响应HTML模版”，用到的方式是渲染一段 HTML 内容的字符串，这种方式很不方便。更方便的方法是在 .html 文件里写页面内容，然后渲染这个 .html 文件。这个 .html 文件也叫 HTML 模版，就是本文要讲解的内容。
什么是模板？
简单来说，在 Django 的模板就是一个“升级版”的 HTML 文件。
我们使用 Vue 、React 这些流行的前端框架时也会用到模板，它们的用法其实和 Django 里的模板用法也很像。
举个例子。
```html
```
在浏览器打开 http://127.0.0.1:8000/blog/
循环渲染 for
当需要渲染一个列表时，可以使用 for 循环将其输出到页面中。
基本语法：
html {% for item in list %} ... # 渲染每个元素的内容 {% endfor %}
举个例子，我要将我所有专栏的名称都渲染出来。
```python
blog/views.py
def blogIndex(request): list = [ '写给前端的Django教程', 'AIGC', '读书破万卷', 'Python', '产品汪', '乱up24', '新手村', '艺术系必修课：P5.js', 'SVG', 'canvas', 'Three.js', '零基础入门Fabric.js，提高Canvas开发效率', '数据可视化' ]
return render(request, 'blog.html', { "list": list }) ```
在模版中遍历出来。
```html
- {% for item in list %}
- {{ item }}
- {% endfor %}
```
循环使用一组值 cycle
关于循环，Django 模板还提供了一个叫 cycle 的功能。
在前端，热门的UI框架的表格组件一般都提供“斑马纹”的样式，比如奇数行使用白色背景，偶数行使用浅灰色背景。
Django 模板的 cycle 可以很方便的实现这个功能。
基本语法：
html {% cycle 'value1' 'value2' ... as cycle_name %}
举个简单的例子(为了方便，这里使用 ul 而不是 table)。
```python
blog/views.py
def blogIndex(request): list = [ '写给前端的Django教程', 'AIGC', '读书破万卷', 'Python', '产品汪', '乱up24', '新手村', '艺术系必修课：P5.js', 'SVG', 'canvas', 'Three.js', '零基础入门Fabric.js，提高Canvas开发效率', '数据可视化' ]
return render(request, 'blog.html', { "list": list }) ```
模版代码：
```html
- {% for item in list %}
- {{ item }}
- {% endfor %}
```
自动转义 autoescape
Django 默认会将 HTML 代码进行转义。自动转义功能可以确保在渲染模板时，将 HTML 标签和特殊字符(如 <, >, &, ', " 等)转义为相应的HTML实体(如 <, >, &, ', ")，从而避免用户提供的数据被误解释为 HTML 标签或 JavaScript 代码，导致安全漏洞，以防止跨站点脚本攻击(XSS)。
比如，我想在页面输出一个超链接，使用 <a> 标签来实现。
```python
blog/views.py
def blogIndex(request): django_column = '写给前端的Django教程'
return render(request, 'blog.html', { "djangocolumn": djangocolumn }) ```
在模板中渲染出来。
```html
```
出来的效果是这样的，明显不是我想要的。
如果此时想将 <a> 标签这段字符串转换成 HTML 元素来渲染，而不是输出字符串的话，可以使用 autoescape。
基本语法：
```python {% autoescape on %}
{{ user_input }}
{% endautoescape %}{% autoescape off %}
{{ user_input }}
{% endautoescape %} ```注意，在开始的 autoescape 后面会跟上 on 或者 off，默认值是 on ，也就是说你不写 {% autoescape on %} 这段，默认情况也会按 {% autoescape on %} 来渲染。
on：表示自动转义off：表示不自动转义
此时我想将 '<a href="https://juejin.cn/column/7355677638881706019">写给前端的Django教程</a>' 这段字符串渲染成 HTML 元素，就要将 autoescape 设置为 off。
```html
```
过滤器
过滤器可以让你在模板中对数据进行转换和修改， Django 的过滤器语法和 Vue 2 的过滤器语法一样。
基本语法：
html {{ 变量 | 过滤器名称 }}
常用的过滤器有以下这些(为了方便演示，下面的例子不再罗列视图的代码)。
转大/小写：upper / lower
使用 upper 可以将英文字母都转成大写，用 lower 可以转成小写。但这两个过滤器都无法处理中文。
视图传来的值：msg = 'Abc'
```html
```
字符串转slug格式：slugify
slug 过滤器可以将“Hello World”变成“hello-world”，但它无法处理中文。
视图传来的值：msg = 'Hello World'
```html
```
默认值：default
当视图传过来的值是空，那就使用默认值。
视图传来的值：gender = ''
```html
```
字符串长度：length
返回字符串的长度。
视图传来的值：msg = '雷猴'
```html
```
字符串删除指定字符：cut
将指定的字符串删除掉，比如这个例子中要删除所有 txt。
视图传来的值：msg = 'txt雷猴txt'
```html
```
超出长度用省略号表示：truncatechars
将超出指定数量的字符串用省略号表示。比如限制了输出10个字符，后面的都用省略号表示。
视图传来的值：msg = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
```html
```
列表转字符串：join
将列表转换为指定内容分隔的字符串。例如，我想让列表转换成使用 -/- 这3个字符串分割的字符串。
视图传来的值：list = ['雷猴', '鲨鱼辣椒', '蝎子莱莱', '蟑螂恶霸']
```html
```
返回列表中的第一个或最后一个元素： first、last
视图传来的值：list = ['雷猴', '鲨鱼辣椒', '蝎子莱莱', '蟑螂恶霸']
```html
```
格式化浮点数：floatformat
让浮点数保留多少位小数，可以用 floatformat 过滤器来过滤，它会四舍五入保留指定位小数。
视图传来的值：num = 12.009
```html
```
注释
注释分单行注释和多行注释。
单行注释：
html {# 这里是被注释的内容 #}
多行注释：
html {% comment %} 这里面的内容都会被注释掉 这里面的内容都会被注释掉 这里面的内容都会被注释掉 {% endcomment %}
多行注释需要使用 comment 来实现。
加载静态资源
这里指的静态资源文件包括图片、css文件、js文件等。
当我们想将公共的样式写在一个 css 文件里，或者有一些公共的 js 方法要单独放在一个 js 文件里，又或者要在页面加载一张存放在项目里的图片时，可以用以下方法配置。
首先在项目根目录中创建一个 static 文件夹，然后把静态资源放进去。
然后在项目配置文件 settings.py 里配置静态资源路径。
```python
demo1/settings.py
import os
STATICURL = 'static/' STATICFILESDIRS = [ os.path.join(BASE_DIR, 'static') ] ```
STATIC_URL是一个Django设置，用于指定在模板中引用静态文件时的基础URL。
STATICFILES_DIRS 用于指定额外的静态文件目录，所以要引入 os 模块。
然后在 html 中，需要在页面第一行写上 {% load static %}，作用是用于加载静态文件模板标签库。加载静态文件模板标签库后，模板就可以使用静态文件相关的模板标签，例如{% static %}标签。
比如我要在页面中引入 static/images/raccoon.jpg 这张图片。
```html
{% load static %} 
```
要引入 css 和 js 也同理，settings.py 文件的配置跟前面配置的一样。
```html {% load static %}
rel="stylesheet" href="%7B%%20static%20'/css/style.css'%20%%7D"> ```模板继承
对于相同的内容，我们就可以使用一个父模版，然后中间不同的地方用相应的内容进行替换。
举个例子，我在 blog 应用的 templates 里创建一个 base.html 文件，里面包含页头和页脚内容。
```html
{% block content %} {% endblock %}
```上面的代码中有 {% block content %} 和 {% endblock %} ，占位符的意思，而且这个占位符的名字叫 content 。
然后在 blog.html 里引入这个父模板，把内容插入到 content 位置里。
```html
{% extends 'base.html' %} {% block content %}
雷猴雷猴
{% endblock %} ```
这代码第一行 {% extends 'base.html' %} 表示引入 base.html 文件，这里需要写入 base.html 文件地址，因为我把 base.html 和 blog.html 放在同一个目录下，所以可以这样直接引入。
然后使用 {% extends 'base.html' %} 表示从这里开始使用 base.html 模板，在 {% block content %} 和 {% endblock %} 之间插入自定义内容即可。
模板包含
包含的意思可以理解为前端的组建，写好的组件可以在不同地方重复调用。
比如我创建一个 com.html 文件，这个文件就是可复用组件。
```html
```
然后在需要用到的地方使用它。
```html
点赞 + 关注 + 收藏 = 学会了
1262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
