Hugo

Hugo関連のメモ

gohugoio/hugo: The world’s fastest framework for building websites.

Variables

テーマをカスタマイズする際に、特定条件で挙動を変えたいシーンが多々発生するが、その際に使い勝手のよい変数。

Page methods

Page methods

Use these methods with a Page object.

.Kind .Section .Type
トップページを表示するとき home 値なし page
セクションのトップを表示するとき section technologies original_blog
記事(ページ)表示するとき page technologies original_blog
カテゴリ一覧 (categories/) を表示するとき taxonomy categories categories
特定のカテゴリ (categories/XXX) を表示するとき term categories categories
タグ一覧 (tags/) を表示するとき taxonomy tags tags
特定のカテゴリ (tags/YYY) を表示するとき term tags tags

関連メソッド

  • .IsSection : true if .Kind is section
  • .IsPage: always true for regular content pages.
  • .IsHome: true in the context of the homepage.

上記の表での前提

  • technologies という名前のセクション名に記事を配置しているとする。意識していなければ、デフォルトは posts に作成される。
  • ページデザインのレイアウトは layouts/original_blog を適用しているとする。
    • レイアウトの指定は記事本文(ページ)の Markdown ファイルに記載してもよいし、セクション配下に一律で適用したい場合は、セクションディレクトリ直下の _index.mdcascade を用いて以下の記載をするのが手っ取り早い。
---
title: "Technologies (技術ブログ)"
cascade:
- type: "original_blog"
---

Docsy theme

  • Hugo Modules に依存している。
  • hugo server したときに Themeファイルのダウンロードがされる
    • 依存関係を変更していなくても一定日数が過ぎて起動すると改めてダウンロードが走るのでキャッシュ関連の動作がある模様
    • 正しくダウンロードできたはずなのに以下の通りエラーが出ることあり
Error: Error building site: "/Users/path/to/project/content/docs/article/_index.md:8:1": failed to extract shortcode: template for shortcode "alert" not found

このケースでは、 Docsy が提供している shortcode が見つからないとのこと(何故か)。手元の macOS環境にて発生。

hugo mod clean にてキャッシュクリアしたら起動できる(細部未確認のため再現性不明)

Twitter Card

多言語

Variables

https://gohugo.io/templates/introduction/#the-dot

1. Define a Variable Independent of Context

The most easily overlooked concept to understand about Go Templates is that {{ . }} always refers to the current context.

  • In the top level of your template, this will be the data set made available to it.
  • Inside an iteration, however, it will have the value of the current item in the loop; i.e., {{ . }} will no longer refer to the data available to the entire page.

2. Use $. to Access the Global Context

$ has special significance in your templates. $ is set to the starting value of . (“the dot”) by default. This is a documented feature of Go text/template. This means you have access to the global context from anywhere. Here is an equivalent example of the preceding code block but now using $ to grab .Site.Title from the global context:

遅延ロード

To lazy load images within Hugo two things are required:

  • Add the loading="lazy" attribute
  • Where possible add the image size to prevent repainting
Native image lazy loading

Native image lazy loading

A little bit of history on the lazy loading attribute and how to implement it on a Hugo website

Native lazy-loading of images on Hugo based website | pawelgrzybek.com

Native lazy-loading of images on Hugo based website | pawelgrzybek.com

The implementation of lazy-loading images using Hugo is equally simple as adding it to an HTML file and you don’t have a good reason not to …

Markdown Render Hooks

Render hooks

Render hooks

Create render hooks to override the rendering of Markdown to HTML.

検索

RSSページテンプレートで日付の逆順にソートしたい場合

  • ページ全てをRSSにしてしまうと意図せず余計なページを含んでしまうことがあるので、明示的に対象セクションをしておいたほうが間違いが少ない
  • $pages に表示したい対象のページを where で絞り込んで変数化
  • 繰り返し処理 range の部分では .ByParam "date" を用いてソートキーとして利用
    • 最後に .Reverse することで逆順(最新日付を最上部)としている
{{/* $filterSections には任意のセクション名を入れておく(ホワイトリスト式) */}}
{{ $filterSections := (slice "posts") }}

{{- $pages = where (.Site.RegularPages) "Section" "in" $filterSections -}}

{{/* 中略 */}}

{{ range ($pages.ByParam "date").Reverse }}
  ...

Counter

リストのループでユニークな連番を付与したいケース

https://discourse.gohugo.io/t/how-counting-up-a-variable-in-range/586/8

{{ $.Scratch.Set "counter" 0 }}
  {{range sort .Params.employees}}
    {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
    I am the number {{$.Scratch.Get "counter"}} in loop!
{{end}}

画像処理ショートコード

JSON-LD 構造化データの作成や更新日の表現方法

[Hugo] Docsy テーマのタグ一覧ページを Noindex にする方法

Hugo で Docsy テーマのタグ一覧ページを Noindex にする方法

[Hugo] モバイル検索結果へサムネイル画像を表示 - PageMapデータ

Hugo minify により HTMLコメントが削除されてしまうなかで PageMap 構造データをコメント表示するためのハック