前一講談到設計系統，是為了讓網站更加一致，並且能避免重複的程式碼。

而這講便接續前面的內容，來聊聊也是設計系統的一部份：元件，探討在手刻部落格中有什麼需要自定義的元件。

為什麼要封裝元件？

在我們寫頁面內容物的時候，總會有許多的 CSS 要寫，可能首頁有幾種標題、每種標題有不同的大小、間距和色彩，在另外一頁又出現類似的標題，重複寫 CSS Styles 顯然很多餘，牽一髮而動全身。

例如頻繁地使用 Inline CSS，將 HTML 元素寫死多個樣式的組合，在不同頁面出現就會略寫雜亂，此時如果想要統一調整 <h2 /> 的顏色、字體大小，就需要找到所有 <h2 /> Inline CSS 逐個修改。

<h2 style="font-size:28px; line-height:1.25; margin-bottom:12px; color:#0f172a">
  最新文章
</h2>
<p style="font-size:14px; color:#64748b; margin-bottom:16px">
  最近發佈
</p>

*Inline CSS 範例

改善的第一步就是把 Styles 寫成同一份檔案，抽離成共享類別（Shared Class），再引用同一份 class 就可以避免重複，在修改時也不用改多個地方。

<style>
  .heading-2 { font-size:28px; line-height:1.25; color:#0f172a }
  .meta { font-size:14px; color:#64748b; }
  .mb-3 { margin-bottom: 12px; }
  .mb-4 { margin-bottom: 16px; }
</style>

<h2 style="heading-2 mb-3">最新文章</h2>
<p style="meta mb-4">最近發佈</p>

*將 Inline CSS 抽成 Class

然而這樣每次都還是得再重複寫類似 class="heading-2 mb-3" 的語句，如果要寫多一些、巢狀一些 HTML 元素，即便使用如 Tailwind CSS 封裝後的 classes，資訊量還是會有點太多，像是下面這一個展示最新文章卡片的例子。

<section class="rounded-2xl border bg-white shadow-sm p-6">
  <div class="flex items-end justify-between mb-4">
    <h2 class="heading-2">最新文章</h2>
    <a class="text-primary-600 hover:text-primary-700 text-sm">瀏覽文章</a>
  </div>
  <ul class="grid gap-4">
    <li class="rounded-xl border bg-white p-4 shadow-sm">
      <h3 class="mt-1 text-lg font-semibold leading-tight">CSS Box Model</h3>
      <p class="text-sm text-slate-500">2025-06-26 · 1,045 views</p>
      <p class="mt-1 text-slate-700">介紹 CSS Box Model 的邏輯。</p>
      <a class="mt-3 inline-flex items-center rounded-lg bg-primary-600 px-4 py-2 text-white hover:bg-primary-700">繼續閱讀</a>
    </li>
  </ul>
</section>

*巢狀 HTML 元素

此時可以透過 React 這類前端框架將其元件化，把整個 <section /> 包含其樣式打包成一個自定義的 <Card /> 元件、封裝按鈕成 <Button />，甚至更為客製化的 <PostOverview /> 元件來展示文章的概覽。

<Card>
  <PostOverview title="CSS Box Model" meta="2025-06-26 · 1,045 views">
    介紹 CSS Box Model 的邏輯。
  </PostOverview>
  <Button size="md">繼續閱讀</Button>
</Card>

*組合封裝後的元件

將常用、容易重複的 HTML 元素打包起來變成元件的做法，就可以讓我們在設計畫面的時候只聚焦重點，不讓紛雜的 CSS 細節影響我們的專注的注意力。

部落格需要哪些元件？

那麼要刻出部落格的元件大致有哪些呢？首先我們可以先參考流行的 UI Libraries 都有哪些常見的元件：

我通常會看 Material UI + Ant Design 兩大 UI Libraries 的設計及元件，例如下面是 Material UI 的 Inputs 元件，包含如 Button、Checkbox 等常用輸入元件。

*Material UI - Inputs

然而部落格的主要使用情境是「閱讀」，互動的佔比較小，絕大部分的元件會是以顯示為主，最常見的包含

• 標題（Title）
• 段落（Paragraph）
• 卡片（Card）
• 列表（List）
• 標籤（Tag）
• 表格（Table）
• 分頁（Pagination）

下面是 Ant Design 的一些顯示性元件：

*Ant Design - Data Display

上述所提到的元件可以說是「基礎元件」，是元件的最小單位，如果有常用到基礎元件，還可以將他們組合成一個「組合元件」。

例如前面顯示最新文章的卡片，就可將其中的 <Card />、<PostOverview />、<Button /> 更進一步打包成 <PostCard /> 的元件。

展示頁面／Storybook

在開發自己的元件時，尤其是將基礎元件組合後，時常會需要看看效果，以及實際互動來做測試。若直接在使用的頁面上修修改改，很容易會忽略掉驗證一些樣式、狀態等排列組合後的樣子，這個時候可以引入 Storybook 來顯示和測試元件。

所謂 Storybook 是一個在瀏覽器中開發、瀏覽元件的工具，能幫助我們把元件不同的屬性的組合列出，既能很直覺的互動測試，也能當成是一份元件的 Document。

*Storybook 畫面範例

例如我把一顆按鈕列出，在 Storybook 旁邊的 Control Panel 就能選擇按鈕的樣式為 Primary、Secondary、Ghost；狀態是 Default、Hover 或 Focus 等等。

而既然我都在寫部落格了，也就順便把整個設計系統，包含元件的展示做成幾頁，把部落格會用到的設定和元件建立一個 Showcase 來展示。

*展示頁面範例 - 呈現按鈕

基礎的設定就包含前一講所聊到的色彩和字級等等，而元件部分則有基礎的按鈕、卡片，還有文章概覽（PostOverview）這樣的組合元件。

*展示頁面範例 - 呈現文章概覽（Post Overview）組合

有了這些封裝後的元件，就能花更少心力處理繁瑣的 CSS 樣式，而可以像堆積木一樣的把一個頁面「堆出來」，讓整體設計更一致、更有效率。

參考資料

1. Ant Design - Components Overview
2. Material UI - All components
3. Storybook