Razl-Dazl

eyecatch
© 2014 Steve Francia

Hugoで文章を中央に寄せる方法

Posted at — 2021-12-15

結局Hugoでサイトを生成することにしたのですが、文章を中央揃えにする際に少し手間取ったので、メモを残しておきます

Markdownのみでは中央揃えできない

見出しの通り、素のMarkdownでは中央揃えが出来ないので、Hugoの機能を利用することになります

HugoにはShortcodeというものが有り、MarkdownファイルからHTMLファイルを生成する際のカスタマイズを行うことができます

今回はShortcodeをカスタマイズし、記事作成時に特定の記法をすることによって、HTML生成時に中央揃えを行うようにします

1.Shortcode用のHTMLファイルを作成

your.domain.com/layouts/shortcodes 内に、任意の名前のHTMLファイルを作成

今回はcentering.htmlとします

HTMLで中央揃えにする際のコードを書きます

<div style="text-align:center">{{ .Get 0 }}</div>

{{ .Get 0 }}の部分は、Shortcodeでの0番目の引数を表します

引数に変数名(例えばtext)を指定したい場合は、以下のように書くこともできます

<div style="text-align:center">{{ .Get `text` }}</div>

2.記事でShortcodeの記法に従った記述を行う

Shortcodeの記法は以下のような感じです

先程決めたファイル名を使用して指定します

{{< centering "ここに中央揃えにしたい文字列を入力する">}}

また、先程のHTMLファイルで引数に変数名を指定した場合は以下のようになります

{{<centering text="ここに中央揃えにしたい文字列を入力する">}}

記事が出来上がったらhugo server -Dなりhugo -Dなりすれば、中央揃えになっている事が確認できると思います

本当は画像の切取りについても書く予定だったんですけど疲れたので後日に…

Author@zakuro

Mastodon: 396@vivaldi.net