Hugo Blog 進化筆記

目前使用 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

Banner

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

參考資料

Some rights reserved
Except where otherwise noted, content on this page is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International license.