5.3 首頁（index.astro）
- Hero 區塊：主標題 + 副標題 + CTA 按鈕
- 三大卡片：硬編碼（不變的內容）
- 最新遊記：
getCollection('blog')動態抓前 3 篇
5.4 部落格列表（blog/index.astro）
- 日期格式：
toLocaleDateString('zh-TW', { year: 'numeric', month: 'long', day: 'numeric' }) - 封面圖可選：
{post.data.image && <img ... />} - URL：
post.id.replace('.md', '')
5.5 部落格文章（blog/[…slug].astro）
- Breadcrumb 導航（首頁 → 旅遊日誌 → 文章標題）
- JSON-LD Article 結構化資料
const { Content } = await render(post)— Astro render 輸出 Markdown
5.6 目的地列表（destinations.astro）
- 卡片結構：padding 在內容層（非外層），圖片自然填滿
- 10 色下拉選單主題色
- 封面圖可選（沒圖直接從標題開始）
5.7 攝影集（gallery.astro）
<dialog>原生 Lightbox（細節見 [[#trouble-lightbox|§7.2 Lightbox 開發史]]）define:vars傳照片資料到 client script- 9 色分類標籤、
stopPropagation只在標籤上
5.8 關於我（about.astro）
- CMS collection，
create: false; delete: false（唯一一筆） - 頭像有/無條件渲染、社群連結有填才顯示
5.9 聯絡表單（contact.astro）
mailto:零後端、autocomplete="name/email"- 左側只留座標，不重複顯示信箱
<form action="mailto:信箱@gmail.com" method="GET" autocomplete="on">
<input name="name" autocomplete="name" required />
<input name="email" autocomplete="email" required />
<textarea name="message" required></textarea>
</form>
[[#table-of-contents|← 回目錄]]
第 6 章：後台設定
👤 你：定義 collection 架構（客戶要管什麼內容） — 🤖 AI：產出 config.yml、對接前端資料
6.1 檔案結構
public/admin/
├── index.html ← Sveltia CMS 入口（CDN 載入）
└── config.yml ← 所有 collection 定義
6.2 index.html
<body>
<script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>
<div class="admin-btns">
<a href="/admin-guide">?</a>
<a href="/">🏠</a>
</div>
</body>
6.3 config.yml 完整範本
backend:
name: github
repo: gimmi520/專案名 # ⚙️ 改這裡
branch: main
base_url: https://你的網域 # ⚙️ 改這裡
auth_endpoint: /api/auth
locale: 'zh_TW'
media_folder: "public/images"
public_folder: "/images"
collections:
- name: "blog"
label: "旅遊日誌"
folder: "src/content/blog"
create: true; extension: "md"; format: "frontmatter"
editor: { preview: true }
fields:
- { name: "title", label: "標題", widget: "string" }
- { name: "image", label: "封面圖", widget: "image", required: false }
- { name: "description", label: "文章簡介", widget: "text" }
- { name: "date", label: "發布日期", widget: "datetime" }
- { name: "tags", label: "標籤", widget: "list", required: false }
- { name: "body", label: "文章內容", widget: "markdown" }