快捷導(dǎo)航

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

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

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

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

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

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

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

<!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>

這看起來(lái)很棒，但如果我們要為第三章的 hours_ahead 視圖創(chuàng)建另一個(gè)模板會(huì)發(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 代碼。想象一下，如果有一個(gè)更典型的網(wǎng)站，它有導(dǎo)航條、樣式表，可能還有一些 JavaScript 代碼，事情必將以向每個(gè)模板填充各種冗余的 HTML 而告終。

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

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

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

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

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

Django 的模板繼承系統(tǒng)解決了這些問(wèn)題。你可以將其視為服務(wù)器端 include 的逆向思維版本。你可以對(duì)那些不同的代碼段進(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>

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

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

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

{% extends "base.html" %}

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

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

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

{% extends "base.html" %}

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

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

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

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

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

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

繼承并不會(huì)影響到模板的上下文。換句話說(shuō)，任何處在繼承樹(shù)上的模板都可以訪問(wèn)到你傳到模板中的每一個(gè)模板變量。

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

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

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

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

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

您可能感興趣的文章: