一個網站當然不可能只有一個網頁,若每個網頁的內容大致相同的話,那重複撰寫相同的 html 碼實在很煩人,所以就可以使用 include 或 extends 來複製相同的部份。
include tag
首先將每個網頁相同的頭尾寫在 head.html 及 tail.html 裏,並將二個檔案置於 templates 目錄中
head.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>MahalJSP</title>
</head>
<body leftmargin="0" topmargin="0" rightmargin="0" topmargin="0">
<table border="1" cellpadding="0" cellspacing="0" width="98%" align="center">
<tr>
<td>
tail.html
</td>
</tr>
</table>
</body>
</html>
然後在 templates 目錄下新增 first.html,內容如下
{% include "head.html" %}
測試
{% include "tail.html" %}
最後使用 python manager.py startapp first 新增 first app,然後於 first 目錄下新增 first.py 檔案,內容如下
from django.shortcuts import render
def html(request):
return render(request, 'first.html')
當然 setting.py 及 urls.py 也要進行設定,此時輸入 localhost:7000/first 即可看到網頁內容了。日後要新增其它網頁,只要新網頁前後新增 include tag即可。
extends
extends 是另一個更好用的方式。前篇的 home.html,其實是為了這個方式製作的。將 home.html copy 到 templates 之下並改名為 base.html。因為每個網頁的不同處是位於 <div id=”content”> 之中,所以在此區塊中使用 block 區隔出來,如下。
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar(
"MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}
);
</script>
<div id="content">
{% block content1 %}
{% endblock %}
</div>
<div id="copyright">
PowerBy Thomas(mahaljsp@gmail.com)
</div>
上述的 “block content1” 為區塊的名稱,可以隨意命名。然後在 templats 目錄下將 home.html 更改成如下
{% extends 'base.html' %}
{% block content1 %}
這是我的首頁
{% endblock %}