Hugo

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） この記事を作った動機 markdown のテンプレートを作るにおいて、テンプレートを作ったついでに、そのテンプレート内で初めて真面目に hugo の機能を使った気がするので次いでにその例を記録するだけ。ただの自己満と言われればそうなのかもしれない。 内容 layouts/shortcodes/Images/MMD/Data.html {{ $folder := .Get "folder" }} <ul> {{$path := printf "static/Images/MMD/%s" $folder}} {{range readDir $path}} {{$filepath := printf "%s/%s" $path .Name}} {{$filepath := replace $filepath "static" ""}} {{if strings.Contains .Name ".blend"}} <li> <a download href="{{$filepath}}">{{.Name}}</a> </li> {{end}} {{if strings.Contains .Name ".zip"}} <li> <a download href="{{$filepath}}">{{.Name}}</a> </li> {{end}} {{end}} </ul> archetypes/Images/MMD.md +++ date = '{{ .Date }}' draft = false title = '{{ replace .File.ContentBaseName "-" " " | title }}' +++ ## data \{\{<Images/MMD/Data folder="\{\{.File.ContentBaseName}}">}} ## Images and Videos \{\{<Images/MMD/ShowImageAndVideo folder="\{\{.File.ContentBaseName}}">}} readDir strings.Contains replace 参考にしたサイトとか https://gohugo.io/functions/os/readdir/#article https://gohugo.io/functions/strings/contains/#article https://gohugo.io/functions/strings/replace/#article ...

この記事を書いた動機 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 +++ 補足（2025年5月8日） このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） ├── archetypes │ ├── Images │ │ └── MMD.md │ ├── default.md │ ├── posts.md │ └── think.md Leaf bundles hugo new --kind Images/MMD content/Images/MMD/DIYUSI.md archetypes/Images/MMD.md +++ date = '{{ .Date }}' draft = false title = '{{ replace .File.ContentBaseName "-" " " | title }}' +++ ## data \{\{<Images/MMD/Data folder="\{\{.File.ContentBaseName}}">}} ## Images and Videos \{\{<Images/MMD/ShowImageAndVideo folder="\{\{.File.ContentBaseName}}">}} https://gohugo.io/content-management/archetypes/#specify-archetype ...

この記事を書いた動機 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 のセーフティーを外さないで、画像を自在に表示できるはずだと思っていたのと、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> <!-- Additional meta information or stylesheets can be added here --> {{- partial "head_custom.html" . -}} </head> <body> <header> <!-- Header content goes here --> {{- partial "header_custom.html" . -}} </header> <main> <!-- Content from individual pages will be inserted here --> {{- block "main" . }}{{ .Content }}{{ end -}} </main> <footer> <!-- Footer content goes here --> {{- partial "footer_custom.html" . -}} </footer> <!-- Additional scripts or footer scripts can be added here --> {{- partial "footer_scripts.html" . -}} </body> </html> ちなみに公式ドキュメントはここら辺っぽい ...

　hugoとマークダウンで、画像を追加するのにてこずったので、適当に備忘録として残してみる。 注意 間違いの可能性 （2025年1月26日追記） この記事は（というか今もそうかもだけど）作成当時とりあえず動くということを基準に Hugo をよくわかってなくて手探りで使ってたことやあんまりよくない方法を書いているので、かなり間違ったことを書いている可能性があります。 ということで、別の記事に現状のやっていることをまとめなおすことにしました。 hugoで画像を追加する 📷の補足 てこずったところ マークダウン標準で画像は表示できるが、大きさを調整したり、スタイルを設定できない。  非推奨 自分が解決とした方法 マークダウンに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等の設定ファイルで明示的に指定する必要がある。 事の発端 マークダウン形式で画像を追加すると大きすぎてしまう。  html形式で書いてみると、全然見えない。 ...