×

Kuncen WB1, Wirobrajan 10010, DIY

(+68) 120034509

info@yourdomain.com

技術筆記｜Hugo Blog 進化筆記

閱讀成本 7 分鐘 #技術筆記

目前使用 Hugo 我的網站

基礎設定（適用全體）

Hugo 重要設定（已完成）

相關文章

最後更新日期

single-partials/lastmod.html

{{ if isset .Params "lastmod" }}
  {{ if ne .Lastmod .PublishDate }}
      <p style="text-align: right;">文章於 {{ .Lastmod.Format "Jan 2, 2006" }} 更新</p>
  {{ end }}
{{ end }}

日期函數

預設日期都將會是格林威治標準時間，如果需要修改時間，時間函數改使用：

publishdate = "2016-04-28T10:00:00+02:00"

Sourece: https://discourse.gohugo.io/t/convert-all-times-to-utc/3206/4

標籤雲

單獨設定標籤與分類樣式，需要在 layouts/_default/ 新增樣式設定檔案 term.html（或其他可用的檔案名稱），並設定成自己想要的模板。記得頭尾的 partial 都要引入。

Source: http://www.g-var.com/posts/translation/hugo/hugo-36-taxonomy-templates/, https://gohugo.io/templates/lookup-order/, https://bwaycer.github.io/hugo_tutorial.hugo/templates/terms/, https://www.sidorenko.io/post/2017/07/nice-tagcloud-with-hugo/, https://note.qidong.name/2017/10/hugo-taxonomy/

大小寫問題

Hugo 預設把 URL 中的大寫轉為小寫，加入下面這一行在 config.toml 可以取消這個功能。

disablePathToLower = true

分類(Categories）也會有一樣的問題，自動被轉換為小寫字母，加入下面程式碼，可以停用。

preserveTaxonomyNames = true

Source: https://jdhao.github.io/2018/10/10/hexo_to_hugo/#大小写问题

圖片文字或標題（Caption）自動帶入

Markdown 已經主宰了我現在主要的每天寫作、筆記以及網站的內容。因此，盡可能地找到 Hugo 相容於 Markdown 的機會，當然能夠大幅的提升自己的效率。過去，我通常要自己設定一個 <h4>，然後透過 css 設定，來達到圖片下面附帶標題的功能。

隨著自己技術能力進步，發現原來這些可透過 markup 去完成，而且有點小技巧。

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

<figure>
  <center> <!-- 可不增加，因為我都是讓圖片滿版，所以我沒有加 -->
    <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}">
    <figcaption>{{ .Text }}</figcaption>
  </center> <!-- 可不增加，因為我都是讓圖片滿版，所以我沒有加 --> 
</figure>

以上是簡略版本，但我自己做了一些變動：

{{ if .Title }}
  <figure>
    <img src="{{ .Destination | safeURL }}" alt="{{ .Title }}">
    <figcaption>{{ .Title }}</figcaption>
  </figure>
{{ else if .Text }}
  <figure>
    <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}">
    <figcaption>{{ .Text }}</figcaption>
  </figure>
{{ else }}
  <img src="{{ .Destination | safeURL }}" alt="圖片">
{{ end }}

這樣一來，我就不用每個圖片都需要設定跟註解文字不一樣的標題了，下面說明 Title 跟 Text 的設定。

![圖片註解](圖片位置 "圖片標題")

上面的 圖片註解 就是我們所用的 .Text，圖片標題 則是我們使用的 .Title。也就是，其實用 Markdown 我們可以設定兩個文字段，這一點就提供更多變化的可能。例如，我們可以在圖片前使用「圖片標題 .Title」、下面才附上「圖片註解 .Text」，在書籍或者學術文章的時候，這就很好使用。

Source: 让 Hugo 自动给图片加上说明文字、Hugo 设置 markdown 图片的标题

主選單（Main Menu）的新增方法

找到一個很棒的方式，既可以設定每一個單頁的標題，也可以直接設定出現在主選單中。直接在該頁的 Markdown Front Matter 增加下面的內容。

menu: 
    main:
        name: title (optional)
        weight: -90

Source：自定义菜单 - Hugo Theme Stack

Widget

搜尋功能

Hugo 本身有許多建議的站內搜尋功能，但因為都需要額外設定或者讀取 Javascript，一方面要啟用的話太複雜，另外一方面看起來效能會被影響，但隨著文章日益增加，搜尋功能的必要性，讓我花了一些時間，去思考解方。

當中看到不少關於使用 Google 當作站內搜尋，剛好找到一篇很棒的技術文章，就這樣加上去囉！很詳細，讓我快速的完成這件事情，大家可以參考下方的資料來源。

不過剛好網站正在整合，發現許多網址都沒有更新，而且自己沒有把 willliu.me / herearoma.com 的網域登記到 Google Search Console，這樣才能確保更新狀態。

Source: 將 Google自訂搜尋引擎 (Google Custom Search) 搭配 OpenSearch 加至 Hugo 網站中

網站專屬設定

未來六米

其他

Hugo 函數研究

Replace

HTML

字元

Plugins

使用 Javascript 方便在不同的頁面內嵌，透過文字跟底圖的方式，可用一張底圖代表活動類型，並每次修改文字，減少製圖的時間與金錢成本。

參考資料

我把這一系列文章整理在下面，有興趣的朋友可以點擊閱讀：

如果您喜歡這篇文章，歡迎訂閱電子報，也請不吝留言鼓勵、討論或分享到自己的社群中，文章採用創用 CC 姓名標示-非商業性-相同方式分享 3.0 台灣 授權條款授權，分享、引用請依授權規定，並附上原文連結（按右鍵複製連結）： 技術筆記｜Hugo Blog 進化筆記。

« 自我成長｜把主站搬離 Medium 的理由以及未來走向 閱讀筆記｜秘密 The Secret：吸引力法則 »