天天看點

django之七--html模闆中include标簽使用場景

一、前言

假設一個公司A有一個網站B,且網站B有5個不同的頁面分别為C1,C2,C3,C4,C5。

那麼,我們在打開這5個不同頁面後去檢視頁面的整體内容,會發現每個頁面的頂部内容、底部内容都一模一樣。是以我們可以嘗試把這些每個頁面都擁有的相同的内容單獨抽離出來放在另外的html頁面進行維護。

類似于python語言裡面的函數概念,比如函數D1和函數D2的内部都會使用一部分有相同代碼邏輯的代碼塊,我們把這一部分有相同代碼邏輯的代碼塊寫成函數D,然後函數D被函數D1和函數D2調用,這樣就能實作代碼的高效複用和維護。

django的html模闆也有類似的功能,用include标簽可以實作。

include标簽主要實作的作用:{% include %} 标簽允許在目前模闆中包含其它的模闆的内容。

二、一個html頁面包含的主要内容

1、第一步,我們在【helloworld/hello/templates/】裡建立一個【base.html】,具體内容如下。

django之七--html模闆中include标簽使用場景
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>這是base頁面的标題</title>

</head>

<body>



<section>

    <h1>頂部導航</h1>

    <p>頂部導航的文案可以是一些歡迎語或者提示語或者網站的相關宣傳語等等。比如現在的頂部導航文案可以是:"歡迎來到廈門-小雷的官網首頁</p>

    <hr>

</section>



<section>

    <h1>body正文</h1>

    <p>每個頁面的正文内容和div布局基本都是一樣的</p>

</section>



<section>

    <br><br><br><br>

    <hr>

    <h1>底部導航</h1>

    <p>底部一般會展示這些内容:友情連結,網站導航,版權,公司位址等等。</p>

</section>



</body>

</html>      

2、第二步,我們在【helloworld/hello/views.py】裡建立一個視圖函數【base】,具體内容如下。

django之七--html模闆中include标簽使用場景

3、第三步,我們在【helloworld/helloworld/urls.py】裡建立一個url比對規則,具體内容如下。

django之七--html模闆中include标簽使用場景

4、第四步,啟動django項目【helloworld】的服務,然後在任一浏覽器輸入該位址【http://127.0.0.1:8000/base/】,得到的頁面展示内容如下。

django之七--html模闆中include标簽使用場景

我們可以看到,【base.html】頁面有這三塊内容:頂部導航、body正文、底部導航。

一般情況下,頂部導航和底部導航是不變的,變的隻是body正文的内容,是以我們接下來可有把頂部導航和底部導航的對應的html代碼塊分别單獨抽離出來并分别用新的html頁面來存儲和維護。

5、第五步,我們在【helloworld/hello/templates/】裡建立一個【top.html】,具體内容如下。

django之七--html模闆中include标簽使用場景

6、第六步,我們在【helloworld/hello/templates/】裡建立一個【end.html】,具體内容如下。

django之七--html模闆中include标簽使用場景

三、include标簽的使用

1、第一步,我們在【helloworld/hello/templates/】裡建立一個【new_page.html】,具體内容如下。

django之七--html模闆中include标簽使用場景

2、第二步,我們在【helloworld/hello/views.py】裡建立一個視圖函數【newPage】,具體内容如下。

django之七--html模闆中include标簽使用場景

3、第三步,我們在【helloworld/helloworld/urls.py】裡建立一個url比對規則,具體内容如下。

django之七--html模闆中include标簽使用場景

4、第四步,啟動django項目【helloworld】的服務,然後在任一浏覽器輸入該位址【http://127.0.0.1:8000/new_page_6/】,得到的頁面展示内容内容如下。

django之七--html模闆中include标簽使用場景

四、公共頁面裡也允許傳模闆參數

【top.html】和【end.html】這兩個公共頁面裡都允許傳模闆參數。

我們可以拿【top.html】來進行相關調試。

 1、第一步,我們在【helloworld/hello/views.py】裡對已存在的視圖函數【newPage】進行改造,具體改造後的新内容如下。

django之七--html模闆中include标簽使用場景

2、第二步,我們在【helloworld/hello/templates/top.html】裡插入多個模闆變量,具體内容如下。