轉移到 Hugo 後遇到的問題之一:解決分類頁面的顯示問題

Posted by clsung is reading on Sunday, January 19, 2025
AI 生圖

解決分類頁面的顯示問題

在決定將部落格從 WordPress 遷移到 Hugo 後,過程大致順利,但還是遇到了一些問題。今天想要分享其中一個較為棘手的問題:分類(Category)和標籤(Tags)頁面無法正確顯示文章列表的情況。

問題描述

在前篇完成基本的內容遷移後,我發現分類和標籤頁面雖然都能夠正常訪問,但是頁面上卻沒有顯示任何文章。這顯然不是正常的情況,因為我確定這些文章上的分類和標籤應該都在,雖然另一個問題是分類會顯示在標頭上,過多,所以我因此有把大部份文章的分類都拿掉了。

原因以及解決方法

經過多方比對包含問了 ChatGPT,我發現問題出在主題(Theme)的實現方式上。Hugo 的主題系統非常靈活,但這也意味著不同主題對於分類和標籤頁面的處理方式可能會有所不同。在我的情況中,hugo-theme-cleanwhite 提供的預設實現並不完全符合我的需求。我發現它的 layouts/partials/category.html 是這樣的:

1
2
{{ $paginator := .Paginate (where .Data.Pages "Section" "post") }}
{{ partial "posts.html" . }}

但我的 content/posts 目錄下是 posts 而不是 post,所以這個實現方式並不適用。

所以我決定自己動手解決這個問題。主要的解決步驟如下:

在專案中編輯自定義的 layouts/partials/category.html 檔案,將 post 改成 posts

1
2
{{ $paginator := .Paginate (where .Data.Pages "Section" "posts") }}
{{ partial "posts.html" . }}

踩雷經驗

這次的經驗讓我學到:

  1. 主題客製化的重要性:雖然使用現成的主題可以快速建立網站,但有時候我們需要根據自己的需求進行調整。了解如何覆寫 (overwrite) 主題的特定部分而不是修改主題本身的檔案是必要的,我本來是想要修改 hugo-theme-cleanwhite 的檔案,但後來發現其實只要修改自己的 layouts/partials/category.html 檔案就好,這也就是下一點學到的。

  2. Hugo 的 template:目錄的優先順序,特別是 layouts 目錄。

  3. 文件的重要性:在解決問題的過程中,Hugo 的官方文件其實可能是因為我不熟,我覺得沒什麼用 XD。但多看看其他人的解決方法,會發現很多解決方法其實是官方文件上有講到的,只是有點難找。