Django 模板层 静态文件

模版语法重点：

　　变量：{{ 变量名 }}

　　　　1 深度查询 用句点符

　　　　2 过滤器

　　标签：｛｛%  % ｝｝

模板语法之变量

　　在 Django 模板中遍历复杂数据结构的关键是句点字符, 语法：｛｛变量名｝｝

index.html

{#模板语言注释:前端看不到#}
{#相当于print了该变量#}
<h1>模板语言之变量</h1>
<p>字符串:{{ name }}</p>
<p>数字:{{ age }}</p>
<p>列表:{{ ll }}</p>
<p>元祖:{{ tu }}</p>
<p>字典:{{ dic }}</p>
{#只写函数名:相当于函数名(),执行该函数#}
<p>函数:{{ test }}</p>
{#对象内存地址#}
<p>对象:{{ lqz }}</p>
<p>列表套对象:{{ person_list }}</p>
<p>字典套对象:{{ person_dic }}</p>
{#深度取值#}
<p>列表第0个值:{{ ll.0 }}</p>
<p>列表第3个值:{{ ll.3 }}</p>
<p>字典取值:{{ dic.name }}</p>
<p>字典取列表值:{{ dic.ll }}</p>
{#再继续取值,继续点#}
<p>对象取数据属性:{{ lll.name }}</p>
<p>对象取绑定给对象的函数属性:{{ lll.get_name }}</p>
<p>对象取绑定给类的函数属性:{{ lll.cls_test }}</p>
<p>对象取静态方法:{{ lll.static_test }}</p>
<p>把对象列表中egon年龄取出来:{{ person_list.1.age }}</p>
{#拓展:不能调有参数的方法#}
<p>字符串的方法:{{ name.upper }}</p>

views.py

def index(request):
    name = 'lll'
    age = 18
    ll = [1, 2, 'lll', 'egon']
    ll2=[]
    dic2={}
    tu = (1, 2, 3)
    dic = {'name': 'lll', 'age': 18, 'll': [1, 2, 4]}
    # 函数
    def test():
        print('lll')
        return 'zhouxiang dsb'

    # 在模板上相当于执行该函数,并打印
    print(test())

    # 类和对象
    class Person():
        def __init__(self, name, age):
            self.name = name
            self.age = age
        def get_name(self):
            return self.name
        @classmethod
        def cls_test(cls):
            return 'cls'
        @staticmethod
        def static_test():
            return 'static'
        # 模板里不支持带参数
        def get_name_cs(self,ttt):
            return self.name
    lll=Person('lll',18)
    fff=Person('fff',18)
    person_list=[lll,fff]
    person_dic={'lll':lll}

    file_size=1024
    import datetime
    ctim=datetime.datetime.now()

    h1='<h1>hello</h1>'
    script='<script>alert(111)</script>'

    user=''

    # return render(request,'index.html',{'name':name})
    # locals() 会把*该*视图函数内的变量,传到模板
    return render(request, 'index.html', locals())

模板语法之过滤器

{{obj|filter__name:param}}  变量名字|过滤器名称：变量
里面变量可以参照上面的views.py

<h1>模板语言之过滤器</h1>
{#后面就是个python中的函数,|前面的,是函数的第一个参数,冒号后面的是第二个参数#}
<p>统计字符串长度:{{ name|length }}</p>
<p>统计列表长度:{{ ll|length }}</p>
<p>过滤器之默认值:{{ ll2|default:'没有值' }}</p>
{# filesizeformat当前值或者传入文件的大小  #}
<p>过滤器之filesizeformat--1:{{ 1024|filesizeformat }}</p>
<p>过滤器之filesizeformat--2:{{ file_size|filesizeformat }}</p>
{# date 按Nov. 9, 2018这种格式输出 ctim传入的是datetime.datetime.now() #}
<p>过滤器之不使用date:{{ ctim }}</p>
<p>过滤器之date:{{ ctim|date:'Y-m-d' }}</p>
{#前闭后开区间 #}
<p>过滤器之slice:{{ ll|slice:'2:-1' }}</p>
{#支持步长#}
<p>过滤器之slice-字符串:{{ name|slice:'0:3:3' }}</p>
{#三个起步#}
{# 取5-3个 剩下用三个点代替 #}
<p>过滤器之truncatechars:{{ 'dafdadaf'|truncatechars:5 }}</p>
{# 取三个如果有没取尽的用三个 #}
<p>过滤器之truncatewords:{{ '我 dfaf ga dfgaas 你 dgf adaf'|truncatewords:5 }}</p>
{# 有safe会解析传过来的 html语句 没有不解析 #}
<p>过滤器之不用safe:{{ h1 }}</p>
<p>过滤器之用safe:{{ h1|safe }}</p>

<p>过滤器之不用safe:{{ script }}</p>
{#<p>过滤器之用safe:{{ script|safe }}</p>#}
{# add会让两个值相加，数字和字符串不会相加会报错 字符串是拼接 数字是相加 #}
<p>过滤器之用add:{{ 12|add:'1' }}</p>
<p>过滤器之用add:{{ 'egon'|add:'dsb' }}</p>

 模板语言之标签

<h1>模板语言之标签</h1>
{% for foo in ll %}
    {{ forloop }}
<p>{{ forloop.first }}--->{{ forloop.counter0 }}--->{{ forloop.revcounter }}----->{{ foo }}</p>
{% endfor %}

{% for foo in ll %}
    {% for i in person_list %}
  取出外层是第几次循环
        {{ forloop.parentloop.counter }}
        <p>{{ forloop.first }}--->{{ forloop.counter0 }}--->{{ forloop.revcounter }}----->{{ foo }}</p>
    {% endfor %}
{% endfor %}
**************循环的对象是空,才会走到empty,而不是对象里面的东西为空
{% for foo in dic2 %}
    <p>{{ foo }}</p>
    {% empty %}
    傻逼了
{% endfor %}
只循环字典的话,取到的是key值
{% for foo in dic %}
取到value的值
{% for foo in dic.values %}
取到key 和 value的值
{% for k,foo in dic.items %}
    <p>{{ k }}----->{{ foo }}</p>
    {% empty %}
    傻逼了
{% endfor %}

{% if user %}
    <a href="">退出</a>
    {% else %}
    <a href="">登录</a>
    <a href="">注册</a>
{% endif %}

{#for循环判断如果是第一次,打印第一次,其他打印正常值#}
{% for foo in ll %}
    {% if forloop.first %}
        <p>第一次的我 </p>
    {% elif forloop.last %}
        <p>最后的我 </p>
    {% else %}
        <p>{{ foo }}</p>
    {% endif %}
{% endfor %}

<hr>
with 相当于取别名,作用:变量太长,可以简化
{% with name as ttt %}
    {{ ttt }}
    {{ name }}
    {{ user }}

{% endwith %}
------
{% with dic.ll.2 as ttt %}
    {{ ttt }}

    {{ ttt }}

{% endwith %}

-for ,if,with 都要有结束

自定义标签过滤器

<h1>自定义标签过滤器</h1>
{% load mytag %}
{#传多个参数的话:可以:'aaa:bb:cc',也可以:传列表#}
<p>{{ 'lqz'|yyy:'nb' }}</p>
<h4>使用自定义的标签</h4>

<p>{% add_nb 'egon' %}</p>

<p>{% add_3 'egon' 'is' 'dsb' %}</p>


<hr>
过滤器,可以用在if判断中
{% if 'lqz'|yyy:'nb' %}
<p>肯定是True</p>
{% endif %}
标签不能用在if判断(报错)

模板导入与继承

导入

模版导入-->写了一个好看的组件,可以复用,
		1 写一个模板
		2 在模板中:{% include '模板的名字'%}

 例如下面的两个页面代码 导入 使用{% include ‘left.html’%} 就会将left.html内的html代码导入到index内 在left内的标签使用class定义样式只要index内有定义那么会被渲染上去。页面解析的时候就相当于left。html的代码存在于index 内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'utils/bootstrap-3.3.7-dist/css/bootstrap.css' %}">
    <style type="text/css">
        .head{
            height: 100px;
            background:aquamarine;
        }
        .right-top{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="container-fluid content">
        <div class="row">
            <div class="col-md-3">
                {% include 'left.html' %}
            </div>
            <div class="col-md-9">
                <div class="right-top" style="background: pink;height: 50px">
                    {% block content_top %}

                    {% endblock %}
                </div>
                <div class="right-middle" style="background: #d43f3a;height: 50px" >
                    {% block content_middle %}

                    {% endblock %}
                </div>
                {% block content_main %}
                    我是母版内容
                {% endblock %}
            </div>
        </div>
    </div>

</body>
</html>

 <ul>
     <a href="{% url 'temp1' %}"><li>a</li></a>
     <a href="{% url 'temp2' %}"><li>b</li></a>
     <li>c</li>
     <li>d</li>
     <li>e</li>
 </ul>

继承

模板的继承
		1 写一个母版,留一个可扩展的区域(盒子),可以留多个盒子(留的越多,可扩展性越高)
			{%block 名字%}
				可以写内容
			{%endblock%}
		2 在子模板中使用:
			{%block 名字%}
				子模板的内容
			{%endblock 名字%}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'utils/bootstrap-3.3.7-dist/css/bootstrap.css' %}">
    <style type="text/css">
        .head{
            height: 100px;
            background:aquamarine;
        }
        .right-top{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="container-fluid content">
        <div class="row">
            <div class="col-md-3">
                {% include 'left.html' %}
            </div>
            <div class="col-md-9">
                <div class="right-top" style="background: pink;height: 50px">
                    {% block content_top %}

                    {% endblock %}
                </div>
                <div class="right-middle" style="background: #d43f3a;height: 50px" >
                    {% block content_middle %}

                    {% endblock %}
                </div>
                {% block content_main %}
                    我是母版内容
                {% endblock %}
            </div>
        </div>
    </div>

</body>
</html>

{% extends 'index.html' %}
{% block content_top %}
    <p>toptoptop</p>
    <p>toptoptop</p>
{% endblock %}

{% block content_middle %}
<p>middle</p>
<p>middle</p>
{% endblock %}

{% block content_main %}
<p>main</p>
<p>main</p>
<p>main</p>
{% endblock %}

{% extends 'index.html' %}
{% block content_top %}
<p>temp2</p>
<p>temp2</p>
{% endblock %}

{% block content_middle %}
<p>temp2</p>
<p>temp2</p>
{% endblock %}

{% block content_main %}
<p>temp2</p>
<p>temp2</p>
<p>temp2</p>
{% endblock %}

extends 标签是这里的关键。它告诉模版引擎，这个模版“继承”了另一个模版。当模版系统处理这个模版时，首先，它将定位父模版——在此例中，就是“index.html”。

那时，模版引擎将注意到 index.html 中的两个 block 标签，并用子模版中的内容来替换这些block。

静态文件

有时候项目进行更改的时候会更改static 相应的settings配置也会变更但是每个页面也要变更就会增大工作量，所以就需要静态文件配置

第一种方式

    {% load static %}
    <link rel="stylesheet" href="{% static 'css/mycss.css' %}">

第二种方式
    
     {% load static %}
     <link rel="stylesheet" href="{% get_static_prefix %}css/mycss.css">