Hugo

config.toml 介紹

By Steve 2025-01-11

config.toml 筆記、修改紀錄

目前只先介紹這個主題用到的語法設定介紹，還有很設定沒有測試，未來有看到感興趣的功能在做測試。

default configuration 區域

default configuration 設定 說明
baseURL 網站的根目錄地址，如果部署到 GitHub Pages 須正確設置為主機地址。
languageCode 設置網站的主要語言。
title 指定 Hugo 網站使用的主題名稱。
theme 指定 Hugo 網站使用的主題名稱，簡單來說就是啟動hugo server時指定themes中的[資料夾名稱]。
summaryLength 控制每篇文章摘要的行數，如果刪除會到只文章全部展開。
paginate 顯示文章數量，**注意：**此功能即將停用，建議使用 pagination.pagerSize 替代。
disqusShortname 預留 Disqus 的短名稱，用於啟用文章評論功能。
Disqus 是一個第三方評論系統，網站可以通過它讓用戶進行評論互動。
[pagination] 取代原本 paginate。
 disableAliases 預設false，沒用到所以移除了，但如果你曾經改變過分頁 URL 路徑，需要將舊的 URL 重定向到新的 URL，避免破壞舊鏈接，就需要開啟。
 pagerSize 顯示文章數量，用於控制首頁、分類頁等文章列表頁的內容密度。
 path https://github.io/[page]/2/，[]中的名稱。
[outputs]
 home 目前只想單純用作學習紀錄，所以將"RSS", “JSON"移除。
  - HTML：用於普通的網頁內容。
  - RSS：用於 RSS 提要，方便用戶訂閱網站內容。
  - JSON：用於 API 或動態數據，方便與其他應用整合。

Plugins 區域

  • 這個區塊主要設定 hugo 安裝的CSS、JS、JS插件，檔案位置\themes\liva-hugo\static\plugins之中。
  • 新增下拉選單 
    [[menu.main]]
name = "筆記"
URL = "#"
weight = 2
  [[menu.main]]
  parent = "筆記"       # 主目錄
  name = "hugo網站建置" # 子目錄名字
  URL = "/note/hugo"    # 資料夾位置
  weight = 1

default parameters 區域

  • 網頁名稱、logo圖片。 
    [params]
  logo = "images/logo.png"
  home = "Note"
  # Meta data
  description = "學習筆記" # 個人網站簡短介紹
  author = "Steve"         # 作者姓名
  # Google Analitycs
  googleAnalitycsID = "Your ID"
# params.preloader：網站在加載頁面時展示的一個過渡動畫或圖片效果
[params.preloader]
  enable = false
  preloader = "" # use .png , .svg or .gif format
# params.search：是否啟用站內搜索功能。
[params.search]
  enable = true

news letter 區域

  • 這兩個功能我都關閉了，但如果要使用 Google Analytics 就需要開啟 cookies 功能。 
    [params.newsletter] # 訂閱功能
enable = false

[params.cookies] #cookies 功能
enable = false
expire_days = 2 # 表示 Cookies 的有效期天數。

social site 區域

  • 個人社群軟體:頁首、頁尾、右側都有小圖示。 
    [[params.social]]
  title = "github"
  icon = "ti-github" # themify icon : https://themify.me/themify-icons
  link = "https://github.com/ho291ey992"

其他

  • 執行 hugo server 警告訊息

    • 警告訊息：Markdown語法中使用HTML語法都會出現此錯誤。

      WARN  Raw HTML omitted while rendering "content/blog/post-12.md"; see https://gohugo.io/getting-started/configuration-markup/#rendererunsafe
You can suppress this warning by adding the following to your site configuration:
ignoreLogs = ['warning-goldmark-raw-html']

      解決方法：啟用 Raw HTML 渲染。

      [markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

    • 警告訊息：paginate 功能即將停用，建議使用 pagination.pagerSize 替代。

      deprecated: site config key paginate was deprecated in Hugo v0.128.0 and will be removed in Hugo 0.141.0. Use pagination.pagerSize instead.

      解決方法：paginate 替換成 pagination 。

      [pagination]
  disableAliases = false
  pagerSize = 6
  path = 'page'

  • code 主題設定

    [markup.highlight]
style = "manni"  # 更改為適合的主題樣式 monokai、manni、tokyonight-day、rose-pine-dawn
                 # 樣板:https://xyproto.github.io/splash/docs/all.html
noClasses = true  # 如果想要自定義程式區域改成false

  • youtube 控制功能，剛好看到就拿來測試了。

    [privacy]
  [privacy.youtube]
    disable = false

其他問題

刪除多餘content\blog網頁

修正code區域配色問題

  • 錯誤原因：_main.scss 中 pre、code 使用到其他顏色，倒置 code 主題顏色設定部分被覆蓋。

  • 解決方法：自行定義程式區顏色_main.scss 中 pre、code 。

    /* 設定 `pre`，適用於多行程式碼區塊 */
pre {
  background-color: #282c34;  // 設定背景色
  color: #abb2bf;  // 預設文字顏色
  padding: 15px;  // 內邊距
  margin: 10px 0;  // 上下間距，避免過於擁擠
  border-radius: 6px;  // 圓角效果
  overflow: auto;  // 允許滾動條顯示
}

/* 設定 `code`，適用於單行內程式碼 */
code {
  background-color: #f7f7f7;
  color: #e83e8c;
  padding: 2px 5px;
  border-radius: 4px;
}