今天不新增複雜功能,而是讓網站更像一個完整產品。
步驟 1:在所有頁面顯示 Flash 訊息
打開 templates/base.html,在 裡、{% block content %} 前面加入:
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{{ message }}
{% endfor %}
{% endif %}
{% endwith %}
這樣新增、編輯、刪除後的訊息就可以在所有頁面統一顯示。
接著把 add.html 和 edit.html 中重複的 Flash 區塊移除,避免同一則訊息顯示兩次。
步驟 2:讓卡片有互動效果
在 style.css 加入:
.card {
transition: border-color 0.2s ease,
transform 0.2s ease;
}
.media-grid .card:hover {
transform: translateY(-3px);
border-color: var(--accent);
}
.flash-container {
display: grid;
gap: 10px;
margin-top: 20px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
步驟 3:處理無效操作
檢查以下狀況: