在 Djanog 網站呈現的東西會用 template 來實現，而非像之前裝在 view 中，若很多東西都裝在同一個檔案中，可以想像那情況會有多混亂 XD。要盡量讓 view 的東西一致，才不會降低可讀性。
template 功能就是呈現 UI，將 view 邏輯處理過的資料呈現在此，在 template 寫的就是 html, css, javascript，除了前端，template 也可以進行一些邏輯判斷像是條件句或是迴圈，需要用特定語法來編寫。簡單介紹完了，來優化剛剛創建的頁面吧！
一個網頁當然不可能這麼簡單，現在嘗試來做比較複雜的首頁，由於時間關係，此次 Django 專案預計只會做簡單的註冊、登入、修改資料及登出功能及畫面。現在就來做個註冊畫面，首先啟動虛擬環境，到 core 資料夾創建 templates 資料夾，在 templates 中再創建 core 資料夾
最後會形成 core/templates/core ，此時再新增
index.html，做為要渲染的模板
創建多層資料夾是為了讓在有重複名稱的模板時讓 Django 能找到正確的模板。在index.html新增以下程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login or Sign Up</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center">
<div class="bg-gray-800 p-8 rounded shadow-md w-full max-w-sm">
<h1 class="text-2xl font-semibold mb-4">Login or Sign Up</h1>
<form method="post" class="space-y-4">
{% csrf_token %}
<div>
<label for="email" class="block text-gray-300">Email:</label>
<input type="email" id="email" name="email" required
class="w-full px-4 py-2 border rounded-md bg-gray-700 text-white focus:outline-none focus:border-blue-500">
</div>
<div>
<label for="username" class="block text-gray-300">Username:</label>
<input type="text" id="username" name="username" required
class="w-full px-4 py-2 border rounded-md bg-gray-700 text-white focus:outline-none focus:border-blue-500">
</div>
<div>
<label for="password" class="block text-gray-300">Password:</label>
<input type="password" id="password" name="password" required
class="w-full px-4 py-2 border rounded-md bg-gray-700 text-white focus:outline-none focus:border-blue-500">
</div>
<button type="submit"
class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">
Sign Up
</button>
<p class="text-gray-300 text-center">Or</p>
<button type="button"
class="w-full bg-gray-600 text-white py-2 px-4 rounded-md hover:bg-gray-700">
Log In
</button>
</form>
</div>
</body>
</html>
這邊主要為 HTML 跟 CSS 組成，在儲存後要將此 template 與 view 連結，才會渲染。回到 core/views.py 中，將程式碼修改成這樣：
from django.shortcuts import render
def index(request):
return render(request, 'core/index.html')
這樣就完成了首頁的設定，預計執行伺服器時會看到以下畫面
一個網站通常不會只有首頁，所以之後會繼續完成其他頁面，以及實作驗證系統，介紹表格的一些語法。明天見嘍~
iThome鐵人賽
看影片追技術