快轉到主要內容

如何修改自訂Hugo主題:程式碼覆寫(override)

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

本篇文章不是講如何開發Hugo主題,而是如何安全修改現有的Hugo主題,達到新增功能的目的。

1. 不要直接修改Hugo主題檔案
#

建立Hugo網站的教學文章有說過如何用Hugo架設靜態網站,其中提到每個網站都至少會裝一個Hugo主題。

例如下圖的Ananke主題,它會安裝到網站的themes/ananke目錄

但是,有時很難找到一次滿意的主題:這個主題很排版我喜歡但是功能太少…這個主題排版很亂但是有些功能我喜歡…

又因為Hugo的主題都是明碼儲存,如果你稍微懂一點HTML和JS,肯定會手癢想要修改安裝的主題的程式碼,加一些新功能上去。

不,不要這樣做,直接改主題程式碼,萬一以後主題要更新呢?所作的變更要手動合併,太麻煩了。

這時請用Hugo內建的覆寫功能來修改主題。

2. 使用Hugo的覆寫功能
#

Hugo可以用根目錄的同名檔案覆寫主題的程式碼或圖片檔,Hugo會優先載入位於網站根目錄的程式碼。

  1. 通常themes目錄的Hugo主題會有以下目錄:
.
├── archetypes
├── assets
├── i18n
├── images
├── layouts
├── resources
├── static
  1. 而你的Hugo的網站根目錄架構長這樣,怎麼樣,是否很類似?
.
├── archetypes
├── assets
├── content
├── data
├── layouts
├── public
├── resources
├── static
└── themes
  1. 就以single.html這個檔案來說,根據Hugo官方文件,Hugo會優先找網站根目錄下的layouts/single.html檔案載入,其次才會去找layouts/_default/single.html

  2. 假設我想要在每個頁面都加入一個JS對話框的指令碼

<script>
alert("Ping!");
</script>
  1. 按照Ananke主題作者的設計,我們可以直接覆寫themes/ananke/layouts/partials/site-scripts.html這個檔案。但注意每個主題有不同的設計方式,新增功能前還是要研究一下它的架構。

  2. 切換到Hugo網站根目錄

cd mywebsite
  1. singel.html複製到Hugo網站根目錄下的同名目錄layouts/partials/,沒有的話自己新增。
mkdir layouts/partials
cp themes/ananke/layouts/partials/site-scripts.html layouts/partials/site-scripts.html
  1. 然後再修改layouts/partials/site-scripts.html,把程式碼插進去
{{/* For Users's overwrite */}}
<script>
alert("Ping!");
</script>
  1. 使用hugo server -D指令預覽網頁,成功看到插入的指令碼生效。

參考資料
#

相關文章

「站中有站」 ~ 同一Hugo網站使用二個以上主題的做法
分類   資訊科技 Hugo網站架設
標籤   Hugo Theme
hugo-shortcode-gallery,給Hugo靜態網頁嵌入圖片畫廊
分類   資訊科技 Hugo網站架設
標籤   Hugo Shortcode Hugo Theme JavaScript Library
將Hugo靜態網站部署到Amazon S3 + Cloudfront + Route 53
分類   資訊科技 Hugo網站架設
標籤   Amazon Web Services

留言板

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

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

這是Disqus留言板,您可能會看到Disqus強制投放的廣告。為防止垃圾內容,有時留言可能會被系統判定需審核,導致延遲顯示,請見諒。若要上傳圖片請善用圖床網站。