日本語の文字数基準で記事の推定読了時間を表示するBlowfishテーマ向けのコード例です。コードブロックの重み補正も可能です。
Hugoで記事を読むのにかかる時間を日本語基準で推定するためのコードです。
このコードはBlowfishテーマでそのまま使用できます。
技術ブログの場合、文字数だけで読む時間を正確に推定するのは難しいです。
コード量や内容の複雑さによって、同じ文字数でも読み終わる時間に差が出るためです。
そのため、今は推定読了時間を表示していません。
環境#
- Windows 11
- Git Bash
- Hugo v0.150.0
- Blowfish v2.90.0
パーシャルテンプレートの編集#
テーマ内のパーシャルテンプレートをプロジェクト側にコピーします。
Bash
cp themes/blowfish/layouts/partials/meta/reading-time.html layouts/partials/meta/reading-time.htmlコピーしたファイルを次のように書き換えます。
layouts/partials/meta/reading-time.html
{{- /* https://4nm1tsu.com/posts/wpermw2/ */ -}}
{{- /* 設定値 */ -}}
{{- $runesPerMinute := default 500.0 $.Site.Params.readingTime.runesPerMinute -}}
{{- $codeBlockWeight := default 0.2 $.Site.Params.readingTime.codeBlockWeight -}}
{{- /* コードブロックとそれ以外の長さを取得 */ -}}
{{- $pattern := "(?s)```.*?```[\r\n]+" -}}
{{- $codeBlock := findRE $pattern .RawContent -}}
{{- $trimmedLength := countrunes (replaceRE $pattern "" .RawContent) -}}
{{- $codeBlockLength := 0 -}}
{{- range $codeBlock -}}
{{- $codeBlockLength = add $codeBlockLength (countrunes .) -}}
{{- end -}}
{{- /* コードブロック重み補正した記事の長さ */ -}}
{{- $length := add $trimmedLength (mul $codeBlockLength $codeBlockWeight) -}}
{{- /* 読むのにかかる推定時間（分） */ -}}
{{- $count := math.Ceil (div $length $runesPerMinute) -}}
{{- $readingTime := dict "Count" $count -}}
<span title="{{ i18n "article.reading_time_title" }}">
{{- i18n "article.reading_time" $readingTime | markdownify | emojify -}}
</span>
{{- /* Trim EOF */ -}}設定例#
config/_default/params.toml
[readingTime]
# 1分あたりの文字数（日本語基準）
runesPerMinute = 500
# コードブロックの重み（0〜1）。0.2なら文字数の20%で換算
codeBlockWeight = 0.2