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

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

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

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

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

  1. 在網站根目錄,複製hugo-shortcode-gallery至themes目錄
1
2
cd  themes
git clone https://github.com/mfg92/hugo-shortcode-gallery.git
  1. 編輯config.toml,加入hugo-shortcode-gallery
1
theme = ["meme", "hugo-shortcode-gallery"]

2. 於網頁嵌入畫廊

  1. 該Shortcode要求嵌入畫廊的網頁使用Page bundle,也就是content/posts/下的文章並非markdown檔案,而是要長這樣:

  2. index.md就是文章正文,另外要建立一個目錄(images)來存放圖片。

  3. 除了照片本身的EXIF資訊外,還可以新增跟照片檔同名,以.meta結尾的描述檔,在裡面記載照片的標籤資訊。

  4. 按照原作者的設計,.meta檔案支援填入以下內容

1
2
3
4
5
6
{
"Tags": ["雲", "山"],
"Title": "南橫5",
"ColorLabels": "RG",
"Rating": 3
}
  1. 開啟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: '雲'}]">}
  1. gallery match指的是讀取images目錄的照片,sortOrder則是降序排序(另有升序asc)。thumbnailResizeOptions是照片縮圖裁切的大小。previewType則是照片縮圖以模糊方式呈現。最後的filterOptions世新增按照照片標籤過濾的按鈕。

  2. 使用hugo server -D生成網頁,預覽文章內的畫廊。

  3. 點選後放大,顯示照片EXIF資訊。

  4. 至於篩選主題的按鈕嘛,我使用的MemE主題好像會跟此功能衝突,所以請看下一節的實際獨立網站應用例子實際例子。

3. 實際獨立網站應用例子

艦娘乳圖鑑:仿造艦娘乳図鑑的網站,全部只使用hugo-shortcode-gallery寫成。

選了一個簡單的Hugo主題,標籤功能運作良好,然而這個Shortcode不支援多重標籤搜尋是個缺點。

如果本網站文章對您有幫助,歡迎贊助我。