母板
- 母版的写法
<!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>Title</title> {% block page-css %} {% endblock %} </head> <body> <h1>这是母板的标题</h1> {% block page-main %} {% endblock %} <h1>母板底部内容</h1> {% block page-js %} {% endblock %} </body> </html>
注意:我们通常会在母板中定义页面专用的CSS块和JS块,方便子页面替换。
- 继承母版
# 在子页面中在页面最上方使用下面的语法来继承母板。 {% extends ‘layouts.html‘ %}
- block(块)的替换
# 通过在母板中使用{% block xxx %}来定义"块"。 # 在子页面中通过定义母板中的block名来对应替换母板中相应的内容。 {% block page-main %} <p>世情薄</p> <p>人情恶</p> <p>雨送黄昏花易落</p> {% endblock %}
组件
#可以将常用的页面内容如导航条,页尾信息等组件保存在单独的文件中,然后在需要使用的地方按如下语法导入即可。 {% include ‘navbar.html‘ %}
静态文件相关
-
{% 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 %}
# {% get_static_prefix %} 的作用跟{%static%}差不多。 # {% get_static_prefix %} 会在页面上打印static的访问路径 {% load static %} <img src="{% get_static_prefix %}images/hi.jpg" alt="Hi!" /> # 上面这段代码等于 <img src="/static/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>
原文地址:https://www.cnblogs.com/wtil/p/11488620.html
时间: 2024-10-07 19:02:05