6.2 前端實作：Astro 頁面、版型與互動#

blog/
├── astro.config.mjs
├── public/
│   └── style.css          # 全站共用樣式
├── src/
│   ├── layouts/Base.astro # 共用版型：<head>、header、footer
│   └── pages/
│       ├── index.astro    # F1：首頁文章列表
│       ├── posts/[slug].astro  # F2：單篇文章
│       └── files.astro    # F4：檔案列表
└── functions/             # 6.3 再實作

---
// src/layouts/Base.astro
interface Props { title: string }
const { title } = Astro.props;
---
<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{title}</title>
  <link rel="stylesheet" href="/style.css" />
</head>
<body>
  <header>
    <a href="/" class="logo">邊緣部落格</a>
    <nav>
      <a href="/">文章</a>
      <a href="/files">檔案下載</a>
    </nav>
  </header>
  <main><slot /></main>
  <footer>© 2026 · Powered by Cloudflare Pages</footer>
</body>
</html>

---
// src/pages/index.astro
import Base from '../layouts/Base.astro';

// build 時抓 API；本機 dev 時 wrangler pages dev 會把 /api 交給 Functions
const res  = await fetch(`${import.meta.env.PUBLIC_API_BASE}/api/posts?limit=10`);
const { data: posts } = await res.json();
---
<Base title="邊緣部落格">
  <h1>最新文章</h1>
  <ul class="post-list">
    {posts.map((p) => (
      <li>
        <a href={`/posts/${p.slug}`}>
          <h2>{p.title}</h2>
          <p>{p.excerpt}</p>
          <time>{p.created_at.slice(0, 10)}</time>
        </a>
      </li>
    ))}
  </ul>
</Base>

---
// src/pages/posts/[slug].astro
import Base from '../../layouts/Base.astro';
const { slug } = Astro.params;
const res = await fetch(`${import.meta.env.PUBLIC_API_BASE}/api/posts/${slug}`);
// 思考題：build 時 404 該怎麼辦？（見練習 2）
const { data: post } = await res.json();
---
<Base title={post.title}>
  <article>
    <h1>{post.title}</h1>
    <time>{post.created_at.slice(0, 10)}</time>
    <div class="body" set:html={post.body} />
  </article>

  <section id="comments">
    <h2>留言</h2>
    <ol id="comment-list"></ol>

    <form id="comment-form">
      <input name="author" placeholder="暱稱" maxlength="30" required />
      <textarea name="body" placeholder="說點什麼…" maxlength="500" required></textarea>
      <button>送出留言</button>
      <p id="comment-msg" aria-live="polite"></p>
    </form>
  </section>

  <script>
    // 留言是「建置後才會變動」的資料，所以用瀏覽器端 JS 動態載入，
    // 不吃 CDN 快取的舊頁面 —— 這是靜態優先架構的標準分工。
    const slug = location.pathname.split('/').pop();
    const list = document.getElementById('comment-list')!;

    async function loadComments() {
      const res = await fetch(`/api/posts/${slug}/comments`);
      if (!res.ok) return;
      const { data } = await res.json();
      list.innerHTML = '';
      for (const c of data) {
        const li = document.createElement('li');
        li.textContent = `${c.author}：${c.body}`; // textContent 防 XSS！
        li.append(Object.assign(document.createElement('time'),
          { textContent: c.created_at.slice(0, 16).replace('T', ' ') }));
        list.append(li);
      }
    }

    document.getElementById('comment-form')!.addEventListener('submit', async (e) => {
      e.preventDefault();
      const form = e.target as HTMLFormElement;
      const body = Object.fromEntries(new FormData(form));
      const msg = document.getElementById('comment-msg')!;
      const res = await fetch(`/api/posts/${slug}/comments`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      if (res.ok) { form.reset(); msg.textContent = '留言成功！'; loadComments(); }
      else        { const { error } = await res.json(); msg.textContent = error; }
    });

    loadComments();
  </script>
</Base>

---
// src/pages/files.astro
import Base from '../layouts/Base.astro';
const res = await fetch(`${import.meta.env.PUBLIC_API_BASE}/api/files`);
const { data: files } = await res.json();
const kb = (n: number) => n < 1024 * 1024
  ? `${Math.ceil(n / 1024)} KB` : `${(n / 1024 / 1024).toFixed(1)} MB`;
---
<Base title="檔案下載">
  <h1>可下載檔案</h1>
  <ul class="file-list">
    {files.map((f) => (
      <li>
        <a href={`/api/files/${f.key}`}>{f.key}</a>
        <span>{kb(f.size)}</span>
      </li>
    ))}
  </ul>
</Base>

/* public/style.css：簡潔優先，藏色板給讀者自由發揮 */
:root { --fg: #1c1c1c; --accent: #f6821f; }  /* Cloudflare 橘 */
body   { max-width: 44rem; margin: 0 auto; padding: 1rem;
         font-family: system-ui, sans-serif; color: var(--fg); }
header { display: flex; justify-content: space-between; }
.post-list li { margin: 1.5rem 0; }
.post-list a  { text-decoration: none; color: inherit; }
.post-list a:hover h2 { color: var(--accent); }
#comment-form { display: flex; flex-direction: column; gap: .5rem; }
#comment-form button { align-self: flex-start; background: var(--accent);
                       color: #fff; border: 0; padding: .5rem 1rem; cursor: pointer; }

npx wrangler pages dev     # 同時跑靜態頁 + functions/ + D1/R2 本地模擬