模板導入、繼承、靜態文件
1、模板導入
要複用一個組件，能夠將該組件寫在一個文件中，在使用的時候導入便可css
在模板中使用html
一、語法
{% include '模板名字' %}
二、使用
- 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> </html>
2、模板的繼承
Django模版引擎中最強大也是最複雜的部分就是模版繼承了。模版繼承可讓您建立一個基本的「骨架」模版，它包含您站點中的所有元素，而且能夠定義可以被子模版覆蓋的 blocks 。python
一、使用模板的繼承
（1）寫一個母版
寫一個母版，留有一個或多個可擴展的區域。母版中主要是使用空的block完成頁面的骨架搭建bootstrap
{% 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）在子模板中使用
子模板主要是用內容填充母版中空的blockmarkdown
# 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 %}
二、強調（注意點）
- 子模板若是沒有重寫母版中的block，那麼就用父級的block的內容。如案例中的 sidebar block沒用重寫，那麼使用母版中sidebar block中的內容
- 一旦子模板重寫了模板中的盒子，即便母版中block有內容，也會覆蓋母版中的內容顯示子模板中的內容
- 在base模版中設置越多的
{% block %}標籤越好。請記住，子模版沒必要定義所有父模版中的blocks，因此，你能夠在大多數blocks中填充合理的默認內容，而後，只定義你須要的那一個。多一點鉤子總比少一點好。 - 爲了更好的可讀性，你也能夠給你的
{% endblock %}標籤一個 名字 。例如：
{% block content %}
...
{% endblock content %}
- 不能在一個模版中定義多個相同名字的
block標籤。
3、靜態文件
一、在配置文件settings中配置過靜態文件
STATIC_URL = '/static/' STATICFILES_DIRS=[ os.path.join(BASE_DIR,'static') ]
二、導入使用靜態文件
在靜態文件 static 中，能夠放置css文件、js文件、img文件、第三方庫文件等，要使用這些靜態文件，須要將它們導入到模板中。ide
<link rel="stylesheet" href="/static/utils/bootstrap-3.3.7-dist/css/bootstrap.css">
該方法已經寫死了路徑，一旦配置文件中的 STATIC_URL 發生改變，就沒法找到文件函數
三、動態獲取
（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">