想要在網頁加入整頁式的瀏覽圖片,類似瀑布流,並按照標籤搜尋的畫廊(gallery)功能的話,我們可以利用mfg92開發的hugo-shortcode-gallery達成此目的。
此專案並非主題,而是可以嵌入在現有主題的Hugo shortcode,它融合了Justified Gallery和SwipeBox的功能,由此讓Hugo生成能檢視照片畫廊的功能。
當然,它也很適合找單獨架設一個網站,找一個簡約的主題,單純用於展示照片。缺點就是圖片要放在Hugo網站目錄下,不能放在第三方圖床。
以下是此shortcode做起來的大約樣子。文末會有實際的獨立網站例子。
1. 安裝hugo-shortcode-gallery
- 在網站根目錄,複製hugo-shortcode-gallery至
themes
目錄
|
|
- 編輯
config.toml
,加入hugo-shortcode-gallery
|
|
2. 於網頁嵌入畫廊
該Shortcode要求嵌入畫廊的網頁使用Page bundle,也就是
content/posts/
下的文章並非markdown檔案,而是要長這樣:index.md
就是文章正文,另外要建立一個目錄(images
)來存放圖片。除了照片本身的EXIF資訊外,還可以新增跟照片檔同名,以
.meta
結尾的描述檔,在裡面記載照片的標籤資訊。按照原作者的設計,
.meta
檔案支援填入以下內容
|
|
- 開啟
index.md
,新增基本文章架構,接著輸入以下內容(前後要二個大括號,這裡只能寫一個):
|
|
gallery match
指的是讀取images
目錄的照片,sortOrder
則是降序排序(另有升序asc
)。thumbnailResizeOptions
是照片縮圖裁切的大小。previewType
則是照片縮圖以模糊方式呈現。最後的filterOptions
世新增按照照片標籤過濾的按鈕。使用
hugo server -D
生成網頁,預覽文章內的畫廊。點選後放大,顯示照片EXIF資訊。
至於篩選主題的按鈕嘛,我使用的MemE主題好像會跟此功能衝突,所以請看下一節的實際獨立網站應用例子實際例子。
3. 實際獨立網站應用例子
艦娘乳圖鑑:仿造艦娘乳図鑑的網站,全部只使用hugo-shortcode-gallery寫成。
選了一個簡單的Hugo主題,標籤功能運作良好,然而這個Shortcode不支援多重標籤搜尋是個缺點。