封面能讓作品卡片更有辨識度。今天先讓使用者輸入圖片網址,不做圖片上傳,避免增加檔案儲存與安全管理的複雜度。
步驟 1:確認資料庫欄位
Day 8 已經在 media 資料表建立 cover_url 欄位,因此不用再修改資料庫。
步驟 2:修改新增表單
在 templates/add.html 加入:
封面圖片網址
在編輯表單 templates/edit.html 加入:
封面圖片網址
步驟 3:在新增路由保存網址
在 add_media() 讀取其他表單欄位的位置加入:
cover_url = request.form.get("cover_url", "").strip()
修改 INSERT 語句,加入 cover_url:
INSERT INTO media (
title, media_type, year, genre,
status, rating, notes, cover_url
)
VALUES (?, ?, ?, ?, ?, ?, ?, ?)
並在參數清單最後加上:
cover_url
在 edit_media() 中也要讀取 cover_url,並在 UPDATE 語句加入:
cover_url = ?
同樣要把 cover_url 放進參數清單,位置必須與 SQL 的問號一致。
步驟 4:顯示封面
在 collection.html 的每個 開頭加入:
{% if item["cover_url"] %}
{% endif %}
步驟 5:加入圖片樣式
.media-cover {
display: block;
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
border-radius: 8px;
margin-bottom: 14px;
background: var(--bg);
}
安全提醒: 只允許 https:// 或 http:// 形式的圖片網址。若要公開部署,後續還應限制允許的網域並防範不安全的外部資源。