×

Kuncen WB1, Wirobrajan 10010, DIY

(+68) 120034509

info@yourdomain.com

技術筆記|Hugo Blog 進化筆記

閱讀成本 7 分鐘 #Blog #Hugo #網站架設

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

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

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

上面的 圖片註解 就是我們所用的 .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 進化筆記

comments powered by Disqus