© 2014 Steve Francia
Hugoで文章を中央に寄せる方法
結局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
なりすれば、中央揃えになっている事が確認できると思います
本当は画像の切取りについても書く予定だったんですけど疲れたので後日に…