django學習-7.html模板中include標簽使用場景


1.前言

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

那么,我們在打開這5個不同頁面后去查看頁面的整體內容,會發現每個頁面的頂部內容、底部內容都一模一樣。所以我們可以嘗試把這些每個頁面都擁有的相同的內容單獨抽離出來放在另外的html頁面進行維護。
類似於python語言里面的函數概念,比如函數D1和函數D2的內部都會使用一部分有相同代碼邏輯的代碼塊,我們把這一部分有相同代碼邏輯的代碼塊寫成函數D,然后函數D被函數D1和函數D2調用,這樣就能實現代碼的高效復用和維護。

django的html模板也有類似的功能,用include標簽可以實現。

include標簽主要實現的作用:{% include %} 標簽允許在當前模板中包含其它的模板的內容。

2.一個html頁面包含的主要內容

2.1.第一步,我們在【helloworld/hello/templates/】里新建一個【base.html】,具體內容如下。

<!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.2.第二步,我們在【helloworld/hello/views.py】里新建一個視圖函數【base】,具體內容如下。

 

  2.3.第三步,我們在【helloworld/helloworld/urls.py】里新建一個url匹配規則,具體內容如下。

   2.4.第四步,啟動django項目【helloworld】的服務,然后在任一瀏覽器輸入該地址【http://127.0.0.1:8000/base/】,得到的頁面展示內容如下。

 

 

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

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

2.5.第五步,我們在【helloworld/hello/templates/】里新建一個【top.html】,具體內容如下。

 

 

 2.6.第六步,我們在【helloworld/hello/templates/】里新建一個【end.html】,具體內容如下。

 

 

 

3.include標簽的使用

 3.1.第一步,我們在【helloworld/hello/templates/】里新建一個【new_page.html】,具體內容如下。

 

 

 

 3.2.第二步,我們在【helloworld/hello/views.py】里新建一個視圖函數【newPage】,具體內容如下。

 

 

   3.3.第三步,我們在【helloworld/helloworld/urls.py】里新建一個url匹配規則,具體內容如下。

 

 

 

  3.4.第四步,啟動django項目【helloworld】的服務,然后在任一瀏覽器輸入該地址【http://127.0.0.1:8000/new_page_666/】,得到的頁面展示內容內容如下。

 

 

 

4.公共頁面里也允許傳模板參數

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

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

  4.1.第一步,我們在【helloworld/hello/views.py】里對已存在的視圖函數【newPage】進行改造,具體改造后的新內容如下。

  4.2.第二步,我們在【helloworld/hello/templates/top.html】里插入多個模板變量,具體內容如下。

 

  4.3.第三步,啟動django項目【helloworld】的服務,然后在任一瀏覽器輸入該地址【http://127.0.0.1:8000/new_page_666/】,得到的頁面最新展示內容如下。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM