上一章節中在 first.py 裏撰寫了一連串的 html 字串，然後再用 HttpResponse 產生 html 文件傳送到客戶端瀏覽器。一大堆字串寫在程式代碼中，是非常白痴的行為。把 html 獨立出來成立一個新的檔案，才是網頁設計的王道。

html 存放位置

請在虛擬網站下建立 templates 目錄。目錄如下

d:\pyweb
├─  venv #虛擬環境設定
├─  templates #模組目錄

DIRS設定

修改 settings.py 如下藍色的地方

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates').replace('\\', '/')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

新增 second 網頁

新增 templates

在 template 模板中新增 second.html，內容如下

<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        這是我的第二個網頁
    </body>
</html>

新增 views.py

在專案根目錄下新增 views.py，整個目錄如下

d:\pyweb
├─  venv #虛擬環境設定
├─  templates #模組目錄
│   ├─ home.html
├─  views.py

內容如下

from django.shortcuts import render
from datetime import datetime

def second(request):
    return render(request, 'second.html')

設定連結 urls.py

請在專案根目錄下的 pyweb目錄，開啟 urls.py,

from views import second
urlpatterns = [
    path('admin/', admin.site.urls),
    path('second/', second),
]

然後在瀏覽器輸入 http://localhost:7000/second，即可看到首頁內容

新增 third 網頁

新增 third 網頁，同樣在模版製作 third.html 檔，修改根目錄 views.py 檔，最後更改 urls.py 連結。views.py 改成如下藍色部份。

from django.shortcuts import render
from datetime import datetime

def second(request):
    return render(request, 'second.html')
def third(request):
    return render(request, 'third.html')

上述的 views.py 說明一件事，一個 .py 檔可以同時定義一個以上的網頁，也就是以方法來定義網頁的名稱。

九九乘法表

新增模板 table9.html

在模板新增 table9.html，內容如下

<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <table align="center" border="1" cellpadding="0" cellspacing="0">
            {% for i in var_i %}
            <tr>
                {% for j in var_j %}
                <td width="50">
                    {% widthratio i 1 j %}
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
        </table>
    </body>
</html>

修改 views.py

網頁根目錄的 views.py 檔修改如下

from django.shortcuts import render
from datetime import datetime

def home(request):
    return render(
        request,
        'home.html',
        {
            'name':'Thomas',
            'current_time': str(datetime.now()),
        }
    )
def table9(request):
    i = range(1, 10)
    j = range(1, 10)
    return render(request, 'table9.html',{'var_i':i, 'var_j':j})

修改 urls.py

urls.py 修改如下

from views import home, table9
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', home),
    path('table9/', table9),
]

然後在瀏覽器輸入 http://localhost:7000/table9 即可看到結果。

載入模板render