# Flask實作_使用者登入功能_01_優化Html版面_設置base基版
###### tags: `python` `flask`
## 說明
隨著專案的成長，後面我們還會需要幾個Html頁面，透過`jinja2`模板的繼承可以減化大量Html開發的工作，因此我們需要設置一個屬於自己的基板，方便後續利用繼承的方式來建置網頁。

我們預計在這個基版中加入幾個功能：
* `base.html`
* 繼承bootstrap的base
* 設置導覽列(navbar)
* 保留content block做內容顯示
* 在content內設置message的顯示block

## 作業說明
新增一個Html，命名為`base.html`，如下：
:::success
* 文件：`templates\base.html`
* 說明：建立基礎版面，繼承自`bootstrap\base.html`

{% extends "bootstrap\base.html" %}
{% block title %}UserRegister{% endblock title %}

第1行：設定繼承`bootstrap\base.html`
第2行：設置title
:::

加入導覽列，這部份可至[bootstrap](https://getbootstrap.com/docs/4.0/components/navbar/)取範例，調整過程中可以利用[jsbin](https://jsbin.com/)來協助。
:::success
* 文件：`templates\base.html`
* 說明：加入導覽列

{% block navbar %}
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <!-- 透過url_for設定HOME連結綁定index -->
      <a class="navbar-brand" href="{{ url_for('index')}}">HOME</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <!-- 透過url_for設定USERINFO連結綁定userinfo -->
        <li><a href="{{ url_for('userinfo') }}">USERINFO</a></li>
        <!-- 透過url_for設定LOGOUT連結綁定LOGOUT -->
        <li><a href="{{ url_for('logout') }}">LOGOUT</a></li>
        <!-- 透過url_for設定LOGIN連結綁定LOGIN -->
        <li><a href="{{ url_for('login') }}">LOGIN</a></li>
      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
{% endblock navbar %}

:::

我們設置幾個簡單的路由來確認我們的`navbar`是否正常，如下：
:::success
* 文件：`app_blog\author\view.py`
* 說明：設置幾個簡單的路由來確認`navbar`的設置是否正常

#...上略...#
@app.route('/test')  
def test_index():  
    return render_template('base.html')  
  
  
@app.route('/login')  
def login():  
    return 'Here is Login'  
  
  
@app.route('/logout')  
def logout():  
    return 'Here is Logout'  
  
  
@app.route('/userinfo')  
def userinfo():  
    return 'Here is UserINFO'

:::
:::warning
* 測試
* 測試連結：http://127.0.0.1:5000/test
* 測試說明：這是首頁的狀態
* 測試說明：這是響應式網頁的狀態
:::

首頁正常之後，我們時常需要flash message來傳遞訊息給使用者，在基版上加入一個block來顯示，如下調整：
:::success
* 文件：`templates\base.html`
* 說明：設置一個content block做為後續開發的保留內容區，並在內部加入一個message的區塊來顯示訊息

{% block content %}
    <div class="container">
        <!-- 用來接後端傳來的flash-message -->
        {% for message in get_flashed_messages() %}
        <div class="alert alert-warning">
            <!-- 弄一個x的button，點擊之後讓訊息消失，可參考bootstrap說明 -->
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{ message }}
        </div>
        {% endfor %}

        {% block page_content %}{% endblock %}
    </div>
{% endblock content %}

:::
:::warning
* 測試
* 測試說明：測試message block顯示訊息的狀況

#  追加import
from flask import flash

@app.route('/test')  
def test_index():  
    flash('flash-1')  
    flash('flash-2')  
    flash('flash-3')  
    return render_template('base.html')

這個測試路由設置傳送三次的flash message，上圖來看顯示狀況良好，點擊『x』之後關閉正常。
:::
## 總結
這一節我們成功的配置了一個自己的基版，並且利用了諸多`bootstrap`的元素來協助我們建立一個響應式頁面，`bootstrap`是目前前端最常使用的css框架，花時間學習是值得的。

**上一話：**[Flask實作_使用者登入功能_00_使用者登入篇導論](https://hackmd.io/s/ry_HjCZIG)
**下一話：**[Flask實作_使用者登入功能_02_調整register頁面](https://hackmd.io/s/BJM_IAzC7)
### bootstrap
bootstrap目前已經來到4了，官方認證的就是[六角學院](http://bootstrap.hexschool.com/)所翻的部份，而六角學院也有線上課程可以購買，基本上買他們的課程是真的很不錯，院長由淺而深的教學，會帶你一步一步的了解，我沒買過，我只買過javascript，唯一的感想就是補充補不完，一路追加，非常值得。