今天要讓使用者能只查看想看的電影、已看的電影，或目前正在玩的遊戲。
步驟 1：修改 movies() 與 games() 路由
在 app.py 中，把這兩個路由替換成下面的版本：
@app.route("/movies")def movies(): status = request.args.get("status", "") allowed_statuses = {"backlog", "watched"} connection = get_db_connection() query = """ SELECT * FROM media WHERE media_type = 'movie' """ params = [] if status in allowed_statuses: query += " AND status = ?" params.append(status) query += " ORDER BY id DESC" items = connection.execute(query, params).fetchall() connection.close() return render_template( "collection.html", title="電影收藏", items=items, selected_status=status, media_type="movie" )@app.route("/games")def games(): status = request.args.get("status", "") allowed_statuses = {"backlog", "playing", "completed"} connection = get_db_connection() query = """ SELECT * FROM media WHERE media_type = 'game' """ params = [] if status in allowed_statuses: query += " AND status = ?" params.append(status) query += " ORDER BY id DESC" items = connection.execute(query, params).fetchall() connection.close() return render_template( "collection.html", title="遊戲收藏", items=items, selected_status=status,

這裡使用 request.args 讀取網址中的查詢參數，例如：
/movies?status=watched

就代表只查看已看過的電影。
步驟 2：在 collection.html 加入篩選表單
在作品網格前面，也就是 之前，加入：

<select id="status-filter" name="status">
    <option value=""
        {% if not selected_status %}selected{% endif %}>
        全部狀態
    </option>

    {% if media_type == "movie" %}
        <option value="backlog"
            {% if selected_status == "backlog" %}selected{% endif %}>
            想看
        </option>
        <option value="watched"
            {% if selected_status == "watched" %}selected{% endif %}>
            已看
        </option>
    {% else %}
        <option value="backlog"
            {% if selected_status == "backlog" %}selected{% endif %}>
            待遊玩
        </option>
        <option value="playing"
            {% if selected_status == "playing" %}selected{% endif %}>
            遊玩中
        </option>
        <option value="completed"
            {% if selected_status == "completed" %}selected{% endif %}>
            已通關
        </option>
    {% endif %}
</select>

<button class="button" type="submit">套用篩選</button>

再在 CSS 加上：
.filter-form {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}

.filter-form select {
padding: 10px;
background: var(--panel);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
}

測試
開啟電影頁，選擇「已看」，按下套用篩選。網址應該會包含 ?status=watched，列表也只顯示符合條件的電影。