---
title: \[Django] - 柒-2、五個主要頁面
tags: webdevelopment
---

前一篇中，我們完成了base、sidebar兩個模板。這篇我們會利用這兩個模板來完成五個需要的頁面。
忘記的話，這邊幫大家列出來恢復一下記憶
1. index.html
2. search.html
3. search_history.html
4. login.html
5. signup.html

1. index.html
首先，index頁面。通常index都是作爲網站的首頁

由於我在首頁還沒有規劃，所以非常簡單
引用sidebar，並在第二欄的地方用標題的tag寫個提示。

<!-- 引用sidebar.html -->
{% extends "sidebar.html" %}
{% block title %} Little Tools {% endblock %}
{% block page_title %} Littel Tools {% endblock %}
<!-- 在第二欄的位置放入一個標題 -->
{% block 2nd_col %}
<h1>This is Home page!</h1>
{% endblock %}

完成後大概長這個樣子

2. search.html
接著輪到search.html
這個頁面有加上側欄共有三個欄位，所以我們會在所有的欄位的區塊都放入內容
第二欄(中間)的區塊預計放入一個表單，第三欄(右邊)的區塊則是搜尋結果。

{% extends "three_cols.html" %}
{% block title %} Search {% endblock %}
{% block page_title %} Search {% endblock %}
<!-- 在第二欄加入說明跟表單 -->
{% block two_2nd_col %}
<div class="flex-grow-1 p-3">
    <h2>使用說明：</h2>
    <p>關鍵字若有多個，以英文逗號分開。</p>
    <p>如：關鍵字1,關鍵字2,關鍵字3</p>
    <hr>
        <!-- 表單區塊 -->
        <form method="POST">
            <!-- Django的表單安全機制 -->
            {% csrf_token %}
            <div class="mb-3">
                <div>
                    <!-- Django表單直接匯入 -->
                    <label class="form-label">{{ form.domain.label}}</label>
                </div>
                {{ form.domain }}
            </div>
            <div class="mb-3">
                <div>
                    <label class="form-label">{{ form.keyword.label}}</label>
                </div>
                {{ form.keyword }}
            </div>
            <button type="submit" class="btn btn-primary">Search</button>
        </form>
</div>
{% endblock %}
<!-- 第三欄 -->
{% block three_3rd_col %}
<div class="flex-grow-1 p-3">
    <h2>搜尋結果</h2>
    <p>域名: {{ domain }}</p>
        {% if combine_list %}
            {% for keyword, rank_value in combine_list %}
                <p>Keyword: {{ keyword }}</p>
                <p>Rank: {{ rank_value }}</p>
                <p>----------------------</p>
            {% endfor %}
        {% else %}
            <p>還沒搜尋</p>
        {% endif %}
    {% endblock %}
</div>

完成後的樣子

中間會看到有form.xxxx的東西，現在會點困惑是正常的。之後建立表單時會利用到Django的form的屬性，來快速建立和儲存表單內容。

3. search_history.html

大家應該還記得search_history只是一個用來顯示使用者搜尋過哪些域名的頁面，所以還會有依據這個域名搜尋過哪些關鍵字(3-1)，以及關鍵字的名次紀錄(3-2)這兩個頁面。
首先先完成search_history這個頁面

{% extends "two_cols.html" %}
{% block title %} Search History {% endblock %}
{% block page_title %} Search History {% endblock %}
{% block two_2nd_col %}
<!-- 檢查使用者是否登入 -->
{% if user.is_authenticated %}
    <h3>{{ user.username }}'s search history</h3>
    <!-- 檢查有沒有搜尋過的紀錄 -->
    {% if search_history %}
        <ol>
            <!-- 依序印出搜尋過的域名，並提供連結 -->
            {% for domain in search_history %}
                <li><a href="{% url 'ranking:single_history' domain.domain %}">{{ domain.domain }}</a></li>
            {% endfor %}
        </ol>
    {% else %}
        <!-- 沒有搜尋紀錄的話顯示這段話 -->
        <p>還沒開始搜尋嗎？</p>
    {% endif %}
{% else %}
    <!-- 沒登入的話請他先登入 -->
    <p>Login First!</p>
{% endif %}
{% endblock %}

完成後會長這個樣子，由於我們還沒建立登入系統，也還沒登入所以會顯示請我們登入的畫面。

3-1. 該域名的關鍵字列表(keyword_history.html)

<!-- 引用two_cols.html -->
{% extends "two_cols.html" %}
{% block title %} Keyword History {% endblock %}
{% block page_title %} Keyword History {% endblock %}
<!-- 第二欄內容 -->
{% block two_2nd_col %}
<!-- 檢查使用者是否登入 -->
{% if user.is_authenticated %}
    <h3>{{ user.username }}'s {{ domain }} history</h3>
    <!-- 檢查有沒有搜尋過的關鍵字 -->
    {% if keywords_list %}
        <ol>
            <!-- 有的話，印出來 -->
            {% for keyword in keywords_list %}
                <li><a href="{% url 'ranking:rank_history' domain keyword %}">{{ keyword }}</a></li>
            {% endfor %}
        </ol>
    {% else %}
        <p>還沒開始搜尋嗎？</p>
    {% endif %}
{% else %}
    <p>Login First!</p>
{% endif %}
{% endblock %}

3-2. 名次紀錄(rank_history.html)

{% extends "two_cols.html" %}
{% block title %} Rank History {% endblock %}
{% block page_title %} Rank History {% endblock %}
{% block two_2nd_col %}
{% if user.is_authenticated %}
    <h3>{{ user.username }}'s {{ keyword }} history</h3>
    {% if rank_list %}
        <ol>
            {% for rank in rank_list %}
                <li>{{ rank }}</li>
            {% endfor %}
        </ol>
    {% else %}
        <p>還沒開始搜尋嗎？</p>
    {% endif %}
{% else %}
    <p>Login First!</p>
{% endif %}
{% endblock %}

4. login.html

{% extends "base.html" %}
{% block title %} Login {% endblock %}
<!-- 用css設定表單顏色和標題格式 -->
{% block style %}
<style>
    .form-bg-color {
        background-color: var(--bs-body-color);
        color: var(--bs-body-bg);
    }

    .form-bg {
        margin: auto;
        border: 1px solid;
        border-radius: 8px;
        padding: 50px;
    }

    .topic-title {
        text-align: center;
        padding: 80px;
        font-size: 150px;
    }
</style>
{% endblock %}
{% block body %}
<main class="min-vh-100">
    <h3 class="topic-title">Little Tools</h3>
    <!-- 登入表單 -->
    <div class="d-flex justify-content-center align-items-center">
        <div class="form-bg form-bg-color">
            <form method="POST">
            {% csrf_token %}
            <div class="mb-3">
                <div>
                    <label class="form-label">{{ form.username.label }}</label>
                </div>
                {{ form.username }}
            </div>
            <div class="mb-3">
                <div>
                    <label class="form-label">{{ form.password.label }}</label>
                </div>
                {{ form.password }}
            </div>
            <div>
                <button type="submit" class="form-control">登入</button>
            </div>
            <!-- 註冊連結 -->
            <div style="padding-top: 10px;">
                <span>需要一個帳號嗎？請點</span><a href="{% url 'ranking:signup' %}">註冊</a>
            </div>
            </form>
        </div>
    </div>
</main>
{% endblock %}

完成的樣子

5. signup.html

{% extends 'base.html' %}
{% block title %} Sign up {% endblock %}
{% block style %}
<style>
    .form-bg-color {
        background-color: var(--bs-body-color);
        color: var(--bs-body-bg);
    }

    .form-bg {
        margin: auto;
        border: 1px solid;
        border-radius: 8px;
        padding: 50px;
    }

    .topic-title {
        text-align: center;
        padding: 30px;
        font-size: 100px;
    }

</style>
{% endblock %}
{% block body %}
<main class="min-vh-100">
    <h3 class="topic-title">Sign up</h3>
    <div class="d-flex justify-content-center align-items-center">
        <div class="form-bg form-bg-color">
            <form method="POST">
                {% csrf_token %}
                <div class="mt-auto">
                    <label class="form-label">{{ user_form.username.label }}</label>
                </div>
                <div class="mb-3">
                    {{ user_form.username }}
                </div>
                <div class="mt-auto">
                    <label class="form-label">{{ user_form.password.label }}</label>
                </div>
                <div class="mb-3">
                    {{ user_form.password }}
                </div>
                <div class="row mt-auto">
                    <label class="form-label col">{{ user_form.last_name.label }}</label>
                    <label class="form-label col">{{ user_form.first_name.label }}</label>
                </div>
                <div class="row mb-3">
                    <div class="col">{{ user_form.last_name }}</div>
                    <div class="col">{{ user_form.first_name }}</div>
                </div>
                <div class="mt-auto">
                    <label class="form-label">{{ user_form.email.label }}</label>
                </div>
                <div class="mb-3">
                    {{ user_form.email }}
                </div>
                <div class="mt-auto">
                    <label class="form-label">{{ profile_form.nickname.label }}</label>
                </div>
                <div class="mb-3">
                    {{ profile_form.nickname }}
                </div>
                <button class="form-control">註冊</button>
            </form>
        </div>
    </div>
</main>
{% endblock %}

完成的樣子

如此一來五+二的頁面就完成啦～
下一篇就可以製作表單，並把表單放到網頁上來讓大家填寫

謝謝大家的收看！
如果有任何想法或是問題歡迎寄信到 [e-mail]
可以一起討論和分享新知