WEBSITE DESIGN · COMPONENT LIBRARY
這裡展示真正可重用的網站元件。記下英文名稱交給 AI，也可以直接描述你要的畫面。
依網站使用情境探索 54 個可重用元件：從首頁、文章搜尋與閱讀排版，到專業服務與聯絡入口。可切換四套配色，直接體驗互動效果。
適用：所有網站的導覽、全站搜尋、共用按鈕、區塊標題與頁尾。
DISCOVER
讓訪客快速認識主題、找到值得閱讀的內容。
這是可直接看完整排版的元件示範。選單和法律連結都只是示範目的地，正式站必須換成真實頁面。
點擊放大鏡即可開啟搜尋視窗。這裡示範紙墨知識站的頁面與文章索引；八款完整網站的導航列皆已安裝。
這一頁右下角已經實際使用：往下捲動超過 420px 就會出現向上箭頭。點擊後返回頁首，系統選擇「減少動態」時不使用平滑捲動。四套主題、桌機與手機都共用。
由共用 DemoLayout 自動加入，不需在每一頁重複放按鈕；可指定顯示門檻、無障礙名稱與位置。
八款完整網站的手機導覽列已改用此元件；支援開關、Esc 及鍵盤焦點。
可組合 Instagram、Facebook、Threads、LINE、YouTube、TikTok、LinkedIn、Discord、Telegram、Spotify、Email、電話、GitHub、X、Pinterest、網站及 RSS。第一行純預覽，不會跳轉到虛構帳號；第二行是真實專案連結。
未設定網址的平台不會出現假連結。社群圖示使用 Simple Icons v16，使用時仍須留意平台商標規範。
可選左右圖文、置中標題或滿版色塊主視覺。
A PLACE TO BEGIN
讓文章、觀點與靈感，在同一個地方慢慢累積。
探索內容 →適合介紹理念、服務特色、成果數字與下一步行動。
OUR PHILOSOPHY
透過留白、字體與一致的視覺語言，讓讀者更容易找到下一步。
讀者一眼就知道這裡提供什麼。
字體、對比與行距讓閱讀輕鬆。
不催促，卻讓下一步很容易。
NEXT STEP
選一種舒服的起點，把自己的網站慢慢建起來。
看看完整範例 →從文章列表、精選文章、分類、標籤，到搜尋、月份與日期封存。適合內容型網站，也可用於助人者的文章專區。
讓首頁只負責方向，給詳細文章留出閱讀空間。
從筆記到文章，建立清楚而持續的內容結構。
分類、標籤與內容索引的簡單起點。
從零開始建立個人內容基地的整理。
沒有靈感的日子，也能留下小小的紀錄。
把文章與其他內容連結，形成能探索的網站。
點選三個排列按鈕切換；同一批文章資料即可重複用在知識網站與助人者的文章專區。
ArticleSearch、TagCloud、ArchiveMonths、PostCalendar：四個元件共用文章日期、標籤與分類索引。能搜尋、按月份篩選、點日曆上的日期找到對應文章。
直接進入互動 Demo：搜尋文章關鍵字，點選「資訊架構」標籤，或點 2026 年 10 月 8 日，即可檢視相符文章。
開啟文章搜尋、標籤與日曆 →文章內頁適用：目錄、作者介紹、折疊補充、條列、圖文格線、編輯註記、比較表、延伸閱讀與橫向捲動。
適合術語補充、長篇案例或不影響主要閱讀流程的背景說明。
先整理要說的內容，再安排閱讀順序。
將延伸資訊放在不干擾主要內容的位置。
| 方式 | 適合情境 |
|---|---|
| 關鍵字搜尋 | 已知道想找什麼 |
| 標籤雲 | 想探索相關主題 |
| 月份列表 | 想回顧某段時間的內容 |
| 日曆 | 記得發文日期 |
讓文字清楚、耐讀。
幫新讀者找到入口。
累積日後找得到的內容。
慢慢寫下自己的觀察。
介紹網站主要頁面、架構與閱讀路徑。
查看資源 ↗用服務、流程、信任與清楚的聯絡方式建立專業網站。
ABOUT ME
我相信每個人的節奏都不同。比起急著給答案，我更在意一起找到讓你安心探索的方式。
簡短了解需求，確認服務方式是否適合。
討論期待、界線與可能的合作步驟。
依照雙方節奏進行，也保留調整空間。
「這段介紹應放入已獲同意公開的真實回饋，不要把示例當成實際見證。」
可以先簡單說明你的需求，初次討論時再一起釐清。
當然可以。先閱讀服務介紹，確認適合再預約。
GET IN TOUCH
了解服務是否符合你的需求，再決定是否預約。
尚未設定實際預約網址時，不會顯示假的提交按鈕。
目前未開放線上預約，請使用其他聯絡方式。
上方 Email 為示範格式，正式站請替換成真實聯絡資訊。
元件組裝後的完整網站：兩種網站任務、四套配色。八個完整網站 Demo 均保留。
網站想加上新功能，不必什麼都自己做。下面七個網站有別人已做好的設計與互動功能。你可以先點進去找喜歡的效果，再把網址交給 AI，請它判斷能不能加進你的網站。
元件庫和組合樣板庫可能已經有你要的功能。
看外部網站的實際畫面，不必先研究程式。
貼上連結，讓 AI 檢查能否使用、手機是否好操作，再幫你修改。
想讓網站有好用的互動功能
適合想加入會展開、會跳出視窗等小功能的人。
可以找：下拉選單、彈出視窗、手機側邊選單
想快速找到完整的網站區塊
適合想比較不同的頁首、頁腳、首頁內容排列的人。
可以找：多欄選單、網站頁腳、常見問題、首頁大圖
想把文章和內容排得更好看
適合經營部落格、知識網站，想找清楚的內容呈現方式。
可以找：文章列表、標題區、內容卡片
希望每個人都能順利操作網站
適合重視鍵盤操作、清楚標示和輔助閱讀功能的人。
可以找：展開問答、分頁切換、導覽路徑
想快速找到基本按鈕和卡片
適合先找簡單、乾淨的介面元素，再調整成自己的風格。
可以找：按鈕、提醒訊息、卡片、分頁
想找比較多互動功能的範例
適合想比較較複雜選單或跳出提示效果的人。
可以找：多欄下拉選單、彈出視窗、日期選擇
想參考一套風格一致的網站設計
適合希望整站的按鈕、文字與內容區塊有一致感的人。
可以找：常用介面、網站區塊、整體設計規則
這些是外部網站，並沒有自動安裝到你的網站。部分功能或範例可能要付費；正式使用前，請 AI 先確認授權、相容性和手機操作。