前端模板层

时间  2019-12-19
标签 前端 模板 繁體版
原文   原文链接

目录css

Django模板系统

官方文档html

你可能已经注意到咱们在例子视图中返回文本的方式有点特别。 也就是说，HTML被直接硬编码在 Python代码之中。前端

def current_datetime(request):
    now = datetime.datetime.now()
    html = "<html><body>It is now %s.</body></html>" % now
    return HttpResponse(html)

尽管这种技术便于解释视图是如何工做的，但直接将HTML硬编码到你的视图里却并非一个好主意。 让咱们来看一下为何：python

  • 对页面设计进行的任何改变都必须对 Python 代码进行相应的修改。 站点设计的修改每每比底层 Python 代码的修改要频繁得多，所以若是能够在不进行 Python 代码修改的状况下变动设计，那将会方便得多。git

  • Python 代码编写和 HTML 设计是两项不一样的工做，大多数专业的网站开发环境都将他们分配给不一样的人员（甚至不一样部门）来完成。 设计者和HTML/CSS的编码人员不该该被要求去编辑Python的代码来完成他们的工做。程序员

  • 程序员编写 Python代码和设计人员制做模板两项工做同时进行的效率是最高的，远胜于让一我的等待另外一我的完成对某个既包含 Python又包含 HTML 的文件的编辑工做。数据库

基于这些缘由，将页面的设计和Python的代码分离开会更干净简洁更容易维护。 咱们可使用 Django的 模板系统 (Template System)来实现这种模式，这就是本章要具体讨论的问题django

python的模板：HTML代码＋模板语法bootstrap

def current_time(req):
    # ================================原始的视图函数
    # import datetime
    # now=datetime.datetime.now()
    # html="<html><body>如今时刻：<h1>%s.</h1></body></html>" %now


    # ================================django模板修改的视图函数
    # from django.template import Template,Context
    # now=datetime.datetime.now()
    # t=Template('<html><body>如今时刻是:<h1>{{current_date}}</h1></body></html>')
    # #t=get_template('current_datetime.html')
    # c=Context({'current_date':str(now)})
    # html=t.render(c)
    #
    # return HttpResponse(html)


    #另外一种写法(推荐)
    import datetime
    now=datetime.datetime.now()
    return render(req, 'current_datetime.html', {'current_date':str(now)[:19]})

模版语法重点：后端

　　变量：{{ 变量名 }}

　　　　1 深度查询 用句点符

　　　　2 过滤器

　　标签：｛｛% % ｝｝

经常使用语法

只须要记两种特殊符号：

{{ }}和 {% %}

变量相关的用{{}}，逻辑相关的用{%%}。

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

变量

在Django的模板语言中按此语法使用：{{ 变量名 }}。

当模版引擎遇到一个变量，它将计算这个变量，而后用结果替换掉它自己。 变量的命名包括任何字母数字以及下划线 ("_")的组合。 变量名称中不能有空格或标点符号。

点（.）在模板语言中有特殊的含义。当模版系统遇到点(".")，它将以这样的顺序查询：

字典查询（Dictionary lookup）
属性或方法查询（Attribute or method lookup）
数字索引查询（Numeric index lookup）

注意事项：

  1. 若是计算结果的值是可调用的，它将被无参数的调用。 调用的结果将成为模版的值。
  2. 若是使用的变量不存在， 模版系统将插入 string_if_invalid 选项的值， 它被默认设置为'' (空字符串) 。

几个例子：

view中代码：

def template_test(request):
    l = [11, 22, 33]
    d = {"name": "alex"}

    class Person(object):
        def __init__(self, name, age):
            self.name = name
            self.age = age

        def dream(self):
            return "{} is dream...".format(self.name)

    Alex = Person(name="Alex", age=34)
    Egon = Person(name="Egon", age=9000)
    Eva_J = Person(name="Eva_J", age=18)

    person_list = [Alex, Egon, Eva_J]
    return render(request, "template_test.html", {"l": l, "d": d, "person_list": person_list})

模板中支持的写法：

{# 取l中的第一个参数 #}
{{ l.0 }}
{# 取字典中key的值 #}
{{ d.name }}
{# 取对象的name属性 #}
{{ person_list.0.name }}
{# .操做只能调用不带参数的方法 #}
{{ person_list.0.dream }}

(模板传值)模板可以接收的数据类型

  1. 传函数名的时候 会自动加括号调用函数 将函数的返回值展现在html页面上
  2. django模板语法不支持函数传参
  3. django模板语法在获取容器类型内部元素的值的时候 统一只采用 句点符(.) ，（list,dict,set,tuple）
  4. 支持python基本的数据类型
from datetime import datetime
def loginn(request):
    n = 123
    f = 12.12
    s = "我是最帅的"
    l = [1, 2, 3, 4, 5, 6]
    d = {'username': "ocean", 'password': 123, 'hobby': ['sing', 'dance']}
    t = (1, 2, 3,)
    se = {1, 2, 4, 5}
    b = True
    ctime = datetime.now()

    def func():
        print('嘿嘿嘿')
        return '哈哈哈'

    class Myclass(object):
        @classmethod
        def get_cls(cls):
            return 'cls'

        @staticmethod
        def get_func():
            return 'func'

        def get_self(self):
            return 'self'

    obj = Myclass()
    return render(request, 'loginn.html', locals())
#loginn.html
<p>{{ n }}</p>
<p>{{ f }}</p>
<p>{{ s }}</p>
<p>{{ l }}</p>
<p>{{ d }}</p>
<p>{{ se }}</p>
<p>{{ t }}</p>
<p>{{ b }}</p>
<p>{{ ctime }}</p>
若是传递给前端一个函数名 会直接加括号调用 将函数的返回值展现到前端
  若是函数有参数 很差意思 django的模板语法 不支持给函数传参
<p>{{ func }}</p>
方法不能传参
<p>{{ obj }}</p>
<p>{{ obj.get_cls }}</p>
<p>{{ obj.get_func }}</p>
<p>{{ obj.get_self }}</p>
模板能够取值
#列表取值
<p>{{ l.1 }}</p>
<p>{{ l.3 }}</p>
#字典取值
<p>{{ d.username }}</p>
<p>{{ d.password }}</p>
<p>{{ d.hobby.1 }}</p>

Filters（过滤器）

  1. 过滤器 有点相似于小的方法
  2. 特色 会将|左边的当作过滤器的第一个参数 |右边的当前过滤器第二个参数

在Django的模板语言中，经过使用 过滤器 来改变变量的显示。

过滤器的语法： {{ value|filter_name:参数 }}

使用管道符"|"来应用过滤器。

例如：{{ name|lower }}会将name变量应用lower过滤器以后再显示它的值。lower在这里的做用是将文本全都变成小写。

注意事项：

  1. 过滤器支持“链式”操做。即一个过滤器的输出做为另外一个过滤器的输入。
  2. 过滤器能够接受参数，例如：{{ sss|truncatewords:30 }}，这将显示sss的前30个词。
  3. 过滤器参数包含空格的话，必须用引号包裹起来。好比使用逗号和空格去链接一个列表中的元素，如：{{ list|join:', ' }}
  4. '|'左右没有空格没有空格没有空格

Django的模板语言中提供了大约六十个内置过滤器。

from datetime import datetime
from django.utils.safestring import mark_safe  # 告诉django这个字符串是安全的能够被渲染


def loginn(request):
    n = 123
    f = 12.12
    s = "我是最帅的"
    s1 = 'ha'
    l = [1, 2, 3, 4, 5, 6]
    d = {'username': "ocean", 'password': 123, 'hobby': ['sing', 'dance']}
    t = (1, 2, 3,)
    se = {1, 2, 4, 5}
    b = True
    ctime = datetime.now()
    file_size = 341257896  # 文件大小而且，能够求值
    w = '奥术 大师件 大事肯德 基按 实际对 拉 螺栓空当接 龙'
    w1 = 'asdash ashd jkh sadas asdjjs had sjklad j a kjkjdsklas dkjsakldj dlsjakld '
    w2 = "dfsafdfadfadfadfadfdfcvcvfggrad"
    btime = datetime.now()
    sss = "<h1>一脸懵逼</h1>"
    sss1 = "<script>alter('惊喜嘛')</script>"

    res = mark_safe(sss1)  # 告诉django和html这个是安全的能够解析
    xo = '123456123'
    xo1 = ''
    x02 = 222

    yyy = {'user_list': [1, '22', {'username': ['ocean', 'sing']}]}
    return render(request, 'loginn.html', locals())

default

若是一个变量是false或者为空，使用给定的默认值。 不然，使用变量的值。有值就拿值 没值就用后面默认的

{{ value|default:"nothing"}}

若是value没有传值或者值为空的话就显示nothing

length

返回值的长度，做用于字符串和列表。

{{ value|length }}

返回value的长度，如 value=['a', 'b', 'c', 'd']的话，就显示4.

filesizeformat

将值格式化为一个 “人类可读的” 文件尺寸 （例如 '13 KB', '4.1 MB', '102 bytes', 等等）。例如：

{{ value|filesizeformat }}

若是 value 是 123456789，输出将会是 117.7 MB。

slice

切片

{{value|slice:"2:-1"}}

date

格式化

{{ value|date:"Y-m-d H:i:s"}}

可用的参数：

格式化字符 描述 示例输出
a 'a.m.'或'p.m.'（请注意，这与PHP的输出略有不一样，由于这包括符合Associated Press风格的期间） 'a.m.'
A 'AM'或'PM'。 'AM'
b 月，文字，3个字母，小写。 'jan'
B 未实现。
c ISO 8601格式。 （注意：与其余格式化程序不一样，例如“Z”，“O”或“r”，若是值为naive datetime，则“c”格式化程序不会添加时区偏移量（请参阅datetime.tzinfo） 。 2008-01-02T10:30:00.000123+02:00或2008-01-02T10:30:00.000123若是datetime是天真的
d 月的日子，带前导零的2位数字。 '01'到'31'
D 一周中的文字，3个字母。 “星期五”
e 时区名称 多是任何格式，或者可能返回一个空字符串，具体取决于datetime。 ''、'GMT'、'-500'、'US/Eastern'等
E 月份，特定地区的替表明示一般用于长日期表示。 'listopada'（对于波兰语区域，而不是'Listopad'）
f 时间，在12小时的小时和分钟内，若是它们为零，则分钟停留。 专有扩展。 '1'，'1:30'
F 月，文，长。 '一月'
g 小时，12小时格式，无前导零。 '1'到'12'
G 小时，24小时格式，无前导零。 '0'到'23'
h 小时，12小时格式。 '01'到'12'
H 小时，24小时格式。 '00'到'23'
i 分钟。 '00'到'59'
I 夏令时间，不管是否生效。 '1'或'0'
j 没有前导零的月份的日子。 '1'到'31'
l 星期几，文字长。 '星期五'
L 布尔值是不是一个闰年。 True或False
m 月，2位数字带前导零。 '01'到'12'
M 月，文字，3个字母。 “扬”
n 月无前导零。 '1'到'12'
N 美联社风格的月份缩写。 专有扩展。 'Jan.'，'Feb.'，'March'，'May'
o ISO-8601周编号，对应于使用闰年的ISO-8601周数（W）。对于更常见的年份格式，请参见Y。 '1999年'
O 与格林威治时间的差别在几小时内。 '+0200'
P 时间为12小时，分钟和'a.m。'/'p.m。'，若是为零，分钟停留，特殊状况下的字符串“午夜”和“中午”。 专有扩展。 '1 am'，'1:30 pm' / t3>，'midnight'，'noon'，'12：30pm' / T10>
r RFC 5322格式化日期。 'Thu, 21 Dec 2000 16:01:07 +0200'
s 秒，带前导零的2位数字。 '00'到'59'
S 一个月的英文序数后缀，2个字符。 'st'，'nd'，'rd'或'th'
t 给定月份的天数。 28 to 31
T 本机的时区。 'EST'，'MDT'
u 微秒。 000000 to 999999
U 自Unix Epoch以来的二分之一（1970年1月1日00:00:00 UTC）。
w 星期几，数字无前导零。 '0'（星期日）至'6'（星期六）
W ISO-8601周数，周数从星期一开始。 1，53
y 年份，2位数字。 '99'
Y 年，4位数。 '1999年'
z 一年中的日子 0到365
Z 时区偏移量，单位为秒。 UTC以西时区的偏移量老是为负数，对于UTC以东时，它们老是为正。 -43200到43200

safe(设置安全)

Django的模板中会对HTML标签和JS等语法标签进行自动转义，缘由显而易见，这样是为了安全。可是有的时候咱们可能不但愿这些HTML元素被转义，好比咱们作一个内容管理系统，后台添加的文章中是通过修饰的，这些修饰多是经过一个相似于FCKeditor编辑加注了HTML修饰符的文本，若是自动转义的话显示的就是保护HTML标签的源文件。为了在Django中关闭HTML的自动转义有两种方式，若是是一个单独的变量咱们能够经过过滤器“|safe”的方式告诉Django这段代码是安全的没必要转义。

好比：

value = "点我"

{{ value|safe}}

truncatechars

若是字符串字符多于指定的字符数量，那么会被截断。截断的字符串将以可翻译的省略号序列（“...”）结尾。

参数：截断的字符数

{{ value|truncatechars:9}}

truncatewords

在必定数量的字后截断字符串。

{{ value|truncatewords:9}}

cut

移除value中全部的与给出的变量相同的字符串

{{ value|cut:' ' }}

若是value为'i love you'，那么将输出'iloveyou'.

join

使用字符串链接列表，例如Python的str.join(list)

timesince

将日期格式设为自该日期起的时间（例如，“4天，6小时”）。

采用一个可选参数，它是一个包含用做比较点的日期的变量（不带参数，比较点为如今）。 例如，若是blog_date是表示2006年6月1日午夜的日期实例，而且comment_date是2006年6月1日08:00的日期实例，则如下将返回“8小时”：

{{ blog_date|timesince:comment_date }}

分钟是所使用的最小单位，对于相对于比较点的将来的任何日期，将返回“0分钟”。

timeuntil

似于timesince，除了它测量从如今开始直到给定日期或日期时间的时间。 例如，若是今天是2006年6月1日，而conference_date是保留2006年6月29日的日期实例，则{{ conference_date | timeuntil }}将返回“4周”。

使用可选参数，它是一个包含用做比较点的日期（而不是如今）的变量。 若是from_date包含2006年6月22日，则如下内容将返回“1周”：

{{ conference_date|timeuntil:from_date }}

其它过滤器（了解）

过滤器 描述 示例
upper 以大写方式输出 {{ user.name | upper }}
add 给value加上一个数值 {{ user.age | add:”5” }}
addslashes 单引号加上转义号
capfirst 第一个字母大写 {{ ‘good’| capfirst }} 返回”Good”
center 输出指定长度的字符串，把变量居中 {{ “abcd”| center:”50” }}
cut 删除指定字符串 {{ “You are not a Englishman” | cut:”not” }}
date 格式化日期
default 若是值不存在，则使用默认值代替 {{ value | default:”(N/A)” }}
default_if_none 若是值为None, 则使用默认值代替
dictsort 按某字段排序，变量必须是一个dictionary {% for moment in moments | dictsort:”id” %}
dictsortreversed 按某字段倒序排序，变量必须是dictionary
divisibleby 判断是否能够被数字整除 {{ 224 | divisibleby:2 }} 返回 True
escape 按HTML转义，好比将”<”转换为”&lt”
filesizeformat 增长数字的可读性，转换结果为13KB,89MB,3Bytes等 {{ 1024 | filesizeformat }} 返回 1.0KB
first 返回列表的第1个元素，变量必须是一个列表
floatformat 转换为指定精度的小数，默认保留1位小数 {{ 3.1415926 | floatformat:3 }} 返回 3.142 四舍五入
get_digit 从个位数开始截取指定位置的数字 {{ 123456 | get_digit:’1’}}
join 用指定分隔符链接列表 {{ [‘abc’,’45’] | join:’’ }} 返回 abc45
length 返回列表中元素的个数或字符串长度
length_is 检查列表，字符串长度是否符合指定的值 {{ ‘hello’| length_is:’3’ }}
linebreaks 用

或
标签包裹变量

 {{ “Hi\n\nDavid”|linebreaks }} 返回

Hi

David
linebreaksbr 用
标签代替换行符
linenumbers 为变量中的每一行加上行号
ljust 输出指定长度的字符串，变量左对齐 {{‘ab’|ljust:5}}返回 ‘ab ’
lower 字符串变小写
make_list 将字符串转换为列表
pluralize 根据数字肯定是否输出英文复数符号
random 返回列表的随机一项
removetags 删除字符串中指定的HTML标记 {{value | removetags: “h1 h2”}}
rjust 输出指定长度的字符串，变量右对齐
slice 切片操做， 返回列表 {{[3,9,1] | slice:’:2’}} 返回 [3,9] {{ 'asdikfjhihgie' | slice:':5' }} 返回 ‘asdik’
slugify 在字符串中留下减号和下划线，其它符号删除，空格用减号替换 {{ '5-2=3and5 2=3' | slugify }} 返回 5-23and5-23
stringformat 字符串格式化，语法同python
time 返回日期的时间部分
timesince 以“到如今为止过了多长时间”显示时间变量 结果可能为 45days, 3 hours
timeuntil 以“从如今开始到时间变量”还有多长时间显示时间变量
title 每一个单词首字母大写
truncatewords 将字符串转换为省略表达方式 {{ 'This is a pen' | truncatewords:2 }}返回``This is ...
truncatewords_html 同上，但保留其中的HTML标签 {{ '<p>This is a pen</p>' | truncatewords:2 }}返回``<p>This is ...</p>
urlencode 将字符串中的特殊字符转换为url兼容表达方式 {{ ‘http://www.aaa.com/foo?a=b&b=c’ | urlencode}}
urlize 将变量字符串中的url由纯文本变为连接
wordcount 返回变量字符串中的单词数
yesno 将布尔变量转换为字符串yes, no 或maybe {{ True | yesno }}{{ False | yesno }}{{ None | yesno }} ``返回 ``yes``no ``maybe

Tags标签

标签看起来像是这样的： {% tag %}。标签比变量更加复杂：一些在输出中建立文本，一些经过循环或逻辑来控制流程，一些加载其后的变量将使用到的额外信息到模版中。一些标签须要开始和结束标签 （例如{% tag %} ...标签 内容 ... {% endtag %}）。

for循环

普通for循环

<ul>
{% for user in user_list %}
    <li>{{ user.name }}</li>
{% endfor %}
</ul>

for循环可用的一些参数：

Variable Description
forloop.counter 当前循环的索引值（从1开始）
forloop.counter0 当前循环的索引值（从0开始）
forloop.revcounter 当前循环的倒序索引值（从1开始）
forloop.revcounter0 当前循环的倒序索引值（从0开始）
forloop.first 当前循环是否是第一次循环（布尔值）
forloop.last 当前循环是否是最后一次循环（布尔值）
forloop.parentloop 本层循环的外层循环

for ... empty

<ul>
{% for user in user_list %}
    <li>{{ user.name }}</li>
{% empty %}
    <li>空空如也</li>
{% endfor %}
</ul>

if判断

{% if %}会对一个变量求值，若是它的值是“True”（存在、不为空、且不是boolean类型的false值），对应的内容块会输出。

if语句支持 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判断。

if,elif和else

{% if user_list %}
  用户人数：{{ user_list|length }}
{% elif black_list %}
  黑名单数：{{ black_list|length }}
{% else %}
  没有用户
{% endif %}

固然也能够只有if和else

{% if user_list|length > 5 %}
  七座豪华SUV
{% else %}
    黄包车
{% endif %}

if语句支持 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判断。

with

定义一个中间变量，多用于给一个复杂的变量起别名。

注意等号左右不要加空格。

使用一个简单地名字缓存一个复杂的变量，当你须要使用一个“昂贵的”方法（好比访问数据库）不少次的时候是很是有用的

{% with total=business.employees.count %}
    {{ total }} employee{{ total|pluralize }}
{% endwith %}

或

{% with business.employees.count as total %}
    {{ total }} employee{{ total|pluralize }}
{% endwith %}

csrf_token

这个标签用于跨站请求伪造保护。

在页面的form表单里面写上{% csrf_token %}

自定义标签my_tags和过滤器filter

自定义过滤器须要注意：

​ 自定义过滤器只是带有一个或两个参数的Python函数:

  • 变量（输入）的值 - -不必定是一个字符串
  • 参数的值 - 这能够有一个默认值，或彻底省略

例如，在过滤器{{var | foo:'bar'}}中，过滤器foo将传递变量var和参数“bar”。

自定义过滤器、标签
步骤：
1 在应用名下面新建一个templatetags文件夹(必须叫这个名字)
2 在改文件夹下 新建一个任意名称的py文件
3 在该py文件内 固定先写两行代码

from django.template import Library
register = Library()

一、在settings中的INSTALLED_APPS配置当前app，否则django没法找到自定义的simple_tag.

二、在app中建立templatetags模块(模块名只能是templatetags)

三、建立任意 .py 文件，如：my_tags.py

from django.template import Library


register = Library()


@register.filter(name='myplus')#自定义过滤器
def index(a,b):
    return a + b


@register.simple_tag(name='mysm')#自定义标签
def login(a,b,c,d):
    return '%s/%s/%s/%s'%(a,b,c,d)

四、在使用自定义simple_tag和filter的html文件中导入以前建立的 my_tags.py

{% load my_tags %}　

五、使用simple_tag和filter（如何调用）

{% load my_tag %}
{#{{ 123|myplus:123 }}#}
{#只要思想不滑坡 方法总比困难多#}
{#{{ 123|myplus:'[1,2,3,4,5,6,7,8,]' }}#}

{#{% load my_tag %}#}
{% mysm 1 2 3 4 %}


{% if 0|myplus:123 %}#可使用
    <p>有值</p>
{% endif %}


{% if mysm 1 2 3 4 %}#不能使用
    <p>有值</p>
{% endif %}

注意：filter能够用在if等语句后，simple_tag不能够

注释模板语法的注释

{# ... #}

注意事项

\1. Django的模板语言不支持连续判断，即不支持如下写法：

{% if a > b > c %}
...
{% endif %}

\2. Django的模板语言中属性的优先级大于方法

def xx(request):
    d = {"a": 1, "b": 2, "c": 3, "items": "100"}
    return render(request, "xx.html", {"data": d})

如上，咱们在使用render方法渲染一个页面的时候，传的字典d有一个key是items而且还有默认的 d.items() 方法，此时在模板语言中:

{{ data.items }}

默认会取d的items key的值。

模版导入入和继承

模版导入：

　　语法：{% include '模版名称' %}

　　如：{% include 'adv.html' %}

<div class="adv">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    {#    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">#}
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            height: 50px;
            width: 100%;
            background-color: #369;
        }
    </style>
</head>
<body>
<div class="header"></div>

<div class="container">
    <div class="row">
        <div class="col-md-3">
            {% include 'adv.html' %}


        </div>
        <div class="col-md-9">
            {% block conn %}
                <h1>你好</h1>
            {% endblock %}

        </div>
    </div>

</div>

</body>
</html>
{% extends 'base.html' %}

{% block conn %}
    {{ block.super }}
是啊

{% endblock conn%}

模版继承

继承母板

在子页面中在页面最上方使用下面的语法来继承母板。

{% extends 'layouts.html' %}

块（block）

经过在母板中使用{% block xxx %}来定义"块"。

在子页面中经过定义母板中的block名来对应替换母板中相应的内容。

{% block page-main %}
  <p>世情薄</p>
  <p>人情恶</p>
  <p>雨送黄昏花易落</p>
{% endblock %}

组件

能够将经常使用的页面内容如导航条，页尾信息等组件保存在单独的文件中，而后在须要使用的地方按以下语法导入便可。

{% include 'navbar.html' %}

继承详细的讲解

Django模版引擎中最强大也是最复杂的部分就是模版继承了。模版继承可让您建立一个基本的“骨架”模版，它包含您站点中的所有元素，而且能够定义可以被子模版覆盖的 blocks 。

经过从下面这个例子开始，能够容易的理解模版继承：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css"/>
    <title>{% block title %}My amazing site{% endblock %}</title>
</head>

<body>
<div id="sidebar">
    {% block sidebar %}
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
        </ul>
    {% endblock %}
</div>

<div id="content">
    {% block content %}{% endblock %}
</div>
</body>
</html>

这个模版，咱们把它叫做 base.html， 它定义了一个能够用于两列排版页面的简单HTML骨架。“子模版”的工做是用它们的内容填充空的blocks。

在这个例子中， block 标签订义了三个能够被子模版内容填充的block。 block 告诉模版引擎： 子模版可能会覆盖掉模版中的这些位置。

子模版可能看起来是这样的：

{% extends "base.html" %}
 
{% block title %}My amazing blog{% endblock %}
 
{% block content %}
{% for entry in blog_entries %}
    <h2>{{ entry.title }}</h2>
    <p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}

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

那时，模版引擎将注意到 base.html 中的三个 block 标签，并用子模版中的内容来替换这些block。根据 blog_entries 的值，输出可能看起来是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <title>My amazing blog</title>
</head>
 
<body>
    <div id="sidebar">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
        </ul>
    </div>
 
    <div id="content">
        <h2>Entry one</h2>
        <p>This is my first entry.</p>
 
        <h2>Entry two</h2>
        <p>This is my second entry.</p>
    </div>
</body>
</html>

请注意，子模版并无定义 sidebar block，因此系统使用了父模版中的值。父模版的 {% block %} 标签中的内容老是被用做备选内容（fallback）。

这种方式使代码获得最大程度的复用，而且使得添加内容到共享的内容区域更加简单，例如，部分范围内的导航。

这里是使用继承的一些提示：

  • 若是你在模版中使用 {% extends %} 标签，它必须是模版中的第一个标签。其余的任何状况下，模版继承都将没法工做。

  • 在base模版中设置越多的 {% block %} 标签越好。请记住，子模版没必要定义所有父模版中的blocks，因此，你能够在大多数blocks中填充合理的默认内容，而后，只定义你须要的那一个。多一点钩子总比少一点好。

  • 若是你发现你本身在大量的模版中复制内容，那可能意味着你应该把内容移动到父模版中的一个 {% block %} 中。

  • If you need to get the content of the block from the parent template, the {{ block.super }} variable will do the trick. This is useful if you want to add to the contents of a parent block instead of completely overriding it. Data inserted using {{ block.super }} will not be automatically escaped (see the next section), since it was already escaped, if necessary, in the parent template.

  • 为了更好的可读性，你也能够给你的 {% endblock %} 标签一个 名字 。例如：

    {% block content %}
...
{% endblock content %}　　

    在大型模版中，这个方法帮你清楚的看到哪个　 {% block %} 标签被关闭了。

  • 不能在一个模版中定义多个相同名字的 block 标签。

静态文件的配置

  1. 用户可以在浏览器中输入网址访问到相应的资源
  2. 前提是后端暴露了该资源的接口
  3. 在django中若是你想让用户访问到对应的资源，咱们只须要在urls.py中设置对应的关系。
  4. 反过来若是我没有urls.py中开设资源，用户就永远访问不到对应的资源
  5. 返回给浏览器的html页面上的全部的静态资源，也须要请求后端加载获取。
  6. 一般咱们将网址所用到的html文件所有放在templates文件夹下，网站用到的静态资源所有存放到static文件夹下。
2.静态文件配置

    
    静态文件
        网站所用到的
            本身写好js
            本身写好css
            第三方的框架 bootstrap fontwesome sweetalert,elementui,layui
        
    一般状况下 网站所用到的静态文件资源 统一都放在static文件夹下
    STATIC_URL = '/static/'  # 是访问静态资源的接口前缀
    """只要你想访问静态资源 你就必须以static开头"""
    # 手动配置静态文件访问资源
    STATICFILES_DIRS = [
        os.path.join(BASE_DIR,'static'),
        os.path.join(BASE_DIR,'static1'),
        # os.path.join(BASE_DIR,'static2'),
    ]
    
    html中   接口前缀 动态解析，这样能够修改STATIC_URL，在html中依旧能够检测到css,js
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>

静态文件相关

{% static %}

{% load static %}
<img src="{% static "images/hi.jpg" %}" alt="Hi!" />

引用JS文件时使用：

{% load static %}
<script src="{% static "mytest.js" %}"></script>

某个文件多处被用到能够存为一个变量

{% load static %}
{% static "images/hi.jpg" as myphoto %}
<img src="{{ myphoto }}"></img>

{% get_static_prefix %}

{% load static %}
<img src="{% get_static_prefix %}images/hi.jpg" alt="Hi!" />

或者

{% load static %}
{% get_static_prefix as STATIC_PREFIX %}

<img src="{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi!" />
<img src="{{ STATIC_PREFIX }}images/hi2.jpg" alt="Hello!" />

simple_tag

和自定义filter相似，只不过接收更灵活的参数。

定义注册simple tag

@register.simple_tag(name="plus")
def plus(a, b, c):
    return "{} + {} + {}".format(a, b, c)

使用自定义simple tag

{% load app01_demo %}

{# simple tag #}
{% plus "1" "2" "abc" %}

inclusion_tag

多用于返回html代码片断

示例：

templatetags/my_inclusion.py

from django import template

register = template.Library()


@register.inclusion_tag('result.html')
def show_results(n):
    n = 1 if n < 1 else int(n)
    data = ["第{}项".format(i) for i in range(1, n+1)]
    return {"data": data}

templates/snippets/result.html

<ul>
  {% for choice in data %}
    <li>{{ choice }}</li>
  {% endfor %}
</ul>

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>inclusion_tag test</title>
</head>
<body>

{% load inclusion_tag_test %}

{% show_results 10 %}
</body>
</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程