読者です 読者をやめる 読者になる 読者になる

tamlog

主にwebのフロント回り たまに登山

スタイルガイドとa-blog cmsの連携

スポンサーリンク

この記事は、 a-blog cms Advent Calendar 2015 の8日目の記事です。 cssスタイルガイドとa-blog cmsの連携について紹介します。

・CSSスタイルガイドとは? ・デモ ・組込み方法 ・書き出し ・a-blog cms設定 ・その他 ・まとめ

CSSスタイルガイドとは?

・サイト内で使用されているスタイルの一覧表・ドキュメントのようなもの ・作成することによりサイト内の一貫性・メンテナンス性などが保たれる

最近は Atomic Designなどよく耳にするようになりました。 このようなスタイルガイドを生成するジェネレーターは複数ありますが、今回はhologramを使用します。 hologramの詳細については割愛します。詳しくはCodeGrid(有料)がおすすめです。

デモ

先に完成はこちら http://www.masizime.com/acms/docs/ 今回はデモなので公開していますが、通常スタイルガイドのカテゴリは非公開です。 こうすることで管理者のみスタイルガイドを見ることができます。

組込み方法

まず、カスタマイズするテーマとスタイルガイドを準備してください。 次に、スタイルガイドのテンプレートをテーマ内に作成していきます。

すでにあるテーマ直下のentry.htmlを使い、スタイルガイドのテンプレートを修正していきます。

【entry.html】 entry.html

【_header.html】 _header.html

【_footer.html】 _footer.html

スタイルガイドのテンプレートにa-blog cmsのインクルード文を書くことで、 スタイルガイドのファイルはa-blog cmsのテンプレートファイルと同じ感覚で扱えるので修正がらくちんです。

書き出し

docsが書き出されるようにconfig.ymlを設定

$ bundle exec hologram _hologram/config.yml


コンパイル後にdocsフォルダが作成され、スタイルガイドとインクルード文の入ったテーマファイルが書き出されます。 a-blog cmsはhtmlファイルのまま動くのであとはそのままテーマファイルとして使用します。

a-blog cms設定

最後に管理画面からdocsカテゴリーを非公開で作成するとokです。

これで、スタイルガイドをa-blog cmsのテンプレートに取り込みおわりました。 非公開で表示可能になります。

その他

もう一つ、スタイルガイドの書き出し時に僕がいつもやっていることを書きます。 使用しているカスタムフィールドの値、モジュールの値、カスタマイズメモなどを残すことです。 後で見返したいときなど一覧で確認できるので便利です。 http://www.masizime.com/acms/docs/acms-customfield.html cms側にはダミーのユニットの記述を入れています。 http://www.masizime.com/acms/docs/sample1.html

やり方は、 sass(css)側の記述にインクルード文を書いてテンプレート側で修正管理しています。 こうすることで追加のたびにスタイルガイドをコンパイルしなくていいのでらくちんです。 お試しあれ。

【part-acms-customfield.scss】

【テーマ内のincludeフォルダ】

まとめ

スタイルガイドは、運用後の追加作業などの更新が面倒になりがちですが テーマに取り込めば他のテンプレートと同じ感覚で対応できます。 また、サイトのパーツを確認したい時やユニットで新規ページを作りたい時に便利です。 使用しているカスタムフィールドの値など残しておけば後で更に使いやすいです。 更新・運用作業が楽になるのではないでしょうか。

今回使用したテーマをGitHubに公開しました。 レイアウトモジュールとユニットで作成しているシンプルなテーマです。 普段僕が使ってるユニット(コンフィグ設定済み)インポートファイルも同封していますので、ベースとして使いやすいと思います。よろしければどうぞ^^ http://www.masizime.com/acms/ https://github.com/tamshow/masizime.themes.site2015