手前味噌ですが、本日また自分用のテンプレートのアップデートを行いました。
順番としては3段階で、
- ディレクトリ階層・ファイル名の整理
- jsonで管理するパラメータの整理
- gulp-json-to-sassを使って、ejs, js, scssの3つで共通のjsonの値を使いまわせる
ようにしました(標準ではjsに値は参照させていませんが)。
これによって何がうれしいかと言うと、主に次の2点。
- 色の一元管理
- ブラウザのアドレスバーのところに色を付ける
theme-color
の値をjsonからejsに渡すのと、jsonからscssに変数で落とし込むことで一元管理し、色の変更漏れを防ぐ
- ブラウザのアドレスバーのところに色を付ける
- ヘッダナビゲーションバーの高さを共有
- Bootstrap3ベースなので、よくナビゲーションバーの
navbar-fixed-top
をよく使います。この場合、キービジュアルの高さをナビゲーションバーの高さも含めて考えるかどうかのときに、同じ値を参照できた方が修正漏れを防げます。また、ejsというかhtmlでもdata-offset
の値として参照していたりするので、多方面で流用が効くと思われます。
- Bootstrap3ベースなので、よくナビゲーションバーの
ということで、個人的にはやや大きめの修正だったので取り上げました。