快捷導(dǎo)航

詳解Python的Django框架中的模版繼承

更新時間：2015年07月16日 15:21:33 投稿：goldensun

這篇文章主要介紹了詳解Python的Django框架中的模版繼承,就像Python中面對對象的方法繼承道理類似,需要的朋友可以參考下

在實際應(yīng)用中，你將用 Django 模板系統(tǒng)來創(chuàng)建整個 HTML 頁面。這就帶來一個常見的 Web 開發(fā)問題：在整個網(wǎng)站中，如何減少共用頁面區(qū)域（比如站點導(dǎo)航）所引起的重復(fù)和冗余代碼？

解決該問題的傳統(tǒng)做法是使用服務(wù)器端的 includes ，你可以在 HTML 頁面中使用該指令將一個網(wǎng)頁嵌入到另一個中。事實上， Django 通過剛才講述的 {% include %} 支持了這種方法。但是用 Django 解決此類問題的首選方法是使用更加優(yōu)雅的策略—— 模板繼承。

本質(zhì)上來說，模板繼承就是先構(gòu)造一個基礎(chǔ)框架模板，而后在其子模板中對它所包含站點公用部分和定義塊進(jìn)行重載。

讓我們通過修改 current_datetime.html 文件，為 current_datetime 創(chuàng)建一個更加完整的模板來體會一下這種做法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
  <title>The current time</title>
</head>
<body>
  <h1>My helpful timestamp site</h1>
  <p>It is now {{ current_date }}.</p>

  <hr>
  <p>Thanks for visiting my site.</p>
</body>
</html>

這看起來很棒，但如果我們要為第三章的 hours_ahead 視圖創(chuàng)建另一個模板會發(fā)生什么事情呢？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
  <title>Future time</title>
</head>
<body>
  <h1>My helpful timestamp site</h1>
  <p>In {{ hour_offset }} hour(s), it will be {{ next_time }}.</p>

  <hr>
  <p>Thanks for visiting my site.</p>
</body>
</html>

很明顯，我們剛才重復(fù)了大量的 HTML 代碼。想象一下，如果有一個更典型的網(wǎng)站，它有導(dǎo)航條、樣式表，可能還有一些 JavaScript 代碼，事情必將以向每個模板填充各種冗余的 HTML 而告終。

解決這個問題的服務(wù)器端 include 方案是找出兩個模板中的共同部分，將其保存為不同的模板片段，然后在每個模板中進(jìn)行 include。也許你會把模板頭部的一些代碼保存為 header.html 文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>

你可能會把底部保存到文件 footer.html :

  <hr>
  <p>Thanks for visiting my site.</p>
</body>
</html>

對基于 include 的策略，頭部和底部的包含很簡單。麻煩的是中間部分。在此范例中，每個頁面都有一個 <h1>My helpful timestamp site</h1> 標(biāo)題，但是這個標(biāo)題不能放在 header.html 中，因為每個頁面的 <title> 是不同的。如果我們將 <h1> 包含在頭部，我們就不得不包含 <title> ，但這樣又不允許在每個頁面對它進(jìn)行定制。何去何從呢？

Django 的模板繼承系統(tǒng)解決了這些問題。你可以將其視為服務(wù)器端 include 的逆向思維版本。你可以對那些不同的代碼段進(jìn)行定義，而不是共同代碼段。

第一步是定義基礎(chǔ)模板，該框架之后將由子模板所繼承。以下是我們目前所講述范例的基礎(chǔ)模板：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
  <title>{% block title %}{% endblock %}</title>
</head>
<body>
  <h1>My helpful timestamp site</h1>
  {% block content %}{% endblock %}
  {% block footer %}
  <hr>
  <p>Thanks for visiting my site.</p>
  {% endblock %}
</body>
</html>

這個叫做 base.html 的模板定義了一個簡單的 HTML 框架文檔，我們將在本站點的所有頁面中使用。子模板的作用就是重載、添加或保留那些塊的內(nèi)容。（如果你一直按順序?qū)W習(xí)到這里，保存這個文件到你的template目錄下，命名為 base.html .）

我們使用一個以前已經(jīng)見過的模板標(biāo)簽： {% block %} 。所有的 {% block %} 標(biāo)簽告訴模板引擎，子模板可以重載這些部分。每個{% block %}標(biāo)簽所要做的是告訴模板引擎，該模板下的這一塊內(nèi)容將有可能被子模板覆蓋。

現(xiàn)在我們已經(jīng)有了一個基本模板，我們可以修改 current_datetime.html 模板來使用它：

{% extends "base.html" %}

{% block title %}The current time{% endblock %}

{% block content %}
<p>It is now {{ current_date }}.</p>
{% endblock %}

再為 hours_ahead 視圖創(chuàng)建一個模板，看起來是這樣的：

{% extends "base.html" %}

{% block title %}Future time{% endblock %}

{% block content %}
<p>In {{ hour_offset }} hour(s), it will be {{ next_time }}.</p>
{% endblock %}

看起來很漂亮是不是？每個模板只包含對自己而言獨一無二的代碼。無需多余的部分。如果想進(jìn)行站點級的設(shè)計修改，僅需修改 base.html ，所有其它模板會立即反映出所作修改。

以下是其工作方式。在加載 current_datetime.html 模板時，模板引擎發(fā)現(xiàn)了 {% extends %} 標(biāo)簽，注意到該模板是一個子模板。模板引擎立即裝載其父模板，即本例中的 base.html 。

此時，模板引擎注意到 base.html 中的三個 {% block %} 標(biāo)簽，并用子模板的內(nèi)容替換這些 block 。因此，引擎將會使用我們在 { block title %} 中定義的標(biāo)題，對 {% block content %} 也是如此。所以，網(wǎng)頁標(biāo)題一塊將由 {% block title %}替換，同樣地，網(wǎng)頁的內(nèi)容一塊將由 {% block content %}替換。

注意由于子模板并沒有定義 footer 塊，模板系統(tǒng)將使用在父模板中定義的值。父模板 {% block %} 標(biāo)簽中的內(nèi)容總是被當(dāng)作一條退路。

繼承并不會影響到模板的上下文。換句話說，任何處在繼承樹上的模板都可以訪問到你傳到模板中的每一個模板變量。

你可以根據(jù)需要使用任意多的繼承次數(shù)。使用繼承的一種常見方式是下面的三層法：

創(chuàng)建 base.html 模板，在其中定義站點的主要外觀感受。這些都是不常修改甚至從不修改的部分。
為網(wǎng)站的每個區(qū)域創(chuàng)建 base_SECTION.html 模板(例如, base_photos.html 和 base_forum.html )。這些模板對 base.html 進(jìn)行拓展，并包含區(qū)域特定的風(fēng)格與設(shè)計。
為每種類型的頁面創(chuàng)建獨立的模板，例如論壇頁面或者圖片庫。這些模板拓展相應(yīng)的區(qū)域模板。

這個方法可最大限度地重用代碼，并使得向公共區(qū)域（如區(qū)域級的導(dǎo)航）添加內(nèi)容成為一件輕松的工作。

以下是使用模板繼承的一些訣竅：

如果在模板中使用 {% extends %} ，必須保證其為模板中的第一個模板標(biāo)記。否則，模板繼承將不起作用。
一般來說，基礎(chǔ)模板中的 {% block %} 標(biāo)簽越多越好。記住，子模板不必定義父模板中所有的代碼塊，因此你可以用合理的缺省值對一些代碼塊進(jìn)行填充，然后只對子模板所需的代碼塊進(jìn)行（重）定義。俗話說，鉤子越多越好。
如果發(fā)覺自己在多個模板之間拷貝代碼，你應(yīng)該考慮將該代碼段放置到父模板的某個 {% block %} 中。
如果你需要訪問父模板中的塊的內(nèi)容，使用 {{ block.super }}這個標(biāo)簽吧，這一個魔法變量將會表現(xiàn)出父模板中的內(nèi)容。如果只想在上級代碼塊基礎(chǔ)上添加內(nèi)容，而不是全部重載，該變量就顯得非常有用了。
不允許在同一個模板中定義多個同名的 {% block %} 。存在這樣的限制是因為block 標(biāo)簽的工作方式是雙向的。也就是說，block 標(biāo)簽不僅挖了一個要填的坑，也定義了在父模板中這個坑所填充的內(nèi)容。如果模板中出現(xiàn)了兩個相同名稱的 {% block %} 標(biāo)簽，父模板將無從得知要使用哪個塊的內(nèi)容。
{% extends %} 對所傳入模板名稱使用的加載方法和 get_template() 相同。也就是說，會將模板名稱被添加到 TEMPLATE_DIRS 設(shè)置之后。
多數(shù)情況下， {% extends %} 的參數(shù)應(yīng)該是字符串，但是如果直到運行時方能確定父模板名，這個參數(shù)也可以是個變量。這使得你能夠?qū)崿F(xiàn)一些很酷的動態(tài)功能。

您可能感興趣的文章: