include & extends

      在〈include & extends〉中尚無留言

一個網站當然不可能只有一個網頁,若每個網頁的內容大致相同的話,那重複撰寫相同的 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 %}

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *