Hugo 備忘録

ここでは、hugoで何かしようとしてつまずいたところとかを適当に記録していきます。

markdown のテンプレートを作る

この記事を書いた動機 hugoで書いているとき、以下のようにして、フォルダごとに分けることで、記事を管理しています。それで、それらフォルダ内に、新しく記事をhugo newするときに、デフォルトで生成される記事のテンプレートを異なるものにして、管理できるらしいということがわかったので、メモを自分用に取るだけです。やり方 hugo で作業しているルートディレクトリの “archetypes” というフォルダに、“content” 配下にあるフォルダ構造を意識して、[フォルダ名].mdのようにして、ファイルを作成し、テンプレートを作る。以下に、フォルダ構造やテンプレートファイルのマークダウンの例を一応乗せることにする。 archetypes archetypes ├── default.md ├── images.md └── posts.md content content ├── posts └── images posts.md +++ title = '{{ replace .File.ContentBaseName "-" " " | title }}' date = {{ .Date }} draft = true ShowToc = true +++ images.md +++ title = '{{ replace .File.ContentBaseName "-" " " | title }}' date = {{ .Date }} draft = true ShowToc = false +++ 参考にしたサイトとか Archetypes | hugo https://gohugo.io/content-management/archetypes/#article （2025年3月16日）

記事ごとにトップ画像を表示したい (hugo PaperMod)

この記事を書いた動機 hugo を使っていて、書いた記事のサムネイルというかトップ画像みたいなのを、記事のリストで表示したかったが、すぐにどうすればいいか見つけられないかったので忘れない内に記録するというだけです。今回の場合は、Google 検索とかで適当に調べたり、 Paper Mod 公式サイトでは直接どうするのかを見つけることは出来なかったのですが、そこで動いている例を無理やりChrome の開発者ツールで調べて、実際の開発環境側で、themes/PaperMod 配下にあるファイルと一致する記述を見るけることで対応しました。 Paper Mod 公式サイトの動いている例うまく動いた例 PaperMod の場合 +++ date = '2025-02-15T00:46:54+09:00' draft = false title = 'Windows' weight = 2 [cover] image = "/posts/windows/indexIcon.svg" +++ ... 記事の内容（markdown）ちなみに画像は、staticフォルダ配下においている。無理やり見つけた経緯調査 Paper Mod 公式サイトのトップページにある動いているやるのタグやクラス名を調べる。検索 VS code の検索機能で、<article class=" と調べる。以下の様な記述が見つかる。クラス名にentry-headerとあったりするなど、Paper Mod 公式サイトの動いている例と似ている点が見つかる。 themes/PaperMod/layouts/_default/list.html ... {{- partial "cover.html" (dict "cxt" . "IsSingle" false "isHidden" $isHidden) }} <header class="entry-header"> <h2 class="entry-hint-parent"> ... そして、画像のタグがある部分に該当するのが、cover.htmlというところにありそうなことが分かる。 ...

hugoで画像を追加する 📷の補足

この記事を書いた動機ここでは前回、hugoのショットコードを使えば、もっといい感じに画像を表示できるように調整できるのではということがあったので、それをやってみた過程を記録します。 hugo のセーフティーを外さないで、画像を自在に表示できるはずだと思っていたのと、shortcodes について調べているうちに、テーマ側に画像を表示するための、figure という shortcode を見つけたというのがある。 ./theme/テーマ名/layouts/shortcodes/figure.html の存在に気づくことが、figure 発見のきっかけであった。 Features / Mods | PaperModでは、どうやって画像を表示するのか、私は見つけられなかった。（chrome で figure と検索をかけても出てこないので、ドキュメント見てどうしたら画像を表示できるか、すぐわかる感じじゃなさそう。）ちなみに、かろうじて figure shortcode が、 FAQs / How To’s Guide | PaperMod にどうやったら画像を中心揃えにできるかという話題で載っていた。この記事の目的明らかによくないことを書き直す前回のhugoで画像を追加する 📷では、hugo のセーフティを外すなど、よくない方法を紹介してしまっているので、それをできる範囲で改めようと試みる。多分今回の方法であれば、セーフティを外さなくてもうまくいくはずであるが、試す気力もないので検証はまだしていない。放置記事を何とかするそもそも、下の引用文にも書いてあるように、hugoで画像を追加する 📷の続きをすぐ書こうと当時思っていたのだが、結局やらずに何カ月も下書きのまま放置してたので、再び戻ってくることにした。もっとよさそうな方法 hugo 内蔵の画像表示機能を使う。追記（2025年1月26日） Hugo 自体にはそんなものない。hugo の shortcodes というのを使って、自分で画像を表示するコードを書くか、テーマごとに用意された画像を表示するための shortcodes を使うことはできる。また、マークダウン形式でも画像を張り付けられるが、細かいスタイルの調整はできなかったと思う。さらなる追記 (2025年1月30日) 今回、新たな間違いに気づいたので、ここにもその記録置いときます。。。なんでドキュメント見て気づけなかったんだろうとそんな気持ちです。。。（実は間違っていたと思っていることはあっていた。。。）追記 (2025年1月30日) 今気づいたが、実は組み込みで、hugoに figure っていうのが入っていることに気づいた。hugo自体に画像を表示する機能がないというのは間違いで、気づけてないだけだった。 Figure | Hugo shortcode で画像を表示する選択肢テーマ付属の shortcode を使う自分で shortcode を適当に作る ...

テンプレ作成

つまずいたところ hugo でhtmlを拡張した形で書かれる、テンプレート？を作ろうとしたら、メンドウなことになった。 layouts の html ページの作成 hugo new layouts/baseof.html はできないことを知らなかったという。ちなみにこれを実行してしまうと一見うまくいったように見えるが、laytouts フォルダではなく、contentフォルダ配下にディレクトリやらファイルやらが生成されてしまうのでめんどくさくなる。ちなみにミスった時はこうなる # hugo new layouts/baseof.html Content "何かしらのパス/content/layouts/baseof.html" created . ├── archetypes ├── assets ├── content │ ├── _index.md │ └── layouts │ └── baseof.html ├── data ├── hugo.toml ├── i18n ├── layouts ├── public ├── res.txt ├── static └── themes 一部関係ない部分省略してここには書いてるので、layouts、contentフォルダだけ見てもらえればと思います。知らなかったこと hugoでのhtmlの書き方 hugo ではそのままhtmlを今までどおり書くことができるが、他のファイルやforループを行うこともできる。phpみたいなイメージに近いかも。Chat GPTに質問してみたらこんな感じになるらしい。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ .Title }}</title>  {{- partial "head_custom.html" . -}} </head> <body> <header>  {{- partial "header_custom.html" . -}} </header> <main>  {{- block "main" . }}{{ .Content }}{{ end -}} </main> <footer>  {{- partial "footer_custom.html" . -}} </footer>  {{- partial "footer_scripts.html" . -}} </body> </html> ちなみに公式ドキュメントはここら辺っぽい ...

hugoで画像を追加する 📷

　hugoとマークダウンで、画像を追加するのにてこずったので、適当に備忘録として残してみる。注意間違いの可能性（2025年1月26日追記）この記事は（というか今もそうかもだけど）作成当時とりあえず動くということを基準に Hugo をよくわかってなくて手探りで使ってたことやあんまりよくない方法を書いているので、かなり間違ったことを書いている可能性があります。ということで、別の記事に現状のやっていることをまとめなおすことにしました。 hugoで画像を追加する 📷の補足てこずったところマークダウン標準で画像は表示できるが、大きさを調整したり、スタイルを設定できない。 ![altText](imagePathFromStaticFolder) 非推奨自分が解決とした方法マークダウンにHTMLを書き、hugoのconfigに以下の設定を追加する。 <div style="display:flex; justify-content:center; margin:10px; "> <img style="margin:10px;" src="/imagePathFromStaticFolder" alt="追跡可能" width="200" /> </div> markup: goldmark: renderer: unsafe: true 動作の様子もっとよさそうな方法 hugo 内蔵の画像表示機能を使う。追記（2025年1月26日） Hugo 自体にはそんなものない。 hugo の shortcode というのを使って、自分で画像を表示するコードを書くか、テーマごとに用意された画像を表示するための shortcode を使うことはできる。また、マークダウン形式でも画像を張り付けられるが、細かいスタイルの調整はできなかったと思う。 hugoで画像を追加する 📷の補足追記 (2025年1月30日) 今気づいたが、実は組み込みで、hugoに figure っていうのが入っていることに気づいた。「hugo自体に画像を表示する機能がない」というのは間違いで、気づけてないだけだった。 Figure | Hugo 分かった事 hugoには複数のマークダウンエンジンを使うことができ、自分が調べた当時では、デフォルトで goldmark というレンダリングエンジンが使われている。また少なくとも、hugoで使われている goldmark の設定では、HTML要素を描画することは危険ということで、デフォルトでマークダウン中にHTMLが書いてあっても描画しないようになっていた。よって、マークダウン中のHTMLをhugoとマークダウンの組み合わせでは、マークダウン中のHTMLを表示したいなら、HTML要素を描画することを、hugo.toml等の設定ファイルで明示的に指定する必要がある。事の発端マークダウン形式で画像を追加すると大きすぎてしまう。 ![altText](imagePathFromStaticFolder) html形式で書いてみると、全然見えない。 ...