模板变量，过滤器和静态文件引用

Posted 2021-11-06 nickshen

 

一、模板变量

语法：{{  变量名  }} 由字母、数字以及下划线组成，不能以下划线开头，不能有空格和标点符号

例：在app （teacher文件夹）下的views.py文件中定义一个函数，用render里的参数context，context是以键值对形式

def index(request):

　　lt = [1,2,3]

　　dt = {‘name‘:‘shen‘ , ‘age‘:18}

　　return render(request, ‘teacher/index.html‘, context = {‘ lt ‘: lt, ‘ dt ‘:dt}

然后在index.html文件中调用

例：<p>我是列表lt：{{ lt }}</P>

　　<P>我是字典dt：{{ dt }}</p>

　　<p>如果显示字典中name的值：{{ dt.name }} </p>

　　<p>如果显示列表的一个元素：{{ lt.1 }} </p>

变量解析规则：

1、当模板引擎遇到了变量时，他会计算该变量，并将其替换为结果

2、当模板引擎在变量中遇到点（.）时，他会按照以下顺序值查找：A、字典键值查找；B、属性或方法查找；C、数字索引查找

例：dt = {‘items‘:[‘ball‘,‘game‘], ‘name‘: ‘shen‘, ‘age‘: 18}

　　{{ dt.items}}

结果为找到 [‘ball‘,‘game‘]

3、如果结果是一个可调用的（callabled）,则调用他，结果为模板变量的值

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

二、过滤器

语法：{{ 变量名 ｜ 过滤器名：参数 }}

1、作用：对变量进行过滤，在真正渲染出来之前，过滤器会根据功能处理好变量，然后得出结果后再替换掉原来的变量展示出来

语法：{{ fruits | lower}}

例：<p>列表lt的第一个元素：{{ lt | first }}</p>

2、管理符号进行链式调用，比如实现一个功能，先把所有字符变成小写，在把第一个字符转换成大写

语法：{{ fruits | lower | capfirst }}

例：<p> {{ dt.name | lower | capfirst }}

3、使用参数：过滤器可以使用参数，在过滤器名称后面使用冒号“：”再加上参数，比如要把一个字符串中所有的空格去掉，则可以使用cut过滤器

语法：{{ fruits | cut :" " }}

例：<p>列表lt下标为1的元素加2：{{ lt.1 | add: 2 }}

例：<p>列表lt 的切片：{{ lt | slice : " :2" }}

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

三、引入静态文件

# 在根目录下新建static文件夹，再在static文件夹下新建app文件夹，再在下面新建css，js，img文件夹，便于存放对应的文件，便于管理

# 路径设置：在settings.py文件中最下面加一条 STATICFILES_DIRS = [os.path.join(BASE_DIR，‘static‘]

# 要保证 django.contrib.staticfiles 这个app被包含在INSTALLED_APPS里已注册

# 静态文件引用

1、要写在html文件模板最头上{ % load static %}

2、然后在文件里写入{ % static ‘ 路径/文件名‘ %}

例：引入图片文件   <img src = "{ % static ‘teacher/img/spring.jpg‘ %}">

例：引用js文件  <script  src = "{% static ‘teacher/js/demo.js‘ %}"> </script>

例：引用css文件 <Link rel = "stylesheet" href ="{% static ‘teacher/css/index.css‘ %}">