使用Shortcode給Hugo靜態網頁加入照片畫廊

想要在網頁加入整頁式的瀏覽圖片，類似瀑布流，並按照標籤搜尋的畫廊(gallery)功能的話，我們可以利用mfg92開發的hugo-shortcode-gallery達成此目的。

此專案並非主題，而是可以嵌入在現有主題的Hugo shortcode，它融合了Justified Gallery和SwipeBox的功能，由此讓Hugo生成能檢視照片畫廊的功能。

當然，它也很適合找單獨架設一個網站，找一個簡約的主題，單純用於展示照片。缺點就是圖片要放在Hugo網站目錄下，不能放在第三方圖床。

以下是此shortcode做起來的大約樣子。文末會有實際的獨立網站例子。

1. 安裝hugo-shortcode-gallery

在網站根目錄，複製hugo-shortcode-gallery至themes目錄

1
2
cd  themes
git clone https://github.com/mfg92/hugo-shortcode-gallery.git

編輯config.toml，加入hugo-shortcode-gallery

1
theme = ["meme", "hugo-shortcode-gallery"]

2. 於網頁嵌入畫廊

該Shortcode要求嵌入畫廊的網頁使用Page bundle，也就是content/posts/下的文章並非markdown檔案，而是要長這樣：
index.md就是文章正文，另外要建立一個目錄(images)來存放圖片。
除了照片本身的EXIF資訊外，還可以新增跟照片檔同名，以.meta結尾的描述檔，在裡面記載照片的標籤資訊。
按照原作者的設計，.meta檔案支援填入以下內容

1
2
3
4
5
6
{
"Tags": ["雲", "山"],
"Title": "南橫5",
"ColorLabels": "RG",
"Rating": 3
}

開啟index.md，新增基本文章架構，接著輸入以下內容(前後要二個大括號，這裡只能寫一個)：

1
{< gallery match="images/*" sortOrder="desc" rowHeight="150" margins="5" thumbnailResizeOptions="600x600 q90 Lanczos" showExif=true previewType="blur" embedPreview=true loadJQuery=true filterOptions="[{label: 'All', tags: '.*'}, {label: '山', tags: '山'}, {label: '寺廟', tags: '寺廟'}, {label: '雲', tags: '雲'}]">}

gallery match指的是讀取images目錄的照片，sortOrder則是降序排序(另有升序asc)。thumbnailResizeOptions是照片縮圖裁切的大小。previewType則是照片縮圖以模糊方式呈現。最後的filterOptions世新增按照照片標籤過濾的按鈕。
使用hugo server -D生成網頁，預覽文章內的畫廊。
點選後放大，顯示照片EXIF資訊。
至於篩選主題的按鈕嘛，我使用的MemE主題好像會跟此功能衝突，所以請看下一節的實際獨立網站應用例子實際例子。