tamlog

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

a-blog cms - レイアウト機能を使ったテーマを表示してみる

スポンサーリンク

このエントリーは、a-blog cms Advent Calendar 2017の4日目のエントリーです。

adventar.org

 

いやー先日のキャンプ楽しかったですね。

飛び入りで少し話させて頂きましたm(_ _)m

いやー楽しかった^^

 

f:id:tamushou:20171202105944p:plain

 

発表の中でも質問させてもらったのですが実際にレイアウト機能を使っている方は少ない印象でした。良い機能だけに残念ですね。

ですので、数回に分けて説明出来ればと思います(多分)

 

公式のドキュメントはこちら。 

レイアウト機能 | ドキュメント | a-blog cms developer

レイアウト機能 | オンラインマニュアル | a-blog cms

 

まずはレイアウト機能がどんなものか触れて頂ければと思います。

普段使っている感じのレイアウトベーステーマを公開しました。

良かったら設定して試してみてください。

 

http://starterkit.masizime.com/

github.com

  

 

では、早速使い方の説明です。

基本仕様

基本的には標準テーマをベースに作っています。

メタ情報やタイトルなど主要なカスタムフィールドはsite2016を流用。

 

レイアウト機能はレイアウトIDが必要になります。

基本のレイアウトIDは「layout_index」と 「layout_entry」とします。

で、サイト作っているとカテゴリ毎表示を変更したい場合がありますよね。

その場合は「 layout_index_news」や「 layout_entry_news」などCIDを追加したレイアウトIDを作成するようにします。

さらに、レイアウトIDはカテゴリ編集画面から変更可能にしています。

これはグローバル変数の拡張が必要です。

そして、よく使う物パーツはレイアウトのパーツにまとめていきます。

 

と、まぁこういった感じですが、実際に触ってもらうのが良いですね。

早速テーマを設定してみましょう。

 

テーマを設定する 

カスタムフィールドのグローバル変数化

レイアウトIDを切り換えるのに使用します。

Advent Calendar 1日目で牧田さんが書かれているのが分かりやすいですね。

こちらを参考にm(_ _)m

www.maki-o.net

 

グローバル化したい変数はこちら。

 if( BID ){ 
$Field = loadBlogField(BID);
$globalVars->setField('FIELD_LAYOUT_TOP',$Field->get('layoutTop') );
}
if( CID ){
$Field = loadCategoryField(CID);
$globalVars->setField('FIELD_LAYOUT_INDEX',$Field->get('layoutIndex') );
$globalVars->setField('FIELD_LAYOUT_ENTRY',$Field->get('layoutEntry') );
}
 

組み込みjsなど調整

今回のテンプレートは「viewing」を使わないので下記の通りコメントアウトします。

もしくはaタグに「class="js-viewing-indelible"」を追加するでも良いですね。

今はコメントアウトして次へ進みましょう。

 

リファレンス | ドキュメント | a-blog cms developer

/js/config.js

// viewing
// viewingMark: 'a.js-viewing-receptor', // 1.3.0 未満のバージョンからアップデートする場合には 'a' と指定してください。
// viewingId: 'viewing',
// viewingClass: 'viewing',
// viewingEraseMark: 'a:not(.js-viewing-indelible)', // display:blockの要素は取り除かれません
// viewingReplacement: '',
// viewingRemoveAttr: ['href', 'charset', 'type', 'hreflang', 'rel', 'rev', 'target'],
// viewingNonTarget: ['block', 'inline-block'],
 

 
データのインポート

ブログ単位でインポートします。

データはテーマ内「bin/starterkit/starterkit.yaml」に置いていますので

CMSのディレクトリ「/setup_hogehoge/bin/starterkit/starterkit.yaml」に配置。


a-blog cmsのデータをブログ単位でインポートする | データ管理 | ドキュメント | a-blog cms developer

 

 インポート後にサイトを表示してみます。

次の画面が表示できれば成功です。

 

f:id:tamushou:20171203015147p:plain

うまく表示できたでしょうか?

ではトップページから見ていきましょう。

 

トップページのadminバーを見てみる

f:id:tamushou:20171203002056p:plain

おや、トップにレイアウト機能じゃないですね。。

実はトップはレイアウト機能をオフしてます。紛らわしくてごめんなさい><

トップでレイアウト機能を使う場合は下記を修正してください。

今回はこのままにして次へ進みましょう。

starterkit/top.html

<!--#include file="/include/top.html" -->

<!--#include file="/include/layout_top.html" -->


 

次に物件情報のページを見てみましょう。

  

f:id:tamushou:20171203002051p:plain

 

adminバーに「indexの固定レイアウト」などがあると思います。

これはレイアウト機能を使っている時に表示させています。

indexの固定レイアウト 
現在表示中のレイアウト: 「 layout_index 」
レイアウトを変更する

内容はこんな感じ

indexの固定レイアウト  → カテゴリ編集ページにリンク、レイアウトIDを変更できます
現在表示中のレイアウト → 現在表示しているレイアウトIDほ表示
レイアウトを変更する → レイアウト編集モードにリンク、レイアウトの配置を変更します

 

レイアウトIDを変更してみる

次はニュースページを見てください。

ニュースはレイアウトIDを変更しているので、他のページと違う表示になっています。

現在表示中のレイアウトも 「 layout_index_news 」となっています。

 

f:id:tamushou:20171203003009p:plain

 

「index毎のページレイアウト」をクリックして、カテゴリ編集画面を表示します。

「一覧ページのレイアウト機能設定」があり、ここを変更するとIDがわかります。

試しに「layout_index.html を使用する」に変更してください。

他の一覧ページと同じ表示になると思います。

 

f:id:tamushou:20171203154743p:plain

 

レイアウトを変更してみる

最後に、レイアウトを変更してみましょう。

「レイアウトを変更する」をクリックするとTemplatesとPartsが配置されています。

Templatesが枠で中にPartsを置くイメージです。

Partsはよく使うモジュールとかを置いています。

なにか他のパーツに変更してみてください。保存を押すと表示が変更されていると思います。

新たにモジュールを追加する場合は「モジュール」から追加するイメージですね。

f:id:tamushou:20171203005210p:plain

  

さて、テーマの表示から、レイアウト機能で変更を見てみました。

こういった感じでレイアウト機能を使って設定を進めて行きます。

 

どうですか?使っていくうちにだんだんと便利な気がしてきませんか^^

 

最後になりますが「adminバー」をカスタマイズしていたのを忘れていました。。

adminバー系のカスタマイズはうぇびんさんの記事が最高なので参考にしていただければm(_ _)m 

デフォルトの表示はデモサイトにログインしてらうと感じがつかめると思います。

https://demo.a-blogcms.jp/layout.html 

 

qiita.com

 

 以上、「レイアウト機能を使ったテーマを表示してみる」でした。