母版和繼承的使用以及組件的使用

母版的繼承和使用  

  如果我們在開發一個網站的過程中,可能發現網站中除了部分內容不一樣外,絕大部分內容都是一致的。如果每個頁面我們都去一個一個寫的話,那樣的工作量就太大了。所以我們要學會使用母版和繼承。

  首先,寫一個母版,命名base.html,他代表網站中公共的部分。關鍵部分在13-15行。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>母版</title>
 6 </head>
 7 <body>
 8 <p>
 9     <h1>這是最上方</h1>
10     <hr>
11 </p>
12 <P>
13     {% block page-main %}
14         {# 母版中被替換的地方 #}
15     {% endblock %}
16     <hr>
17 </P>
18 <P>
19     <h1>這是最下方</h1>
20 </P>
21 </body>
22 </html>

  接着,新建一個替換內容base_list.html。關鍵部分在第2行,以及5-7行。

1 {# 繼承母版 #}
2 {% extends 'base.html' %}
3 
4 {# 把自己頁面的內容塞到母版相應的位置 #}
5 {% block page-main %}
6     <h1>替換掉內容</h1>
7 {% endblock %}

  效果展示圖:

《母版和繼承的使用以及組件的使用》

  母版和繼承不僅僅可以對html頁面內容進行替換,還可以對js和css進行替換。

組件的使用

  一般來說,每個網站都有一個公共的導航欄,這些導航欄都是母版裏面的,但是有的頁面沒有繼承母版,卻也需要導航欄怎麼辦呢?這就需要使用組件了。也就是說我們把導航欄單獨寫成一個html頁面,然後使用include包含它就OK了。

  創建一個html頁面,命名daohangtiao.html:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>導航條</title>
 6 </head>
 7 <body>
 8 <h1 style="color: red">我是導航條</h1>
 9 <hr>
10 </body>
11 </html>

  然後在需要添加導航條的頁面,找一個相應的位置添加代碼:

{% include 'daohangtiao.html' %}

  效果圖:

《母版和繼承的使用以及組件的使用》

 

点赞

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *