🧱 使用 Laravel 12 與 Filament v3 打造德善堂官網：建站實錄分享

在本篇文章中，我想分享近期完成的一個實務專案：德善堂官網，這是一個以 Laravel 12 為基礎，搭配 Filament v3 架構後台管理系統的專案，整合了產品介紹、活動消息、文章系統與 FAQ 等內容頁面。

本篇會說明我們的技術選型、後台架構，以及前台的實作與網站頁面簡介，提供給有意願建構中小型內容管理平台的開發者參考。

🔧 技術選型與架構概述

我們將整個後台操作集中在 Filament 上，前台則以 Laravel Blade 模板呈現，樣式則搭配自訂的 CSS 與 Tailwind 延伸。

🗂️ 網站前台頁面簡介

1. 首頁

首頁以簡潔明亮為主，呈現網站理念、近期活動、推薦產品與文章簡介，提供快速入口連結至各大功能模組。

• 輪播圖呈現形象或活動視覺
• 快速導覽區塊（產品、文章、聯絡）
• 最新消息與貼心提醒區域

2. 文章系統（貼文）

這裡是德善堂官網的文章發佈區，例如新聞、活動報導、公告等等，每篇貼文都有獨立網址與 SEO-friendly 設計。

• 使用動態路由 /post/{id}
• 由後台 Filament CRUD 控制文章內容、分類、發佈時間
• 支援圖文混排與 HTML 編輯器（如 Tiptap 或 TinyMCE）

3. 活動頁面

此頁整合所有公開活動、課程資訊等。活動內容可以來自文章或獨立模組。

• 支援活動報名（可擴充）
• 資訊展示包含時間、地點、簡介與詳情
• 後台可設定是否顯示在首頁

4. 產品詳細頁

展示單一產品的完整資訊，包含名稱、圖片、介紹與購買連結（可串接線上金流或表單）。

• 動態網址 /product/{id}
• 支援產品分類與排序
• 可擴充庫存數量、狀態標記（上架／下架）

5. 登入頁面

使用 Laravel Breeze 或 Fortify 模組打造登入系統，並可客製化樣式與權限控管邏輯。

• 登入成功導向 Filament 後台
• 支援使用者角色（admin, editor 等）
• 可整合兩步驟驗證（2FA）

6. 常見問答 FAQ

FAQ 頁面讓訪客快速找到常見疑問的解答，由後台維護問題與答案內容。

• 路由：/faqs/{id}
• 後台可分類問題類型（如課程、產品、服務等）
• 支援 Accordion 開合樣式增進閱讀體驗

🎯 為什麼選擇 Laravel + Filament？

這個網站屬於內容驅動的展示型網站，我選擇 Laravel + Filament 主要考慮以下幾點：

1. 開發效率高：Filament 提供大量現成組件（如 Table、Form、Relation Manager）。
2. 擴充彈性好：未來若需整合購物、會員、報名功能，可透過 Laravel 套件迅速導入。
3. 後台操作簡易：即使非工程人員也能上手，極大減少教育與維運成本。
4. 程式碼結構清楚：支援 TDD、清楚的 MVC 分層，利於多人協作與維護。

📝 總結

本篇介紹了德善堂網站的開發背景與前後台架構。Laravel 12 + Filament v3 是目前非常適合用於中小型企業、協會組織、教育機構的建站解決方案。

如果你也正在評估用 Laravel 建置官網，不妨試試 Filament，讓你少寫 80% 的後台程式碼、快速交付網站。

👉 歡迎交流 Laravel 與 Filament 開發經驗，或有建置需求也可以聯繫我。