「站中有站」 ~ 同一Hugo網站使用多個主題的做法

Having two or more themes for different sections of a Hugo website.

想在Hugo生成的靜態網站同時使用二個以上完全不同的主題嗎?這是有可能的。

Hugo是靜態網站生成器,在建站時候基本上就決定了未來網站的功能走向。如果選擇簡潔,則未來要加功能就要自己撰寫擴充;如果選擇了複雜的漂亮主題,則要萬事照著原本的設計。那麼,如果想要讓特定頁面使用不同的主題呢?這個問題曾困擾我一陣子,後來用了一個簡單粗暴的方法解決。

1. 問題點

本部落格建立伊始,選擇的"MemE"是偏向簡潔的主題。雖然版面簡潔,該有的基本功能都有,但在製作部份網頁的時候仍然碰到瓶頸。在撰寫AI繪圖工具的使用教學的時候深刻體會到,就算把文章用categories功能分類也不夠用的問題。首先,部落格的預設版型狀會使每一篇文章產生割裂感,意即日記文的感覺。再者,部落格的版面不適合引大量表格與數字,所以我興起了給這一系列文章找個主題統整在一起的想法。獨立買個網域架設新站不在考慮選項之中。

我想把他們變得像是Documentation這樣的說明文檔,每個頁面的左邊都會顯示各章節的目錄,這樣讀者會有整體的閱讀感,而不至於迷失方向。

Hugo用於寫文檔的主題有BookLearn,我選擇了較為簡潔的前者。

2. 一個網站使用二個Hugo主題的作法

本節所提到的Book主題網站,原始碼可於Github取得。

  1. 首先,用hugo new site指令新建一個Hugo網站,安裝Book主題。

  2. 將那些介紹Stable Diffusion的文章markdown檔案,移動到Book主題的網站目錄下,參考該主題的說明文件調整config.toml,再用hugo server測試網站是否正常。

  3. 然後用hugo指令生成HTML檔案。成品位於public目錄

  1. 現在我們會有二個獨立的網站目錄,一個主站,一個Book主題的網站。

  1. 那麼要怎樣將這個Book主題的網站整合到我的主網站下呢。目前主站的文章一律放在https://ivonblog.com/posts,那麼我的作法是預計在網域下新增一個目錄http://ivonblog.com/posts/stable-diffusion-manuals,這個目錄就是用來放Book主題生成的HTML網頁了。

  2. 將Book主題網站目錄的config.toml,將前置域名修改如下:

1
baseURL = "https://ivonblog.com/posts/stable-diffuison-manuals"
  1. 調整裡面文章markdown的圖片引用網址,例如原本是/images/title1.png,就改成相對路徑../../images/title1.png

  2. 重新用hugo指令生成HTML檔案。

  3. 接著要把Book主題public目錄下的全部HTML檔案放到我的主站目錄下。但是嘿,我們可不能直接往content目錄跟其他markdown塞在一起,因為那是生成網站過程中被渲染的原始材料。

10 我們要改在static下新增我上面說的posts/stable-diffusion-manuals目錄,再把Book目錄生成的HTML檔案放到這裡。

  1. 這樣,主站在部署到Netlify或AWS的時候,static目錄下的檔案便不會經過渲染,從而直接生成為靜態HTML的一部分。

不過,鑑於Book主題生成的HTML不會渲染成主站的文章列表裡,要怎麼讓讀者知道有這類特殊網頁的存在?萬一讀者把這二個網頁當成平行宇宙呢?

我的作法就是額外發一篇文章告知讀者「入口」在哪囉。為了避免讀者迷路,就在Book主題的網頁加入「回家」的指示。

另外,本文第一張圖片展示的是本部落格曾經測試使用的「第三個」主題。


感謝您的閱讀。歡迎分享Ivon的部落格(ivonblog.com)的文章,引用或轉載請註明文章網址,並遵守創用CC-姓名標示-非商業性-禁止改作 4.0 國際授權條款。如需商業使用請來信告之。

written by human, not by AI

如果本網站文章對您有幫助,歡迎請我喝杯珍珠奶茶。

留言板

點選按鈕,選擇您覺得方便的留言系統。

這是Giscus留言板,需要登入Github帳號才能留言。方便您張貼程式碼,若要上傳圖片請貼Imgur連結。您的留言會在Github Discussions向所有人公開。