跳至主要内容

Album 相簿部落格：概念發想與決策記錄

在站點的個人紀錄中，Docusaurus 設定筆記 記載了本站由 Hugo 遷移並建立多實例的歷程。目前 blog.life 與 blog.news 已穩定運作，且剛完成了部落格左側欄的自動捲動定位與年月雙層收合機制。

然而，回顧 blog.life 累積的 500 多篇日誌，有超過 400 篇都附帶了珍貴的 cover 封面攝影照片。傳統部落格以文章列表為主軸的導覽方式，對於以「相片與視覺」為主的旅行攝影與生活抓拍來說，缺乏了一種一覽無餘的沉浸感。

因此，我們啟動了 Album 相簿部落格 的全新專案，希望打造一個兼具 Pinterest 瀑布流無限瀏覽 與 Google Photos 時光軸快搜體驗 的現代化相片日誌頻道。

需求討論與決策紀錄（Decisions Log）​

透過深度需求訪談（/grill-me），我們針對相簿部落格的架構、展示形式、元資料與互動細節，收斂出以下關鍵決策：

決策 1：獨立部落格實例（Independent Blog Instance）​

  • 背景選項：
    1. 建立獨立的 blog.album/ 目錄與 /album/ 路由。
    2. 建立 /album/ 頁面，跨集合聚合 blog.life 與各文件的相片。
    3. 直接改版 blog.life 首頁為瀑布流。
  • 最終決策：採方案 1（建立獨立 blog.album/ 實例）。
  • 決策原因：
    • 符合 Docusaurus 多部落格實例的既有乾淨架構（如 blog.life 與 blog.news 分立）。
    • 相簿文章的文章屬性、Frontmatter 欄位與版面佈局有特殊需求，拆分獨立實例能確保內容邊界分明，不干擾一般文字生活日誌。

決策 2：首頁卡片呈現與點擊互動​

  • 背景選項：
    1. 點擊卡片直接進入文章內頁；卡片呈現封面圖，下方附帶標題與發布日期。
    2. 極簡純圖瀑布流，僅 hover 浮現文字。
    3. 燈箱優先模式（點擊先彈窗看大圖，再按按鈕進文章）。
  • 最終決策：採方案 1 原型，並於實作階段優化收斂為方案 2（極簡純圖瀑布流，滑鼠 Hover 浮現資訊遮罩）。
  • 演進脈絡：
    • 初期決策卡片下方常態保留標題與日期；
    • 經 UI 實機檢驗後，為了更極致貼近 Pinterest 的純粹視覺體驗，將標題、拍攝地點（📍）與相簿系列（📁）改為滑鼠懸停（Hover）時以平滑深色漸層浮層呈現，未懸停時僅保留乾淨的照片封面，大幅提升視覺沉浸感。
  • 過濾規則：首頁瀑布流嚴格只顯示帶有 cover 欄位的文章；未設定 cover 者自動略過，確保相簿首頁的純粹視覺品質。

決策 3：相簿專用 Frontmatter 規格​

  • 背景選項：繁複的完整相機 EXIF 參數 vs 簡潔旅遊地點標註 vs 自由標籤擴充。
  • 最終決策：採用「簡潔旅遊相簿 + 自由延伸標籤」的混合方案。
  • 規格欄位：
    • cover: 封面相片 URL（必填，瀑布流核心）。
    • cover_caption: 封面說明文字 / 題詞（選填）。
    • location: 拍攝地點（選填，如「日本・京都」）。
    • album_series: 系列或主題名稱（選填，如「2026 關西初夏行」）。
    • tags: 沿用 Docusaurus 標籤體系，靈活標記器材、攝影風格或主題。
    • 未填寫之選填欄位在前端自動隱藏，維持極簡優雅。

決策 4：側邊欄與版面寬度策略（Sidebar & Layout Policy）​

  • 背景考量：首頁若保留左側欄，會嚴重壓縮瀑布流的橫向空間（只剩 2 欄）；但若內頁也拿掉側欄，則喪失了剛做好的方便年月導覽。
  • 最終決策：
    • 相簿首頁（/album/）：採全寬版面（無左側欄），讓瀑布流能完整舒展為 3～4 欄，視覺震撼且大氣。
    • 文章內頁（/album/YYYY/MM/DD/...）：保留左側年份/月份摺疊側欄，並自動定位當前相簿，便於在同一系列或相近年份的相簿間切換。

決策 5：右側浮動時間軸（Google Photos Timeline Scrubber）​

  • 互動設計：比照 Google Photos 的時間軸滾動條。
    • 當讀者在瀑布流首頁向下捲動時，畫面右側自動浮現極簡的時間軸標尺。
    • 滾動時即時高亮提示當前視窗中照片所屬的「年份與月份」（例如 2026 年 6 月）。
    • 點擊時間軸上的年份或月份刻度，頁面平滑滾動（Smooth Scroll）直達該歷史時期的相片群組。

決策 6：照片全域 Lazy-Loading 與內建 Lightbox​

  • 效能與體驗考量：相簿文章內通常包含大量高解析度相片，一次性全部載入將拖慢首繪速度（FCP/LCP）並消耗巨大頻寬。
  • 最終決策：
    • 全域懶載入：所有相片自動注入原生 loading="lazy" 與 decoding="async"，並搭配 aspect ratio 骨架佔位底色，杜絕排版位移（CLS）。
    • 全螢幕 Lightbox（燈箱檢視器）：文章內所有相片支援點擊放大，支援全螢幕檢視、鍵盤左右箭頭輪播同一文章的多張相片，以及 ESC 鍵流暢關閉。

決策 7：全站導航列整合​

  • 配置規劃：
    • 在頂部導航列（Navbar）配置於 life 與 news 之間： lonely planet / lifehacker / moco / life / album / news。
    • 頁腳（Footer）同步加入 Photo Album 頻道連結。

系統互動與視覺流程設計​

整個相簿系統的使用者體驗流程如下圖所示：

結語與技術實作接軌​

本篇記錄了 Album 相簿部落格的需求定義、設計初衷與決策脈絡。相關的詳細技術架構、元件階層定義、CSS 樣式規範以及逐步實作計畫，請參閱下一篇： 👉 Album 相簿部落格：技術架構與實作計畫