--- title: \[Django] - 柒-1、網頁的功能與頁面 tags: webdevelopment --- 建立完資料庫之後，再來就是要怎麼先前提到的幾個功能實作出來啦。 在Django中，views.py中的各個function會對應urls.py中的URL，當你連結到URL時，Django會執行相對應的function。因此我們會把網頁的功能寫在views.py中，讓其執行。 在開始寫程式前，我們先回想一下當初在[[Django] - 參、缺少的功能](/pznS5cUnSaC5K9llqrYLWQ)規劃過的4個頁面 1. 搜尋頁面 2. 搜尋紀錄頁面 3. 登入頁面 4. 註冊頁面 也就是說我們目前需要4個view來對應這4個頁面。 不過，不過，不過，在寫這些view的功能時，非常難想像要怎麼直接寫出來，所以我反而是從各個頁面的模板先開始下手的。 我們可以先簡單地在views.py中寫入這幾個函式 ```code=python from django.shortcuts import render # Create your views here. def index(request): return render(request, "index.html") def search(request): return render(request, "search.html") def search_history(request): return render(request, "search_history.html") def user_login(request): return render(request, "login.html") def signup(request): return render(request, "signup.html") ``` 以及在ranking/urls.py中增加app名稱以及幾個URL ```code=python from django.urls import path from . import views app_name = "ranking" urlpatterns = [ path("", views.index, name="index"), path("search", views.search, name="search"), path("search_history", views.search_history, name="search_history"), path("login", views.user_login, name="login"), path("signup", views.signup, name="signup"), ] ``` 模板這個概念在Django中，可以透過在html的模板中加入一些函式來呈現自己想要的內容，也可以繼承其他模板讓相同版型的網頁不需要重複輸入程式碼。 一般在Django，我們會在專案的目錄底下建立一個templates資料夾 以我們的例子來說，templates會在seorank的底下，並在templates下載建立一個ranking的資料儲存ranking會用到的模板 ![Screenshot 2025-08-02 at 09.35.18](https://hackmd.io/_uploads/SJwDsksPxl.png) 為了讓Django可以找到這些模板，我們要加入路徑讓它知道要從哪裡讀取。 打開settings.py，大約在第55行的位置會看到「Templates」， 把這段程式碼「Path(BASE_DIR, 'templates')」加到DIRS中並儲存。 ```code=python TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [Path(BASE_DIR, 'templates')], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] ``` 完成之後先看一下我們當初想像的網頁長什麼樣子 1. 搜尋頁面 ![Screenshot 2025-07-29 at 13.45.13](https://hackmd.io/_uploads/BkMIxyUDxx.png) 需求： 1. 需要分為兩欄 2. 左邊要有一個表單可以輸入域名跟關鍵字，以及一個搜尋按鈕送出表單 3. 右邊則是顯示搜尋結果並用虛線分隔 2. 搜尋紀錄頁面 ![Screenshot 2025-07-29 at 13.45.31](https://hackmd.io/_uploads/rJ-vx18Pge.png) ![Screenshot 2025-07-29 at 13.45.23](https://hackmd.io/_uploads/SJHvekLPge.png) 需求 1. 一欄 2. 每個域名或關鍵字都需要是個連結可以連結到下一個顯示頁面 3. 登入頁面 ![Screenshot 2025-08-01 at 12.44.45](https://hackmd.io/_uploads/B1uLLaKvle.png) 需求 1. 一欄 2. 一個表單可以輸入使用者名稱跟密碼，一個登入按鈕 3. 註冊帳號的連結 4. 註冊頁面 ![Screenshot 2025-07-29 at 13.45.44](https://hackmd.io/_uploads/H12OlyLvee.png) 需求 1. 一欄 2. 一個表單，可以輸入使用者名稱、密碼、姓名、電子信箱、暱稱，註冊按鈕 統整之後可以發現，需要3個一欄的頁面跟1個2欄的頁面，同時我也希望在某些頁面有側欄可以讓我方便去到每個頁面，所以我把基底的html分為4種 1. base.html： 預備用於沒有側欄的頁面，如登入以及註冊頁面 2. sidebar.html： 預備用於2或3個欄位的頁面，如搜尋、搜尋紀錄頁面 3. two_cols.html 4. three_cols.html 基底html我們會放在專案的templates資料夾底下，方便我們可以用在別的應用(app)。 首先先把base.html設定好，通常會把網站的樣式設定在這裡，這樣就不需要一直重複輸入一樣的程式。 ```code=html <!DOCTYPE html> <html lang="en" data-bs-theme="auto"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous"> <title>{% block title %}{% endblock %}</title> {% load static %} <script src="{% static 'ranking/color_modes.js' %}"></script> {% block style %}{% endblock %} </head> <body> {% block content %} {% endblock %} <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script> </body> ``` 這邊使用bootstrap工具，來幫我們完成一些顏色和圖案的設定。 需要的讀者可以參考[Bootstrap](https://getbootstrap.com/) 在程式碼中可以看到用{}框起來的部分，這是Django讓我們可以直接利用這些區塊在html檔案中寫函式運作，也可以作為模板的變數，直接從views.py直接套入內容。 接著把sidebar.html完成 ```code=html <!-- 引用base.html --> {% extends "base.html" %} <!-- style區塊 --> {% block style %} <style> .b-divider { width: 100%; height: 3rem; background-color: #0000001a; border: solid rgba(0, 0, 0, .15); border-width: 1px 0; box-shadow:inset 0 .5em 1.5em #0000001a, inset 0 .125em .5em #00000026 } .b-vr { flex-shrink: 0; width: 1.5rem; height:100vh } .bi { vertical-align: -.125em; fill:currentColor } </style> {% endblock %} {% block body %} <body> <!-- bootstrap提供的圖案庫 --> <svg xmlns="http://www.w3.org/2000/svg" class="d-none"> <symbol id="tools" viewBox="0 0 16 16"> <title>LittleTools</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708M3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z"/> </symbol> <symbol id="home" viewBox="0 0 16 16"> <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"></path> </symbol> <symbol id="speedometer2" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"></path> <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"></path> </symbol> <symbol id="table" viewBox="0 0 16 16"> <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"></path> </symbol> <symbol id="grid" viewBox="0 0 16 16"> <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"></path> </symbol> </svg> <main class="d-flex flex-nowrap"> <!-- 側欄 --> <div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;"> <a href="/" class="d-flex align-items-center mb-md-0 me-md-auto text-white text-decoration-none"> <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"> <use xlink:href="#tools"></use> </svg> <span class="fs-2">Little Tools</span> </a> <hr> <ul class="nav nav-pills flex-column mb-auto"> <li class="nav-item"> <a href="{% url 'ranking:index' %}" class="nav-link text-white" aria-current="page"> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"> <use xlink:href="#home"></use> </svg> Home </a> </li> <li> <a href="{% url 'ranking:search' %}" class="nav-link text-white"> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"> <use xlink:href="#speedometer2"></use> </svg> Search </a> </li> <li> <a href="{% url 'ranking:search_history' %}" class="nav-link text-white"> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"> <use xlink:href="#table"></use> </svg> Search history </a> </li> <li> <a href="{% url 'ranking:login' %}" class="nav-link text-white"> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"> <use xlink:href="#grid"></use> </svg> Login </a> </li> </ul> <!-- 登入 --> <hr> {% if user.is_authenticated %} <div class="dropdown"> <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <strong>{{ user.username }}</strong> </a> <ul class="dropdown-menu dropdown-menu-dark text-small shadow"> <li><a class="dropdown-item" href="#">Settings</a></li> <li><a class="dropdown-item" href="#">Profile</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="{% url 'ranking:logout' %}">Log out</a></li> </ul> </div> {% else %} <div class="d-flex justify-content-end"> <a href="{% url 'ranking:login' %}" class="d-flex text-white text-decoration-none"> <strong>Login</strong> </a> </div> {% endif %} </div> <!-- 欄分隔線 --> <div class="b-divider b-vr"></div> <!-- 放第二欄的區塊 --> {% block 2nd_col %}{% endblock %} <!-- 放第三欄的區塊 --> {% block 3rd_col %}{% endblock %} </main> </body> {% endblock %} ``` 完成後，我們來看看側欄大概會長什麼樣子 首先先在templates底下的ranking中建立之後會需要的五個頁面 分別是 1. index.html 2. search.html 3. search_history.html 4. login.html 5. signup.html 接著打開index.html 輸入 ```code=html {% extends "sidebar.html" %} ``` 並儲存 啟動伺服器，進到127.0.0.1/ranking，就可以看到如下圖的頁面拉～ ![Screenshot 2025-08-02 at 10.28.01](https://hackmd.io/_uploads/SJ-1uxiPgg.png) 完成基底之後，我們也一併把two_cols以及three_cols兩個頁面完成 two_cols.html: ```code=html {% extends "sidebar.html" %} {% block 2nd_col %} <!-- 欄分隔線 --> <div class="b-divider b-vr"></div> <!-- 之後的內容 --> {% blcok two_2nd_col %} {% endblock %} {% endblock %} ``` three_cols.html: ```code=html {% extends "sidebar.html" %} {% block 2nd_col %} <!-- 第二欄內容 --> {% block two_2nd_col %} {% endblock %} <!-- 欄分隔線 --> <div class="b-divider b-vr"></div> {% endblock %} {% block 3rd_col %} <!-- 第三欄內容 --> {% block three_3rd_col %} {% endblock %} {% endblock %} ``` 接下來就可以準備依樣畫葫蘆，完成剩下的五個頁面了 謝謝大家的收看！ 如果有任何想法或是問題歡迎寄信到 chantinghsien@gmail.com 可以一起討論和分享新知