一、模板导入
要复用一个组件,可以将该组件写在一个文件中,在使用的时候导入即可
在模板中使用
1、语法
{% include '模板名字' %}
2、使用
- ad.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>
- base.html页面,将ad模板导入使用
<!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"> </head> <body> <div class="header"></div> <div class="container"> <div class="row"> <div class="col-md-3"> <!-- 利用include导入模板 --> {% include 'adv.html' %} </div> <div class="col-md-9"></div> </div> </div> </body>
二、模板的继承
Django模版引擎中最强大也是最复杂的部分就是模版继承了。模版继承可以让您创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的 blocks 。
1、使用模板的继承
(1)写一个母版
写一个母版,留有一个或多个可扩展的区域。母版中主要是使用空的block完成页面的骨架搭建
{% block 名字 %}
可以内容
{% endblock %}
<!-- 母版 base.html --> <!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 %} <img href='11111111111.jpg'> {% endblock %} </div> <div id="content"> {% block content %}{% endblock %} </div> </body> </html>
(2)在子模板中使用
子模板主要是用内容填充母版中空的block
# extends 告诉模板引擎,这个模板继承了另一个模板 {% extends "base.html" %} {% block 名字 %} 子模板的内容 {% endblock 名字 %}
<!-- 子模板 --> {% 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 %}
2、强调(注意点)
- 子模板如果没有重写母版中的block,那么就用父级的block的内容。如案例中的 sidebar block没用重写,那么使用母版中sidebar block中的内容
- 一旦子模板重写了模板中的盒子,即使母版中block有内容,也会覆盖母版中的内容显示子模板中的内容
- 在base模版中设置越多的
{% block %}
标签越好。请记住,子模版不必定义全部父模版中的blocks,所以,你可以在大多数blocks中填充合理的默认内容,然后,只定义你需要的那一个。多一点钩子总比少一点好。 - 为了更好的可读性,你也可以给你的
{% endblock %}
标签一个 名字 。例如:
{% block content %}
...
{% endblock content %}
- 不能在一个模版中定义多个相同名字的
block
标签。
三、静态文件
1、在配置文件settings中配置过静态文件
STATIC_URL = '/static/' STATICFILES_DIRS=[ os.path.join(BASE_DIR,'static') ]
2、导入使用静态文件
在静态文件 static 中,可以放置css文件、js文件、img文件、第三方库文件等,要使用这些静态文件,需要将它们导入到模板中。
<link rel="stylesheet" href="/static/utils/bootstrap-3.3.7-dist/css/bootstrap.css">
该方法已经写死了路径,一旦配置文件中的 STATIC_URL 发生改变,就无法找到文件
3、动态获取
(1)方法一:使用 static 标签函数
{% load static %} #static返回值,会拼上传参的路径 {% static "参数用来传参" %}
# 案例,利用static函数,在函数中拼接好路径,return到模板中 <link rel="stylesheet" href="{% static 'css/mycss.css' %}">
(2)方法二:使用 get_static_prefix 标签
{%load static%} # get_static_prefix返回值是:静态文件的地址,相当于/static/ # 注意在css前面不要加‘ / ’ {% get_static_prefix %}css/mycss.css
<link rel="stylesheet" href="{% get_static_prefix %}css/mycss.css">