Open43

Hugo再入門

サイト設定

https://gohugo.io/getting-started/configuration/
  • サイト設定は toml / yaml / json 形式が使えるで、自分の好きなものを選ぶ
  • デフォルト値は /config.toml
  • hugo --config ファイル名で設定することができる
$ hugo --config staging.toml

サイト設定を分割する

以前は v0.18くらいのときに使っていたので、これは便利そう

  • サイト設定は複数のファイルに分割することができる
  • 複数指定する場合は,で区切る
$ hugo --config stagingtoml,menu.toml
  • ただし、複数指定する場合は /config/ディレクトリを作ったほうがよさそう
  • デフォルトの設定は /config/_default/ におく

環境ごとのサイト設定

  • サイト設定は環境ごとに /config/環境名/ ディレクトリの下にまとめることができる
  • 開発(development) /ステージング(staging)/公開(production)など、自分が作る環境に合わせて用意する
  • デフォルト設定は必ず読み込まれるので、違うところ(例えば basurlだけ )を書いておけばOK
  • どの設定を使うかは --environmentオプションで変更する
$ hugo --environment staging
$ hugo --environment production
  • デフォルトでは
    • hugo server = development
    • hugo = production
  • となっている

テーマの設定の引き継ぎ

New in v0.84.0 となっている機能

  • その直前の不便さを知らないので、現在は、デフォルトの挙動でよきようになっていると思って使うことにする
  • なので、ここは必要になったら読むことにする

日本語サイトに絶対必要(だと思う)設定項目

  1. defaultContentLanguage = "ja"
  2. hasCJKLanguage = true

(あとで追加するかも)

図の変換

https://gohugo.io/content-management/image-processing/
  • リサイズ、フィット、フィル、フィルターの処理ができる
  • Resize = 幅と高さを指定。幅だけ、高さだけの場合は、アスペクト比を保存してリサイズ。
  • Fit = 幅と高さを指定。アスペクト比を保存してリサイズ。
  • Fill = 幅と高さを指定。リサイズ&クロップ。
  • Filter = 画像にフィルターを適用。
  • Page Bundle された image に対して適用することができる
  • /staticに置いた画像は対象ではない

内部テンプレート/ショートコード

https://github.com/gohugoio/hugo/tree/master/tpl/tplimpl/embedded/templates
  • Hugoの内部で定義されてるテンプレート/ショートコードの本体
  • ドキュメントには全部の引数が書かれていない気がするので、ここを読んだ方が分かりそう

OGPの設定

  • opengraph.html
  • og:title = .Title
  • og.description = .Description / .Summary / .Site.Params.description
  • og:type = article / website
  • og:url = .Permalink
  • og:image = $.Params.images > Featured画像 > カバー画像 = サムネイル画像 > $.Site.Params.images

og:image

  • $.Params.images = フロントマターで設定; 最初の6枚を使用
  • Featured画像 = Page bundle; ファイル名に*feature*を含む画像;1枚
  • カバー画像 = Page bundle; ファイル名に *cover*を含む画像;1枚
  • サムネイル画像 = Page bundle; ファイル名に *thumbnail*を含む画像;1枚
  • $.Site.Params.images = サイト設定で設定; 1枚

ビルトインのOpenGraph設定

以前、詳しく調べてたみたいだけど、このURLも貼っておく

https://gohugo.io/templates/internal#open-graph
  • サイト設定(config.toml)と各ページのフロントマターの設定の組み合わせ
  • seriesのタクソノミーを使うと see also のページに使われるらしい

The series taxonomy is used to specify related “see also” pages by placing them in the same series.

YouTube動画の埋め込み

  • Shortcodesのドキュメントを読むと id / title / autoplay を設定できることが分かる
  • ソース(youtube.html)を読むと privacy.youtubeclass の設定もできる
    • CSSクラスの設定がない場合はデフォルトで適用されるstyleがある

プライバシー設定

  • サイト設定でいろんなサービスのプライバシー設定(GDPR対策)ができる

https://gohugo.io/about/hugo-and-gdpr/

PostCSS

https://gohugo.io/hugo-pipes/postcss/
  • PostCSS = CSSをビルドするためのフレームワーク
    • ベースとなるCSSから新しいCSSを作ることができる
    • 例:autoprefixerで ベンダー用 prefix を追加する、とか
  • npmを使ってある程度のパッケージのインストールが必要
    • postcss / postcss-cli / autoprefixer
  • 設定は /postcss.config.js に書く
{{ $css := resources.Get "css/main.css" }}
{{ $style := $css | resources.PostCSS }}
  • /assets/css/main.css を読み込んで PostCSSに食べさせている
  • たぶん(じゃなくても)、このように一行で書くこともできる
    • Goの書き方を間違えているかもしれないけど、やりたいことは分かるはず
{{ $style := resources.Get "css/main.css" | resources.PostCSS }}
  • PostCSSの使い方

https://github.com/postcss/postcss-cli
  • この使い方の例が、上と同じ
$ cat input.css | postcss -u autoprefixer > output.css  # Piping input & output
  • cat input.css = 元のCSSを読み込む(パイプする)
  • -u autoprefixer = プラグインを指定する(ここでは autoprefixer
  • > output.css = 変換したCSSを書き出す
  • オプションは他にもあって、使うものは postcss.config.js に書いておくことができる

https://absarcs.info/how-to/install-tailwind-css-hugo/
  • ここに書いてあることを試してみた
  • postcss.config.jsをそのまま真似するとエラーが出る
ERROR 2022/03/11 05:36:54 POSTCSS: failed to transform "style.css" (text/css):
TypeError: Cannot read properties of undefined (reading 'config') at getTailwindConfig (node_modules/tailwindcss/lib/lib/setupTrackingContext.js:81:62)
  • PostCSSのドキュメントにあるように require を使った書き方に修正するとエラーが出なくなった
postcss.config.js
module.exports = {
    plugins: [
        require('tailwindcss')({}),
        require('autoprefixer')({}),
    ]
}
  • でもページにCSSが適用されていない。どうして?

自分でイチからやってもできなかったけれど、tellaというテーマを使ってみたら、問題なくできた。これをベースにちょっとずつ理解していこう。

https://github.com/opera7133/tella

日時のフォーマット指定

https://gohugo.io/functions/dateformat/
time.Format 日付フォーマット 入力値
  • 日付フォーマットは "Mon Jan 2 15:04:05 2006 MST" を並び替えて指定する必要がある
    • MSTは米国山岳標準時 = UTC-07

この値を使う理由はよく知らない・・・

  • 0 1 2 3:4:5 6 7みたいな並びになってるのかな?
  • Hugoを使いはじめたとき、この日時に意味があることを知らなかったので、日付が全く表示されなくて困ったことがあった(いやぁ、分かんないよ)

predefinedなフォーマッタ

  • v0.87.0以降のHugoに predefined なフォーマッタが追加された
{{ .Date | time.Format ":date_full" }}    // => Thursday, Mar 17, 2022
{{ .Date | time.Format ":time_full" }}    // => 11:41 pm UTC
  • あまり(僕の好み的に)使えそうなフォーマッタはない
  • 日本語の場合どういう表示になるか確認が必要

ビルトインな日時のフォーマット

  • Hugoにビルトインされてる日時の変数には .Format が使える
  • ビルトイン日時 .Date / .PublishDate / .Lastmod

https://gohugo.io/functions/format/
{{ .Date.Format "2006-01-02" }}

メニューの追加

https://gohugo.io/content-management/menus/
  • .Site.Menus でアクセスして、メニュー(ナビゲーション)の作成に使うことができる
  • どれでもいいのでテーマ内のexampleSite/config.tomlを真似すればOK

Multiple Menus

config.toml
menu = ['main', 'footer']
  • 使い方の説明がきちんと書かれてないので、推測する
  • .Site.Menus.main.Site.Menus.footer を使うことができるようになるので、navbar と footer で表示する内容を変えることができる(のだと思う)

Nesting

  • identifier を指定することでメニューをネストすることができる

セクション

https://gohugo.io/content-management/sections/
  1. /content/直下の first-level のディレクトリ名が section になる
  2. _index.mdがあるサブディレクトリもsectionになる
  1. セクションテンプレートが自動で適用されるのは1の場合
  2. 2の場合はフロントマターで type or layout を設定する必要がある

Section Templates

https://gohugo.io/templates/section-templates/

5つの kind それぞれのインデックスページがある。
日本語にしても分かりにくいだけなので、URLを見て理解するほうがよいと思う

  1. home = トップ(/index.hdml
  2. page = 記事/ページ(/posts/my-post/index.html
  3. section = セクション(/posts/index.html
  4. taxonomy = タグ自体のインデックス(/tags/index.html
  5. term = タグの中の単語のインデックス(/tags/name/index.html

Goldmark

https://gohugo.io/getting-started/configuration-markup
  • Markdownのレンダラーには Goldmark が使われている
    • v0.60以降のデフォルト
    • それ以前は BlackFridayが使われていた
  • デフォルトでは.mdファイルの中でHTMLタグなどを使うことができない
  • HTMLタグを使いたい場合は unsafe = true に変更しないといけない
    • FontAwesomeなどアイコンフォントを使う場合は、設定を変える必要があるかもしれない
config.toml
[markup]
[markup.goldmark.renderer]
unsafe = true

Google Analytics の設定

  • UA-タグが2023年7月に廃止になるみたい
  • Hugoの中でUA-タグからG-タグへの変更がどうなってるのか確認した
  • 該当のファイルを見つけるために、トラッキングコードに使われている googletag を含むファイルを検索した
$ rg googletag
docs/_vendor/github.com/gohugoio/gohugoioTheme/layouts/partials/gtag.html
2:<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>

tpl/tplimpl/embedded/templates/google_analytics.html
4:<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>

tpl/.../google_analytics.htmlの中身を確認

  • プライバシー設定(.Site.Config.Privacy.GoogleAnalytics)の値を確認
  • GoogleアナリティクスのID(.Site.GoogleAnalytics)の値を確認
  • {{ if hasPrefix . "G-" }} / {{ else if hasPrefix . "UA-" }} となっていて、どちらにも対応

UA-G-は併用できなさそうなので、さっさとUAをGに切り替えるのがよさそう

サイトマップの設定

https://gohugo.io/templates/sitemap-template/
  • config.toml[sitemap]でグローバルに設定できる
    • disableKindsに入れると生成しないようにできる
  • ページのフロントマターで個別に設定できる
  • カスタマイズしたい場合は layouts/sitemap.xml / layouts/_default/sitemap.xml に作成する
config.toml
[sitemap]
changefreq = "daily"
priority = 0.5
  • filenameはデフォルトのまま(sitemap.xml)でいいので書いていない
  • changefreqalways / hourly / daily / weekly / monthly / yearly / never から選択する
  • priority0.0 から 1.0 の間で指定する

公開URL

https://gohugo.io/content-management/urls/
  • サイト設定(config.toml)で指定した contentDir のフォルダ/ファイル階層に従って、publishDirにHTMLファイルが生成される
  • permalinks設定で、公開URLのルールを変更することができる

設定例

config.toml
[permalinks]
posts = "/posts/:year/:month/:day/:03:04/"
pages = "/:section/:filename/"
  • 記事ページ(posts)と固定ページ(pages)で、公開URLのルールを変更する
    • すべての投稿コンテンツは「公開日に意味がある or ない」で区別して、いずれかに分類する
  • 記事ページは公開日をベースに /posts/年/月/日/時分/ にする
    • Go time format が使えるらしいので時(:03)分(:04)で設定できるはず
  • 固定ページはファイル名をベースに /セクション/ファイル名/にする

Pretty URLsUgly URLs

  • Hugoのデフォルトは pretty URL
  • pretty URLはURL末尾がファイル名/となる(要するに index.html が作成される)
  • ugly URLはURL末尾がファイル名.htmlとなる
  • 好みの問題かもしれない

canonifyURLsrelativeURLs

  • コンテンツ内の基本的にそのまま処理される
  • すべてを絶対パスに変換したい場合はconfig.tomlで設定できる
    • SEO対策のcanonical化とは関係がなさそう
config.toml
canonifyURLs = true # デフォルトは false
  • 相対パスに変換する設定もある
    • すでに絶対パスで入力されているものは変換されない
config.toml
relativeURLs = true # デフォルトは false

タクソノミー

https://gohugo.io/content-management/taxonomies/
  • 日本語訳を調べると「分類」「分類法」「分類学」とか出てくるけど、ちょうどいい日本語ってなんだろう?
  • categoriestags の機能のこと
デフォルトで有効になっている設定
[taxonomies]
category = 'categories'
tag = 'tags'
  • 単数形 = "複数形" の形で書くのが基本(とどこかに書いてあったきがする)
  • それぞれの値は記事のフロントマターで設定する
+++
title = "記事のタイトル"
categories = ["カテゴリ1", "カテゴリ2"]
tags = ["タグ1", "タグ2", "タグ3"]
+++

日本語のカテゴリ名/タグ名

  • カテゴリ/タグの値はそのままURLになる
  • カテゴリ名/タグ名が日本語の場合、URLが日本語になる
日本語が混じったURL
https://example.com/categories/カテゴリ1/
https://example.com/categories/カテゴリ2/
https://example.com/tags/タグ1/
https://example.com/tags/タグ2/
https://example.com/tags/タグ3/

英語スラッグにしたい

  • 日本語URLでもアクセスするには問題ない
  • でも、URLを共有するときを考えると、URLは英語にしておきたい
URLは英語にしておきたい
https://example.com/categories/category1/
https://example.com/categories/category2/
https://example.com/tags/tag1/
https://example.com/tags/tag2/
https://example.com/tags/tag3/

ちょっと調べてみているがconfig.tomlでできることはなさそう🤔

代替手段(たぶん;まだテストしてない)

  • フロントマターにはカテゴリ名/タグ名を英語で入力する
記事のフロントマター
+++
title = "記事のタイトル"
categories = ["category1", "category2"]
tags = ["tag1", "tag2", "tag3"]
+++
  • それぞれのカテゴリ名/タグ名に対して_index.mdを作成する
_index.mdのパス
/content/categories/category1/_index.md
/content/categories/category2/_index.md
/content/tags/tag1/_index.md
/content/tags/tag2/_index.md
/content/tags/tag3/_index.md
  • _index.mdのフロントマターに日本語タイトルを書く
_index.mdのフロントマター
+++
title = "カテゴリ1"
+++

たぶんこれでいけるはず😎

Page Variables

https://gohugo.io/variables/page/

.Is系の変数を調べてみる

  • .IsHome : true in the context of the homepage
  • .IsNode : always false for regular content pages. .IsPage と対になるフラグ
  • .IsPage : always true for regular content pages. .IsNode と対になるフラグ
  • .IsSection : true if .Kind is section
  • .IsTranslated : true if there are translation to display.

  • .Site.IsMultilingual
  • .Site.IsServer
  • .IsNamedParams

繰り返し

https://gohugo.io/templates/introduction/#iteration
  • ページの一覧を作ったり、フロントマターで設定した配列から値を取り出したりするときは range を使う
  • とりあえずテンプレートに書いてみて、値を取り出せることを確認しながら、必要なコンポーネントを埋め込んでいけばよい
フロントマター
videos = ["attic/video0.mp4", "attic/video1.mp4", "attic/video2.mp4"]
ページ変数が配列であることを確認
{{ .Params.videos }}
// ==> [attic/video0.mp4 attic/video1.mp4 attic/video2.mp4]
配列から順番に読み出す
{{ range .Params.videos }}
  {{ . }}
{{ end }}
// ==>
// attic/video0.mp4
// attic/video1.mp4
// attic/video2.mp4
変数名をつけて読み出すこともできる
{{ range $video := .Params.videos }}
  {{ $video }}
{{ end }}
// ==> 結果は上と同じ
インデックスも読み出したい場合
{{ range $index, $video := .Params.videos }}
  {{ $index}} : {{ $video }}
{{ end }}
// ==>
// 0 : attic/video0.mp4
// 1 : attic/video1.mp4
// 2 : attic/video2.mp4

最初の項目だけ条件をつける

  • 画像/動画をスライダーを使って表示するときに、最初の項目に class="active"をつける必要があった
  • 配列のインデックスが 0(``{{ if eq $index 0}}...{{ end }} )かどうかで判断することにした
説明に必要そうなHTMLタグに絞ってある
<div class="carousel-inner">
    {{ range $index, $video := .Params.videos }}
    <div class="carousel-item {{ if eq $index 0 }}active{{ end }}">
        <video>
            <source src="{{ $video | relURL }} " type="video/mp4">
        </video>
    </div>
    {{ end }
</div>
ログインするとコメントできます