hugo-shortcode-gallery，給Hugo靜態網頁嵌入圖片畫廊

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

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

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

以下是此shortcode做起來的大約樣子，文章中圖片會並排在一起。文末還有實際的獨立網站例子。

1. 安裝hugo-shortcode-gallery
#

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

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

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

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

如果您的網站有用Git管理版本，記得在根目錄的.gitmoudles加入submodule：

[submodule "themes/hugo-shortcode-gallery"]
	path = themes/hugo-shortcode-gallery
	url = https://github.com/mfg92/hugo-shortcode-gallery.git

2. 於網頁嵌入畫廊
#

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

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

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

{< 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預設是降序desc排序(另有升序asc，或者把sortOrder拿掉換成randomize=true就變隨機排序)。thumbnailResizeOptions是圖片縮圖裁切的大小。previewType則是圖片縮圖以模糊方式呈現。最後的filterOptions新增按照圖片標籤過濾的按鈕。
使用hugo server -D生成網頁，預覽文章內的畫廊。
點選後放大，顯示圖片EXIF資訊。
至於篩選主題的按鈕嘛，我使用的MemE主題好像會跟此功能衝突，所以請看下一節的實際獨立網站應用例子實際例子。