a-blog cmsの「post include」機能に初挑戦しました
post includeとは
post includeとは、a-blog cmsの機能の一部です。a-blog cmsのフォーム送信後の結果を、ページを移動せずにAjaxを使用して表示することができます。
送信ボタンを押して検索結果を表示するpost includeのサンプル
この部分が置き換わります。
送信ボタンを押さずに検索結果を表示するpost includeのサンプル
post includeの書き方
post includeには２つのファイルが必要です。
- 表示したい中身のみのHTMLファイル
- 表示させるテンプレートのHTMLファイル
表示したい中身のHTMLの書き方
サンプルでは、「searchResult.html」というファイルを用意し、モジュールIDは「searchResult」にしました。
<!-- BEGIN_MODULE Entry_List id="searchResult" -->
<ul>
<!-- BEGIN entry:loop -->
<li><a href="{url}">{title}</a></li>
<!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->
保存先
そして用意したこのファイルをincludeフォルダ内に入れます。私の場合はBID２の「blog」テーマの内容を出したかったので、「blog」テーマの中のincludeフォルダにいれました。
モジュールの設定
Keywordにチェックを入れる
表示させるテンプレートのHTMLの書き方
送信ボタンを押して検索結果を表示するpost includeのHTML
<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/searchResult.html" />
<input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>
<div id="jsChangeContents">
<p>この部分が置き換わります。</p>
</div>
送信ボタンを押さずに検索結果を表示するpost includeのHTML
<form action="" method="post" class="js-post_include-ready">
<input type="hidden" name="keyword" value="勉強会" size="15" />
<input type="hidden" name="tpl" value="blog/include/searchResult2.html" />
<input type="hidden" name="bid" value="%{BID}" />
<input type="submit" name="ACMS_POST_2GET" />
</form>
自分メモ
このときにBID1以外にファイルを置いた場合、themesのパスから記述しないとBID1のブログのURLになる。(「blog」テーマ内に置いた場合 : blog/include/searchResult.html）
「送信ボタンを押さずに検索結果を表示するpost include」では、
<input type="hidden" name="keyword" value="勉強会" size="15" />
の記述で、キーワードを指定できる。value=""の中身を変えるだけ。
この記事を書くために参考にしたサイト
もっと詳しく知りたい方はa-blog cmsのサイトを見てください〜！
ここでは紹介してないpost include
