baseof.htmlの作成 その5とまとめ

こんにちはnasustです。前回の続きbaseof.htmlの解説をします。

footer.htmlはコピーライトを表示するだけなので短いです。 nowという新しい関数が現れたので解説します。

<span class="a-copy-right">
    Copyright {{ now.Year }}
    {{ with .Site.Params.author}}{{ . }}{{ end }}
    All rights reserved.
</span>
html

now

nowは現在時刻を取得する関数です。テンプレートで使用している.Yearですが、 Hugoのドキュメントでは説明されていません。

time - GoDocの関数のドキュメントで説明されています。

see also: now | Hugo

まとめ

以上でbaseof.htmlの解説は終わりました。

シンプルなブログであるのでbaseof.htmlで、コンテンツ部分以外の全てを書けました。

baseof.htmlで登場した関数は全て解説しました。関数以外のTipsなど最後に解説します。

baseof.htmlテンプレート

HTML5で作成しました。まあ現在は全てのブラウザでサポートされているので、 これ以外の選択肢は無いですね。

CSSのクラス名はBEMとAtomicデザインを採用しています。

BEMを採用した理由はメンテナンスしやすいからです。

通常、要素の構造を指定したセレクターを駆使してスタイル適応します。 その為、子要素全体にセレクターが影響する場合あります。 子要素のスタイル適用する場合は、その影響を上書きするか、そのまま利用して実現します。

後でスタイルをメンテナンスする場合は、その影響でやり難い事があります。

BEMであればクラス名以外のセレクターを利用しないので影響がありません。 また明示的にクラス名を全て書くので、後でカスタマイズでも把握しやすいです。

それとBEMであれば、セレクターの構造を解決をしないのでブラウザのレンダリングが速いです。

AtomicデザインとBEMを組み合わせることで、さらにメンテナンス性が上がります。 BEMのクラス名にm-はモジュール、a-はパーツを表すプレフィクスを付加することにより、 分かりやすくしています。

まあ、規模は小さいので共通パーツはリンクやボタンぐらいしか無いですね。

head_og.html部分テンプレート

Twitterやfacebook用のタグも書くか迷いましたが、 ogpタグだけでも問題ないのでシンプルにしました。

head_style.html部分テンプレート

BEMを採用するので、BEMが書きやすくなるのと利便性からSCSSを採用しました。

header.html 部分テンプレート

シンプルなブログテンプレートなのでメニューは使わないと思いますが、 後でメニュー追加できるように仕組みを用意しました。

right_aside.html 部分テンプレート

階層型カテゴリーはそれなりに需要があると思いますので用意しました。

恐らくテンプレートで一番複雑な部分です。

欠点はサブセクションでカテゴリーを管理しているので、 1つしか所属出来ないことですね。しかしタグも登録できるので問題無いと思います。

次回はlist.htmlの解説をします。

prevnext