Django之前端模板引擎

1. 写法：

{{ }} 表示变量，在模板渲染的时候替换成值
{% %} 表示逻辑相关的操作，如for循环，if判断等

2. 变量的基本用法

def variable(request):

    s1 = '这是一串字符串' # 针对字符串的显示
    d1 = {'name':'alex','age':99}	# 针对字典的显示
    l1 = ['alex','egon','eric'] # 针对列表的显示
    class Preson:
        def __init__(self, name, age):
            self.name = name
            self.age = age

        def fight(self):
            return '%s is fighting.' %self.name

    ZhangSan = Preson('张三',19)
    LiSi = Preson('李四',19)
    WangWu = Preson('王五',19)

    preson_list = [ZhangSan,LiSi,WangWu] # 针对类的显示


    return render(
            request,
            'variable.html',
             {
                  's1':s1,
                  'd1':d1,
                  'l1':l1,
                  'preson_list':preson_list,

              },
                      )                                        

 

 

2.1 在模板中的用法

<p>{{ s1 }}</p> 直接调用变量名，显示变量名对应的信息
<p>{{ d1 }}</p>

<p>{{ d1.name }}</p> 对应的字典内部取值，直接点的方式
<p>{{ d1.age }}</p>

<p>{{ l1.0 }}</p> 对应的列表中取值，点后面接索引
<p>{{ l1.1 }}</p>
<p>{{ l1.2 }}</p>

<p>{{ preson_list.0.name }}</p> 在类中，由于先把每个示例化的对象放到了列表中，所以先按索引取值，再找属性或方法，如果属性和方法名一样，则属性值优先显示

<p>{{ preson_list.0.age }}</p>
<p>{{ preson_list.0.fight }}</p>
<p>{{ preson_list.1.fight }}</p>
<p>{{ preson_list.2.fight }}</p>

 

2.2 变量的filter用法

default
    {{ value|default:'两个字符串' }} 如果value有值的话，则显示value的数据，如果value没值的话，则显示default后面的值


filesizeformat
    {{ value|filesizeformat }} 格式化文件的大小，转换的单位有bytes，KB，MB，GB，PB

add
    {{ num|add:'10' }} 如果num是一个数字的话，则会和add后面的值相加
    {{ value|add:'family' }} 如果是字符串的话，则会把字符串进行拼接

lower
    {{ value|lower }} 将所有的大写字母变小写

upper
    {{ value|upper }} 将所有小写字母变大写

title
    {{ value|title }}    首字母变大写

slice
    {{ l1|slice:'1:3' }}    切片，和字符串中的切片一样

first
    {{ l1|first }} 取第一个元素

last
    {{ l1|last }}    取最后一个元素

date
    import datetime
    date = datetime.datetime.now() 获取当前时间

    {{ date|date:'Y-m-d H:i:s' }} 模板中的写法，Y表示year，m表示month，d表示day，H表示hour，i表示分钟，s表示秒

safe
    s4 = '<a href="http://www.baidu.com">单击</a>' 如果不用safe的话，这段字符串会直接显示在浏览器中
    {{ s4|safe }} 如果使用safe的话，则浏览器会认为会这段字符串是安全的，比解析出来

 

3. 逻辑语句
3.1 for循环

{% for item in item_list %}
    <a>{{item}}</a>
{% endfor %


{% for item in item_list %}
    <a>{{item}}</a>
{% empty %}
    为空
{% endfor %}

 

3.2 其他常用语句：
　　forloop.counter 当前循环的索引值（从1开始）
　　forloop.first 判断当前循环是不是第一次循环
　　forloop.las 判断当前循环是不是最后一个循环

3.3 if判断

{% if item %}
    pass
{% elif %}
    pass
{% else %}
    pass
{% endif %}

 

4. 子母版
4.1 一个网站的相同部分提取出来，放到一个公共的html文件中，这个文件称之为 - 母版，然后在母版中对应的每个页面不同的地方定义block块，例如：

{% block 名字 %}

{% endblock %}

4.2 然后在子版中引用母版中的block快，例如：
1、导入母版

{% extends 'base.html' %} base.html指的是母版的名字，这一行一定要放在最上面

 

2、引用block块

{% block 名字 %}
    页面中不同的部分放到这个里面
{% endblock %}

　

也许每个页面都会有自己不同的css样式和js，所以可以在母版中多定义一个css的block和js的block，这样的话，每个子版中的css或js就可以单独写在这个里面了

5. 组件

如果单独拿出网页中的一块内容作为公共部分，那么就可以用组件这个功能了，如果希望每个页面中都有导航栏的话，那么可以单独把导航栏的html代码提取出来，
放到一个单独的html文件中，在需要引用这个导航栏的页面中使用include导入即可，例如：
{% include 'nav.html' %} 只需要写这么一行，当然位置一定要放对

 

6. 静态文件的引用
每个页面的开头大部分都会有static文件的引用，例如：

<link href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

 

这样的静态文件引用不是很灵活，如果修改的话比较麻烦，那么就可以使其动态化。例如：

{% load static %} 加载动态文件的引用方式，要放在文件的开头

 

然后link标签就可以写成下面的样子(两种写法)：
1、第一种写法

<link href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %} rel="stylesheet">

 

2、第二种写法

<link href="{% get_static_prefix %}bootstrap-3.3.7-dist/css/bootstrap.min.css rel="stylesheet"> 
{% get_static_prefix %} 获取settings中静态文件的别名

如果修改settings中的静态文件的别名的话，也不需要担心还要挨个修改每个文件