Hugoはデフォルトだとフッターなどに表示されるtagの先頭文字が大文字になってしまう。 たとえばtags=['hoge']と設定すると、Hugoの.GetTermsで取得したデータはHogeになっている。 ちなみに.Data.Termsだとそのまま取得できるっぽい。 個人的にはtagsの値は入力そのままで表示したいのでこれを回避する方法を調べた。 方法 hugo.yamlに以下の設定を追加するだけ。 titleCaseStyle: none 公式ドキュメントにもちゃんと書いてあるが、なかなか見つけられずにハマった。 デフォルトはapでnone以外にもchicagoとかgoとか色々ある。 ちなみに今回の記事はtagsの話として書いているが、categoriesに関しても同様の設定が適用されているはず（自分はcategoriesを使っていないので未確認）。
Go製のtcardgenというツールを使って、Hugoの各記事にOGP画像を設定する方法を紹介する。 今回実際に生成した画像は以下の通り。 tcardgenをインストールする tcardgenの公式ドキュメントを参考にインストールする。 今回はHomebrewを使ってインストールした。 brew install Ladicle/tap/tcardgen tcardgen用のディレクトリを作成する tcardgen用のフォントやテンプレートや設定ファイルはHugoのビルド時には不要なのでなるべくHugoからは切り離したい。 そこで今回はトップレベルに/tcardgenというディレクトリを作成してそこにtcardgenに関連するファイルをまとめた。 トップレベルのディレクトリ構成は以下の通り。 . ├── README.md ├── archetypes ├── assets ├── content ├── hugo.yaml ├── layouts ├── public ├── static ├── tcardgen └── themes フォントをダウンロードする tcardgenの公式ドキュメントを参考にして、均等フォントをダウンロードした。 今回はKintoSans-Bold.ttf、KintoSans-Medium.ttf、KintoSans-Regular.ttfだけを/tcardgen/fontsに放り込んだ。 後述する設定ファイルで他の種類のフォントを指定したい場合はそれらのフォントも同様に/tcardgen/fontsに放り込む。 テンプレートを作成する OGPのテンプレートを作成して、/tcardgen/template.pngとして保存した。 Canvaを使うと簡単にできた。 今回は以下のようなテンプレートを作成した。 tcardgenの設定ファイルを作成する フォントの色や場所などを変更するための設定ファイルを作成した。 今回は公式ドキュメントのtemplate3.config.yamlを参考にして以下のような設定ファイルを作成した。 template: config.yaml title: start: px: 125 py: 185 fgHexColor: "#000000" fontSize: 72 fontStyle: Bold maxWidth: 970 lineSpacing: 10 category: enabled: true start: px: 120 py: 110 fgHexColor: "#555555" fontSize: 42 fontStyle: Regular info: enabled: true start: px: 220 py: 480 fgHexColor: "#555555" fontSize: 38 fontStyle: Regular separator: " | " timeFormat: "2006-01-02" tags: enabled: true limit: 0 start: px: 1080 py: 110 fgHexColor: "#FFFFFF" bgHexColor: "#545454" fontSize: 32 fontStyle: Medium boxAlign: Right boxSpacing: 6 boxPadding: top: 6 right: 10 bottom: 6 left: 10 OGP生成用のシェルスクリプトを作成する 毎回tcardgenのコマンドを打つのは面倒なので、シェルスクリプトを作成して一発でOGP画像を生成できるようにする。 ...
Hugoはデフォルトだとリンクが同じタブで開かれる。 デフォルトの設定を変更し、外部リンクを新規タブで開くようにする方法を紹介する。 リンク用のHTMLを作成 /layouts/_default/_markup/render-link.htmlを作成する。 Hugoではリンク用のHTMLは/layouts/_default/_markup/render-link.htmlに定義すると決まっているので、一文字も違わないように/layouts/_default/_markup/render-link.htmlを作成する。 実装は以下。 {{- /* Forked from https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/_markup/render-link.html At 2025-03-25 Added target="_blank" to external links */}} {{- $u := urls.Parse .Destination -}} {{- $href := $u.String -}} {{- if strings.HasPrefix $u.String "#" -}} {{- $href = printf "%s#%s" .PageInner.RelPermalink $u.Fragment -}} {{- else if and $href (not $u.IsAbs) -}} {{- $path := strings.TrimPrefix "./" $u.Path -}} {{- with or ($.PageInner.GetPage $path) ($.PageInner.Resources.Get $path) (resources.Get $path) -}} {{- $href = .RelPermalink -}} {{- with $u.RawQuery -}} {{- $href = printf "%s?%s" $href . -}} {{- end -}} {{- with $u.Fragment -}} {{- $href = printf "%s#%s" $href . -}} {{- end -}} {{- end -}} {{- end -}} <a href="{{ $href }}" {{- if strings.HasPrefix $href "http" }} target="_blank" rel="noopener" {{- end }} {{- with .Title }} title="{{ . }}" {{- end }}>{{ .Text }}</a> {{- /**/ -}} HugoのGitHubからリンクの実装をコピペして {{- if strings.HasPrefix $href "http" }} target="_blank" rel="noopener" {{- end }} を追加しただけである。 この実装ではhrefがhttpで始まっていたら外部URLだと判定するようにしている。 リンクを使う 上記の実装を終えたら、普通にリンクを使うだけで外部リンクが新規タブで開くようになる。 [外部リンク](https://example.com)
Hugoにはショートコードという機能がある。 Reactのコンポーネントみたいな感じで、予め定義したHTMLに引数経由で情報を注入することができる。 今回は以下のようなアフィリエイト用のショートコードを作成したので、その作り方を紹介する。 #PR FACTFULNESS 10の思い込みを乗り越え、データを基に世界を正しく見る習慣 楽天 Amazon 要件定義 ショートコードの引数として以下を設定した。 rakuten_href: 楽天リンクのURL amazon_href: AmazonリンクのURL src: 画像のURL title: 本の名前 ショートコード用のHTMLを作成 /layouts/shortcodes/affiliate.htmlを作成する。 <div id="affiliate_wrapper"> <div id="affiliate_pr">#PR</div> <img src='{{ .Get "src" }}' id="affiliate_image" alt='{{ .Get "title" }}'/> <p id="affiliate_title">{{ .Get "title" }}</p> <div id="affiliate_link_wrapper"> <a href='{{ .Get "rakuten_href" }}' target="_blank" id="affiliate_rakuten"> 楽天 </a> <a href='{{ .Get "amazon_href" }}' target="_blank" id="affiliate_amazon"> Amazon </a> </div> </div> 本当はidではなくclassを使ったほうが良いと思うが、テーマのCSSに詳細度で負けることがあるのでidを使っている。 ショートコード用のCSSを作成 カスタムCSSに関してはHugoでサポートされているわけではなく、テーマごとにサポートされているっぽい。 たとえばPaperModだと、/assets/css/extendedにCSSファイルを追加すると自動でCSSが読み込まれる。 もしテーマ側でカスタムCSSがサポートされていない場合は自分でテンプレートを編集してheadタグ内でCSSを読み込んだりする必要がある。 もしhoverのような疑似クラスを利用しないなら、style属性に直接スタイルを書く方が楽かもしれない。 ということでPaperModなら/assets/css/extended/affiliate.cssを作成する。 #affiliate_wrapper { display: flex; flex-direction: column; align-items: center; row-gap: 10px; padding-top: 10px; padding-bottom: 20px; width: 252px; background-color: white; border: 1px solid #95a5a6; border-radius: 10px; box-shadow: none; margin-bottom: 20px; } #affiliate_pr { width: 220px; color: #0b80a5; font-size: 14px; text-align: right; } #affiliate_image { max-width: 240px; height: 240px; margin: 0; padding: 0; border-radius: 0; } #affiliate_title { max-width: 200px; color: #1f1f1f; font-size: 14px; margin: 0; padding: 0; } #affiliate_link_wrapper { width: 210px; display: flex; justify-content: space-between; align-items: center; } #affiliate_link_wrapper a { width: 100px; height: 30px; border-radius: 18px; font-size: 14px; line-height: 30px; text-align: center; box-shadow: none; } #affiliate_rakuten { background-color: #bf0000; color: white; } #affiliate_rakuten:hover { background-color: #990000; } #affiliate_amazon { background-color: #ffa41c; color: black; } #affiliate_amazon:hover { background-color: #e68a00; } ショートコードを呼び出す {{< affiliate rakuten_href=https://a.r10.to/hNab5q amazon_href=https://amzn.to/4hG1NVS src=https://hbb.afl.rakuten.co.jp/hgb/46510050.5165b4d2.46510051.bf2ae0c3/?me_id=1278256&item_id=17966596&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Frakutenkobo-ebooks%2Fcabinet%2F7708%2F2000007017708.jpg%3F_ex%3D240x240&s=240x240&t=pict title="FACTFULNESS 10の思い込みを乗り越え、データを基に世界を正しく見る習慣" >}} {と<の間にスペースを入れてしまって20分ほど溶かしたので注意。 ...