atible" 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>
block块: {% block 块名 %}
{% endblock %}
注意:我们通常会在母板中定义页面专用的CSS块和JS块,方便子页面替换
2.2 继承
子页面继承母板:{% extends '母板html' %} {% extends 'layouts.html' %}
子页面通过重写block块,来替换母板中相应的内容 {% block page-main %}
<p>世情薄</p>
<p>人情恶</p>
<p>雨送黄昏花易落</p>
{% endblock %}
2.3 注意
- {% extends 'base.html' %}要写在第一行,前面不要有内容,否则内容会显示出来
- {% extends 'base.html' %}中的'base.html' 必须加上引号,不然会被当做变量去查找
- 子页面把要显示的内容写在block块中,否则不会显示出来
- 多个位置有独特内容,可以定义多个block块,特殊:定义css、js块等
三、组件
组件:一小段html代码段
可以将常用的页面内容如导航条,页尾信息等组件保存在单独的文件中,然后在需要使用的地方导入 {% include 'navbar.html' %}
四、静态文件相关
目的:更改setting中静态文件的别名时,不影响在更改之前的静态文件的引用,即引用会跟随别名的更改而自动更改,这样就不会报错了
方法一:使用static,原本路径:/static/images/hi.jpg {% load static %}
<img src="{% static "images/hi.jpg" %}" alt="Hi">
{% load static %}
{% static "images/hi.jpg" as myphoto %}
<img src="{{ myphoto }}">
方法二:使用get_static_prefix,原本路径:/static/images/hi.jpg {% load static %}
<img src="{% get_static_prefix %}images/hi.jpg" alt="Hi">
{# 补充:获取别名 #}
{% get_static_prefix %}
{% load static %}
{% get_static_prefix as STATIC_PREFIX %}
<img src="{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi">
五、自定义simple_tag
和自定义filter类似,区别:接收的参数更灵活,能接收万能参数
定义注册simple_tag @register.simple_tag
def join_str(*args, **kwargs):
return '{} - {} '.format('*'.join(args), '$'.join(kwargs.values()))
@register.simple_tag(name='join') # 相当于更改了函数名,使用时,使用新的函数名
使用自定义simple_tag {% load my_tags %}
{% join_str '1' '2' k1='3' k2='4' %}
六、inclusion_tag
在app下的templatetags(python包)中创建py文件,文件名自定义(my_inclusion.py);
在py文件中写: from django import template
register = template.Library() # register也不能变
写函数+装饰器 @register.inclusion_tag('result.html')
# result.html 是内容的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}
在result.html中写: <ul>
{% for choice in data %}
<li>{{ choice }}</li>
{% endfor %}
</ul>
在模板文件中使用 {% load my_inclusion %}
{% show_results 10 %}
|