Django的模板与母版

摘要:
Django的模板与母版PythonDjango模板母版Django模板系统与Django模板有关的官方文档语法相关变量相关{{变量名}}{{name}},{{name|length}},{{name|default:"默认值"}}变量名由字母数字和下划线组成。为了在Django中关闭HTML的自动转义有两种方式,如果是一个单独的变量我们可以通过过滤器“|safe”的方式告诉Django这段代码是安全的不必转义。
Django的模板与母版
PythonDjango模板母版

Django模板系统

与Django模板有关的官方文档

语法相关

变量相关

  1. {{ 变量名 }}
  2. {{ name }},{{name|length}},{{name|default:"默认值"}}

变量名由字母数字和下划线组成。

点(.)在模板语言中有特殊的含义,用来获取对象的相应属性值。
view中的代码:

deftemplate_test(request):

l = [11, 22, 33]

d = {"name": "alex"}

classPerson(object):

def__init__(self, name, age):

self.name = name

self.age = age

defdream(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 }}

逻辑相关

if判断

{% if a > b %}

{% endif %}

{% if a > b %}

{% else %}

{% endif %}

{% if a > b %}

{% elif %}

{% else %}

{% endif %}


  1. for循环

for循环的基本用法:

{% for i in name_list %}


{{ i }}

{% endfor %}

{% for i in name_list %}

{{ i }}

{% empty %}

空空如也

{% endfor %}


for循环可用的属性:

forloop.counter


forloop.counter0

forloop.revcounter

forloop.revcounter0

forloop.first

forloop.last

forloop.parentloop -->两层for循环,内层循环引用外层循环


Filters-常用的内置filter

语法: {{ value|filter_name:参数 }}
'|'左右没有空格没有空格没有空格

  1. length

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

  2. filesizeformat --> 格式化文件大小的

    将值格式化为一个 “人类可读的” 文件尺寸 (例如 '13 KB', '4.1 MB', '102 bytes', 等等)。例如:
    {{ value|filesizeformat }}
    如果 value 是 123456789,输出将会是 117.7 MB。

  3. date:'Y-m-d H:i:s' --> 格式化时间的
    {{ value|date:"Y-m-d H:i:s"}}

  4. slice 切片
    {{value|slice:"2:-1"}}

  5. safe

    XSS攻击(跨站脚本攻击)
    Django的模板中会对HTML标签和JS等语法标签进行自动转义,原因显而易见,这样是为了安全。但是有的时候我们可能不希望这些HTML元素被转义,比如我们做一个内容管理系统,后台添加的文章中是经过修饰的,这些修饰可能是通过一个类似于FCKeditor编辑加注了HTML修饰符的文本,如果自动转义的话显示的就是保护HTML标签的源文件。为了在Django中关闭HTML的自动转义有两种方式,如果是一个单独的变量我们可以通过过滤器“|safe”的方式告诉Django这段代码是安全的不必转义。
    比如:
    value = "点我"
    {{ value|safe}}

  6. truncatechars:20

    截取字符,超过的用...表示
    如果字符串字符多于指定的字符数量,那么会被截断。截断的字符串将以可翻译的省略号序列(“...”)结尾。
    参数:截断的字符数
    {{ value|truncatechars:9}}

  7. default

    如果没有传值,可显示的默认值
    {{ value|default: "nothing"}}
    如果value值没传的话就显示nothing

自定义的filter

  1. 定义阶段
    1. 在app下面新建一个python的包:templatetags
    2. 在上面的Python包中新建一个Python文件,名字随意

在上述python文件中:

from django import template


# 生成一个注册用的实例

register = template.Library()

# 定义并注册一个自定义的filter函数

@register.filter(name='addsb')

def add_sb(arg):

return "{} sb".format(arg)


  1. 调用阶段:
    1. 在Django的模板文件中,导入刚才新建的python文件
      {% load py文件名 %}
    2. 按照filter的语法调用
      {{ name|addsb }}

母版和继承

母版

  1. 为什么要有模板和继承:
    把多个页面公用的部分提取出来,放在一个 母版 里面。
    其他的页面只需要 继承 母版就可以了。
  2. 具体使用的步骤:
    1. 把公用的HTML部分提取出来,放到base.html文件中
    2. 在base.html中,通过定义block,把每个页面不同的部分区分出来
    3. 在具体的页面中,先继承母版
    4. 然后block名去指定替换母版中相应的位置

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="x-ua-compatible"content="IE=edge">

<metaname="viewport"content="width=device-width, initial-scale=1">

<title>Title</title>

{% block page-css %}

{% endblock %}

</head>

<body>

<h1>这是母板的标题</h1>

{% block page-main %}

{% endblock %}

<h1>母板底部内容</h1>

{% block page-js %}

{% endblock %}

</body>

</html>


注意:我们通常会在母板中定义页面专用的CSS块和JS块,方便子页面替换。

继承母版

  1. {% extends 'base.html' %} --> 母版文件:base.html要加引号
  2. {% extends 'base.html' %}必须放在子页面的第一行!!!
  3. 可以在base.html中定义很多block,通常我们会额外定义page-css和page-js两个块
  4. view.py相应的函数中返回的是对应的子页面文件 不是不是不是 base.html

组件

可以将常用的页面内容如导航条,页尾信息等组件保存在单独的文件中,然后在需要使用的地方按如下语法导入即可。

{% include 'navbar.html' %}


静态文件的灵活写法

{% load static %}

<img src="http://t.zoukankan.com/{% static "images/hi.jpg" %}" alt="Hi!" />


引用JS文件时使用:

{% load static %}

<script src="http://t.zoukankan.com/{% static "mytest.js" %}"></script>


某个文件多处被用到可以存为一个变量:

{% load static %}

{% static "images/hi.jpg" as myphoto %}

<img src="http://t.zoukankan.com/{{ myphoto }}"></img>


使用get_static_prefix

{% load static %}

<img src="http://t.zoukankan.com/{% get_static_prefix %}images/hi.jpg" alt="Hi!" />


或者

{% load static %}

{% get_static_prefix as STATIC_PREFIX %}

<img src="http://t.zoukankan.com/{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi!" />

<img src="http://t.zoukankan.com/{{ STATIC_PREFIX }}images/hi2.jpg" alt="Hello!" />


自定义simpletag

和自定义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')

defshow_results(n):

n = 1if n < 1else 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>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="x-ua-compatible"content="IE=edge">

<metaname="viewport"content="width=device-width, initial-scale=1">

<title>inclusion_tag test</title>

</head>

<body>

{% load inclusion_tag_test %}

{% show_results 10 %}

</body>

</html>

Django的模板与母版第1张

免责声明:文章转载自《Django的模板与母版》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇GUI的最终选择 Tkinter(九):事件jdbc 公共类(2)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Django三种风格模型继承

Django三种风格的模型继承 只要继承了model.Model, 就会生成一个新的表,但是,如果在Meta方法中添加abstract=True,就不会产生新的表,而是作为一个基类存放多个表共同拥有的方法和字段等 抽象类继承:父类继承自models.Model,但不会在底层数据库中生成相应的数据表,父类的属性列存储在其子类的数据表中。 多表继承:父类和子...

Django【第2篇】:Django之反向解析

Django框架之第二篇 一、知识点回顾 1、MTV模型   model:模型,和数据库相关的   template:模板,存放html文件,模板语法(目的是将变量如何巧妙的嵌入到HTML页面中)。   views:视图函数 另加urls:url路径与视图函数的映射关系,,可以不是一一对应的。 2、相关的一些命令   创建一个Django项目:dja...

[转]innerHtml,innerText,outterHtml,outterText 的区别

js中innerHTML与innerText的用法与区别 用法: Java代码 <divid="test"> <spanstyle="color:red">test1</span>test2 </div> <div id="test"> <span style...

分分钟教会你使用HTML写Web页面

在学习怎样使用HTML编写网页之前,我们必须先搞清楚什么是HTML?当然了不是系统的给大家介绍HTML的前世今生,假设对其身世感兴趣的小伙伴能够去问度娘,她会给你想要的答案。 所谓HTML,就是我们常听到的“超文本标记语言”,是标准通用标记语言下的一个应用,眼下最新的版本号是5.0,上面的图片就是官方公布的Logo。“超文本”就是指页面的内容不仅有文字...

利用ajax获取后端数据存放入前端(.html文件)页面&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt;中

1. 针对的问题: 由于便捷高效,大部分前端采用jsp,但仍存在前端页面为index.html文件,所以,对于前后端数据的传送及显示有一定的问题。 2. 解决办法: 声明:本人前端页面名称index.html,后端产生数据的是servlet层,文件名称为 Pre_sensorServlet.java 需要给以下页面标红的格子里传入由后端获取到的数据(因为项...

移动端页面开发适配 rem布局原理

主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适口不同,所以为了让我们的页面在每个设备上都可以良好的展示,那么就需要为这些设备做统一的处理,这个过程就称为移动端适配。 需要知道的一些概念: 物理像素(phy...