快轉到主要內容

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

資訊科技 Hugo網站架設 Hugo Shortcode Hugo Theme JavaScript Library
🗓️ 民國112年 癸卯年
✍ 切換正體/簡體字
目錄

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

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

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

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

1. 安裝hugo-shortcode-gallery#

  1. 在網站根目錄,複製hugo-shortcode-gallery至themes目錄
cd  themes
git clone https://github.com/mfg92/hugo-shortcode-gallery.git
  1. 編輯config.toml,加入hugo-shortcode-gallery
theme = ["meme", "hugo-shortcode-gallery"]
  1. 如果您的網站有用Git管理版本,記得在根目錄的.gitmoudles加入submodule:
[submodule "themes/hugo-shortcode-gallery"]
	path = themes/hugo-shortcode-gallery
	url = https://github.com/mfg92/hugo-shortcode-gallery.git

2. 於網頁嵌入畫廊
#

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

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

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

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

{
"Tags": ["雲", "山"],
"Title": "南橫5",
"ColorLabels": "RG",
"Rating": 3
}
  1. 開啟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: '雲'}]">}
  1. gallery match=指的是讀取images目錄的圖片,sortOrder預設是降序desc排序(另有升序asc,或者把sortOrder拿掉換成randomize=true就變隨機排序)。thumbnailResizeOptions是圖片縮圖裁切的大小。previewType則是圖片縮圖以模糊方式呈現。最後的filterOptions新增按照圖片標籤過濾的按鈕。

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

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

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

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

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

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

相關文章

用Splide.js給Hugo網頁加上圖片輪播 (Image Carousel)
資訊科技 Hugo網站架設 JavaScript Library
安裝Giscus作為Hugo網站的留言板,支援轉換Gitalk/Utterances的留言
資訊科技 Hugo網站架設 Giscus Github
將suckless.org極簡網頁設計哲學付諸實現,Hugo新增自訂單一HTML頁面
資訊科技 Hugo網站架設 Hugo

留言板

此處提供二種留言板。點選按鈕,選擇您覺得方便的留言板。要討論程式碼請用Giscus,匿名討論請用Disqus。

這是Giscus留言板,需要Github帳號才能留言。支援markdown語法,若要上傳圖片請貼Imgur連結。您的留言會在Github Discussions向所有人公開。

這是Disqus留言板,您可能會看到Disqus強制投放的廣告。有時留言可能會被系統判定需審核,導致延遲顯示,請見諒。