今天要讓統計頁面顯示實際資料，而不是只有一段介紹文字。
步驟 1：修改 stats() 路由
在 app.py 中，把原本的 stats() 函式替換成：
@app.route("/stats")def stats(): connection = get_db_connection() movie_count = connection.execute(""" SELECT COUNT() FROM media WHERE media_type = 'movie' """).fetchone()[0] game_count = connection.execute(""" SELECT COUNT() FROM media WHERE media_type = 'game' """).fetchone()[0] watched_count = connection.execute(""" SELECT COUNT() FROM media WHERE media_type = 'movie' AND status = 'watched' """).fetchone()[0] completed_count = connection.execute(""" SELECT COUNT() FROM media WHERE media_type = 'game' AND status = 'completed' """).fetchone()[0] average_rating = connection.execute(""" SELECT AVG(rating) FROM media WHERE rating IS NOT NULL """).fetchone()[0]

步驟 2：建立 templates/stats.html

{% extends "base.html" %}

{% block title %}收藏統計 - My Media Library{% endblock %}

{% block content %}

<article class="card">
    <p>已看電影</p>
    <h2>{{ watched_count }}</h2>
</article>

<article class="card">
    <p>遊戲總數</p>
    <h2>{{ game_count }}</h2>
</article>

<article class="card">
    <p>已通關遊戲</p>
    <h2>{{ completed_count }}</h2>
</article>

<article class="card">
    <p>平均評分</p>
    <h2>
        {% if average_rating is not none %}
            {{ "%.1f"|format(average_rating) }}/10
        {% else %}
            尚無評分
        {% endif %}
    </h2>
</article>

步驟 3：新增統計卡片樣式
在 style.css 加入：
.stats-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
padding-bottom: 40px;
}

.stats-grid .card p {
color: var(--muted);
margin-bottom: 8px;
}

.stats-grid .card h2 {
font-size: 2rem;
margin: 0;
}

@media (max-width: 650px) {
.stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}