今天先不用資料庫，使用 Python 清單產生作品卡片。明天再改善手機版排版，之後才把測試資料換成 SQLite。
步驟 1：在 app.py 加入測試資料
在 app = Flask(name) 下方加入：
sample_media = [ { "id": 1, "title": "星際效應", "media_type": "movie", "year": 2014, "genre": "科幻", "status": "watched", "rating": 9 }, { "id": 2, "title": "全面啟動", "media_type": "movie", "year": 2010, "genre": "科幻", "status": "want_to_watch", "rating": None }, { "id": 3, "title": "Hades", "media_type": "game", "year": 2020, "genre": "動作", "status": "playing", "rating": 8 }]

這是一個由多個字典組成的清單。每個字典代表一部電影或一款遊戲。
步驟 2：修改電影與遊戲路由
把原本的 movies() 和 games() 替換成：
@app.route("/movies")def movies(): items = [ item for item in sample_media if item["media_type"] == "movie" ] return render_template( "collection.html", title="電影收藏", items=items )@app.route("/games")def games(): items = [ item for item in sample_media if item["media_type"] == "game" ] return render_template( "collection.html", title="遊戲收藏", items=items )

這裡使用清單推導式，只保留符合媒體類型的作品。
步驟 3：建立 templates/collection.html

{% extends "base.html" %}

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

{% block content %}

    {% if item.rating is not none %}
    <p>我的評分：{{ item.rating }}/10</p>
    {% else %}
    <p>尚未評分</p>
    {% endif %}
</article>
{% else %}
<p>目前還沒有收藏作品。</p>
{% endfor %}

步驟 4：補上卡片網格樣式
在 static/style.css 最後加入：
.media-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
padding-bottom: 40px;
}

.media-grid h2 {
margin-top: 0;
}

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

@media (max-width: 500px) {
.media-grid {
grid-template-columns: 1fr;
}
}

測試方式： 電影頁應該顯示兩部電影，遊戲頁顯示一款遊戲。