###### tags: `django`
# django入門(四) — 簡單範例(2)-範本與範本繼承
## IT邦連結(需使用電腦版瀏覽器):[點我前往](https://ithelp.ithome.com.tw/users/20145754/articles)
全部文章:
[django入門(一) — 介紹與設定開發環境](https://hackmd.io/@aroncode/SkVeqBO2K)
[django入門(二) — 建立資料庫與專案](https://hackmd.io/@aroncode/rkqgL_unY)
[django入門(三) — 簡單範例(1)-建立app](https://hackmd.io/@aroncode/H1qirFdhF)
[django入門(四) — 簡單範例(2)-範本與範本繼承](https://hackmd.io/@aroncode/rkFuiwKnY)
[django入門(五) — 簡單範例(3)-靜態檔](https://hackmd.io/@aroncode/ByL4dFO2Y)
[django入門(六) — 資料模型與填充程式](https://hackmd.io/@aroncode/BJot2iRnF)
[django入門(七) — Django ORM操作](https://hackmd.io/@aroncode/SJec_hA3Y)
# 範本(Template)
範本是放HTML檔案的資料夾，Template engine(範本引擎)會把views傳來的變數插入到我們在範本內所寫的範本變數。
我們延續上一篇教學，將回傳字樣改成使用範本呈現。
<br>
修改main/views.py
```
from django.shortcuts import render
~~from django.http import HttpResponse~~把這行刪掉
def main(request):
'''
Render the main page
'''
context = {'hello':'Hello world! 這是首頁~'}
return render(request, 'main/main.html', context)
```
main app目錄下建立 templates 與 templates/main 目錄
main/templates/main下建立範本main.html
main/templates/main/main.html 貼上下面html
```
<!doctype html>
<html>
<head>
<title>簡單範例</title>
<meta charset="utf-8">
</head>
<body>
<h2>{{ hello }}</h2>
</body>
</html>
```
# 範本繼承
範本繼承可以讓我們更好得管理範本，當有多個範本有相同重複的部分，我們可以將它們放到同一個範本，並定義一些區塊標籤，讓繼承這個範本的範本可以自己設定區塊標籤內的內容，如此的話，我們未來如果需要更動只要修改一個範本就好了。
首先我們建立一個基礎範本:
main/templates/main/base.html，並將下方code貼上。
```
<!doctype html>
{% load static %}
<html>
<head>
<title>簡單範例</title>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'main/css/main.css' %}">
{% block css %}{% endblock %}
</head>
<body>
{% include 'main/menu.html' %}<!-- -->
<div class="p_header" align="center">
<div class="title">
<h2>簡單範例 -- {% block heading %}{% endblock %}</h2>
</div>
</div>
<div class="wrapper" align="center">
<div class="content" >
{% block content %}{% endblock %}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
{% block script %}{% endblock %}
</body>
</html>
```
main/templates/main/main.html的內容用下面的code蓋掉
```
{% extends 'main/base.html' %}
{% block heading %}首頁{% endblock %}
{% block content %}
<h2>{{ hello }}</h2>
{% endblock %}
```
# 範本匯入其它範本
我們在首頁加入一個目錄的功能。
首先，建立menu.html
main/templates/main/menu.html，將下方code貼上。
```
<ul id="menu">
<li><a href="{% url 'main:main' %}">首頁</a></li>
</ul>
```
main/templates/main/base.html
```
...
<body>
{% include 'main/menu.html' %} <-加入這行
<h2>簡單範例 -- {% block heading %}{% endblock %}</h2>
{% block content %}{% endblock %}
</body>
...
```
到這裡我們可以知道範本繼承達成了「高內聚，低耦合」的目的，便於開發人員日後維護。
## 建立第二個APP-stock
接著繼續往下，在專案下再建立一個app，名稱為**stock**。(記得要去demo/settings新增APP)
如果忘記怎麼建立可以參考前面的教學文章。
首先我們建立一個範本:
main/templates/stock/stock.html，並將下方code貼上。
```
{% extends 'main/base.html' %}
{% block heading %}股票{% endblock %}
{% block content %}
<h2>{{ stock }}</h2>
{% endblock %}
```
撰寫views
stock/views.py
```
from django.shortcuts import render
def stock(request):
context = {'stock':'stock page'}
return render(request, 'stock/stock.html', context)
```
新增一個urls.py在stock app下面，並設定路徑。
stock/urls.py
```
from django.urls import path
from stock import views
app_name = 'stock'
urlpatterns = [
path('', views.stock, name='stock'),
]
```
還有demo/urls.py也要設定路徑哦
```
...
urlpatterns = [
path('admin/', admin.site.urls),
path('main/', include('main.urls', namespace='main')),
path('stock/', include('stock.urls', namespace='stock')), <-加入這行
re_path('.*', views.main),
]
```
## 測試
到這裡可以啟動伺服器了，可以看到頁面上有首頁與股票的分頁連結，且可以點擊進入頁面。
Sign in with Wallet
Connect another wallet