今天的目標
讓首頁、電影收藏、遊戲收藏和統計頁面都有自己的網址，而且可以透過導覽列切換。
步驟 1：修改 app.py
將 app.py 整份替換成以下程式碼：
from flask import Flask, render_templateapp = Flask(name)@app.route("/")def home(): return render_template("index.html")@app.route("/movies")def movies(): return render_template( "page.html", title="電影收藏", description="在這裡管理想看與看過的電影。" )@app.route("/games")def games(): return render_template( "page.html", title="遊戲收藏", description="在這裡管理待遊玩、遊玩中與已通關的遊戲。" )@app.route("/stats")def stats(): return render_template( "page.html", title="收藏統計", description="未來會在這裡顯示收藏數量與統計圖表。" )if name == "main": app.run(debug=True)

這裡新增三個路由：

• /movies：電影收藏。
• /games：遊戲收藏。
• /stats：統計頁面。
  @app.route() 的用途是告訴 Flask，當使用者造訪某個網址時，應該執行哪一個函式。
  步驟 2：建立共用模板 templates/base.html
  我們不希望每個頁面都重複寫一遍導覽列，所以先建立共用模板。

    <nav>
        <a href="{{ url_for('home') }}">首頁</a>
        <a href="{{ url_for('movies') }}">電影</a>
        <a href="{{ url_for('games') }}">遊戲</a>
        <a href="{{ url_for('stats') }}">統計</a>
    </nav>
</header>

<main class="container">
    {% block content %}{% endblock %}
</main>

<footer class="site-footer">
    <p>My Media Library © 2026</p>
</footer>

這份模板使用了兩個重要語法：

• {% block content %}：預留給其他頁面放置內容的位置。
• {{ url_for('home') }}：由 Flask 產生指定路由的網址，避免手動寫死網址。
  步驟 3：建立 templates/page.html

{% extends "base.html" %}

{% block title %}{{ title }} - My Media Library{% endblock %}

{% block content %}

這個模板可以重複用在電影、遊戲和統計頁面。

例如，造訪 /movies 時，Flask 會將 title 設成「電影收藏」，再把它傳入 page.html。
步驟 4：修改 templates/index.html
將首頁改成使用共用模板：

{% extends "base.html" %}

{% block title %}首頁 - My Media Library{% endblock %}

{% block content %}

<div class="hero-actions">
    <a class="button" href="{{ url_for('movies') }}">
        查看電影
    </a>
    <a class="button button-secondary" href="{{ url_for('games') }}">
        查看遊戲
    </a>
</div>

步驟 5：測試
執行 python app.py，依序開啟：

• http://127.0.0.1:5000/
• http://127.0.0.1:5000/movies
• http://127.0.0.1:5000/games
• http://127.0.0.1:5000/stats
  每個網址都應該顯示不同標題，但共用同一個導覽列。