a-blog cms LIVE Vol.3 の「トップページでのページャー問題とその解決法を初心者に紹介」で紹介した内容をブログに残しておきます。

ウェブサイトのトップページのコンテンツとして、上記のように2つのモジュールに対してページャーを用意するような実装については、a-blog cms では残念ながらできない実装となります。

その理由としては、どちらのモジュールのページャーをクリックしても、 https://domain.com/page/2/ のような URL となり、2つのモジュールが次のページに進んでしまいます。

通常は、以下のように検索フォームを作るところを

<form action="" method="post">
  <input type="text" name="keyword" value="" size="15" />
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

form タグに class="js-post_include" を追加し、実行後の表示する際に必要な条件と、テンプレートを指定する事でページの遷移無しに表示させることができるようになります。

<form action="" method="post" class="js-post_include" target="#jsChangeContents">
  <input type="text" name="keyword" value="" size="15" />
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="hidden" name="tpl" value="include/entry/body.html" />
  <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

上記は、検索フォームのサンプルでページャーではありませんが、ページャーとして実装すると以下のような表示になります。

以下のコードを利用する事で、次に表示させたいページの情報をモジュールに渡すことができます。

<!-- BEGIN forwardLink -->
 <input type="hidden" name="page" value="{forwardPage}" />
<!-- END forwardLink -->

こんなフォームがあった際のページャーのサンプルを共有しておきます。

ポイントとしては、検索結果を表示させるには Field_Search モジュール を利用すること。チェックボックスの条件については、配列としてマークアップする必要がある。 name="blood" ではなく name="blood[]" と書き、blood:loop ブロックを用意し、複数件データがあれば複数件のタグを生成するように実装すること。

<!-- BEGIN forwardLink -->
<form action="" method="post" class="js-post_include" style="text-align: center" >
  <input type="hidden" name="tpl" value="/include/member/summary-custom-post_include-more.html" />
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="hidden" name="page" value="{forwardPage}" />
 
  <!-- BEGIN_MODULE Field_Search -->
  <input type="hidden" name="namae" value="{namae}" />
  <input type="hidden" name="field[]" value="namae" />
  <input type="hidden" name="namae@operator" value="lk" />
 
  <input type="hidden" name="gender" value="{gender}" />
  <input type="hidden" name="field[]" value="gender" />
 
  <input type="hidden" name="pref" value="{pref}" />
  <input type="hidden" name="field[]" value="pref" />
 
  <!-- BEGIN blood:loop -->
  <input type="hidden" name="blood[]" value="{blood}" />
  <!-- END blood:loop -->
  <input type="hidden" name="field[]" value="blood" />
 
  <!-- END_MODULE Field_Search -->
 
  <input type="submit" name="ACMS_POST_2GET" value="もっと見る" class="acms-admin-btn acms-admin-btn-large" />
</form>
<!-- END forwardLink -->

初心者でない人だったとしても、Ver. 2.11.25 以降は、新規にインストールすると tplコンテキスト の設定が無効になるような設定になりました。 「ポストインクルードの準備」が必要になったということだけ覚えておいてください。

• ポストインクルードの準備

詳しくは、実際の動画で説明をご覧ください。 全部で 26分間くらいの内容になっております。

継承機能を使うことで記述量が減りテーマをわかりやすく、シンプルに管理しやすくできます。

使用例

@section(header)  
  <header>...省略</header>
@endsection  

@section(main)  
  <h2>継承元のコンテンツ</h2>  
@endsection

@section 要素

ポイントは @section(セクション名) と @endsection で 囲んだブロックが継承できる範囲になります。 継承しそうなところを @section で囲みます。

@extends要素

@extends要素 を使うことで、テンプレートを継承することが出来ます。 上記のテンプレートを継承してみます。

@extends(/layout/base.html)

@section(main)
  <h2>継承したメインのコンテンツ</h2>
@endsection

表示されるHTML

<header>...省略</header>

<h2>継承したメインのコンテンツ</h2>

どうでしょうか？ 継承したテンプレートでは、メインのコンテンツしか記述していないのに、最終的に表示されるHTMLには継承元の情報も出力され、書き換えたいところだけ書き換えることが出来ました。

継承は、何回でも検証できますので、継承したテンプレートをさらに別テンプレートで継承するといった使い方もできます。

親テンプレートの利用

@section を使う事で、親テンプレートの要素を書き換える事ができるようになりましたが、全て置き換えてしまうので不便な場合があります。例えばJavaScriptの読み込みなどです。

全体で利用するJavaScriptは親テンプレートで読み込んでおきますが、継承したテンプレートのみでしか使わないJavaScriptを読み込みたい場合などがあります。

親テンプレート

@section(head-js)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js" charset="UTF-8"></script>
@endsection

子テンプレート

@section(head-js)
@parent <!-- ここに親の@section(head-js)内が挿入される -->
<script src="/js/example.js" charset="UTF-8"></script>
@endsection

@parent 要素

上記のように @parent要素を @section内で使うことにより、親テンプレートを参照できるようになります。更に親のテンプレートを参照する場合は、@@parent のように @の数を増やすことで可能です。

テンプレートの継承機能を使ってテーマを作ると、テンプレートを複数のレイヤーに分けることができ、変更箇所のみテンプレートに書けばいいので、シンプルで分かりやすく、共通箇所も共有できるので、保守しやすテンプレートになります。