快轉到主要內容

調整Hugo的PermaLink,讓不同section的頁面產生同一個URL

· 民國115年丙午年
·
切換正體/简体 ·
分類 資訊科技 Hugo網站架設
標籤 Hugo
目錄

Generating same URL for pages from different sections under content directory of Hugo website.

讓Hugo生成的網址保持一致,不會因為放的目錄不同而產出不同的路徑。

1. Hugo內容與網址管理問題
#

  1. 長久以來我都是把所有文章放在同一個/posts目錄下
content
├── posts/
│   ├── article1/
├─── ├─index.md
│   ├── article2/
├─── ├─index.md
│   ├── article3/
├─── ├─index.md
│   ├── article4/
├─── ├─index.md
  1. 這樣所有文章都會產生/posts/為前綴的網址,等同是永久連結:
https://example.com/posts/article1/
https://example.com/posts/article2/
  1. 問題來了,久而久之,文章越來越多,現在已經超過500個資料夾了,難以管理呀。我想要把文章依照類別放目錄,例如這樣:
content
├── posts/
│   ├── article1/
├─── ├─index.md
├── linux/
│   ├── article2/
├─── ├─index.md
├── mobilephone/
│   ├── article3/
├─── ├─index.md
├── technology/
│   ├── article4/
├─── ├─index.md
  1. 但是,如果直接這樣放,生成的文章網址就會變成下面這樣,每個網址由Hugo自動帶入section,造成困擾。
https://example.com/posts/article1/
https://example.com/linux/article2/
https://example.com/mobilephone/article3/
https://example.com/technology/article4/
  1. 為什麼?因為我常常用categories的front matter來調整文章分類,文章的網址最好是固定的日後才能方便移動:
https://example.com/posts/article1/
https://example.com/posts/article2/
https://example.com/posts/article3/
https://example.com/posts/article4/
  1. 要解決這個問題,得調整Hugo生成網址的設定。我想要讓不同目錄section下的文章最終都擁有一樣的/posts/網址,即永久連結。

2. 解決方案:修改PermaLink #

  1. 讓我們再看一次Hugo的渲染機制。

  2. Hugo網頁結構是使用名為section的機制來控制的,content下的每個目錄都是一個section。

  3. 如果Hugo網站根目錄的content有以下多個目錄section,每個目錄分別有一篇文章article

content
├── section1/
│   ├── article1/
├─── ├─index.md
├── section2/
│   ├── article2/
├─── ├─index.md
  1. 那麼最終生成的文章網址如下:
https://example.com/section1/article1 #對應content/article1/index.md
https://example.com/section2/article2 #對應content/article2/index.md
  1. 接著看你的主題怎麼實作,像我使用的Blowfish主題的首頁「全部文章列表」只能讀單個section下的文章,變成單一列表。因此secion1的列表就不會包含section2的內容。

  2. 由此可知,Hugo的section會區隔開文章。

  3. 要讓不同section下的文章產生同一個網址,就得到Hugo網站根目錄的設定(config.toml或config.yaml)設定「Permalinks」的產生規則。

  4. 根據Hugo官方文件URL management,只要在config檔案新增[permalinks]區塊,加入以下內容就可以了

 [permalinks]
   [permalinks.page]
     posts = '/posts/:contentbasename/'
     linux = '/posts/:contentbasename/'
	 mobilephone = '/posts/:contentbasename/'
	 technology = '/posts/:contentbasename/'
   #[permalinks.section]
   #  posts = '/posts/'
   #  linux = '/posts/'
   #  mobilephone = '/posts/'
   #  technology = '/posts/'

[permalinks.page] linux = '/linux/:contentbasename/'指定,讓/linux目錄下的文章產生/linux的網址。

同理,[permalinks.section] linux = '/posts/:contentbasename/'/linux目錄下的文章改成/posts的網址。不過這個似乎會讓文章列表亂掉因此我傾向不用。

:contentbasename是token,代表以文章markdown的檔名或page bundle目錄名稱來命名網址。

如此一來,位於不同目錄的頁面就會有相同的網址了。至於沒有定義在[permalinks]的目錄,Hugo就會照舊生成帶有section的網址。

3. 停用特定section的生成
#

Hugo網站會生成不同的section,例如content.zh-tw下面有postslinux,會生成https://ivonblog.com/posts/https://ivonblog.com/linux/

我想要停用特定的section生成。因為這裡的目錄只是方便我內部整理,但網站應該只要顯示Markdown裡面定義的分類(categories)就好,例如https://ivonblog.com/categories/linux,不要有https://ivonblog.com/linux/。可以怎麼改呢?

上面步驟已經將permalinks定義好了。

只要在section目錄下的_index.md加入build選項就可以了:

---
build:
  render: never
  list: never
---

相關文章


感謝您的閱讀。我寫作是為了誠實表達想法,而不是追逐社群互動與流量。我很樂意傾聽你在仔細閱讀我文章之後的心得。若有內容勘誤 or 技術問題 or 回饋想法,歡迎透過本站「關於」頁面的Email與我聯絡。