a-blog cmsの「post include」機能に初挑戦しました

post includeとは

post includeとは、a-blog cmsの機能の一部です。a-blog cmsのフォーム送信後の結果を、ページを移動せずにAjaxを使用して表示することができます。

送信ボタンを押して検索結果を表示するpost includeのサンプル

この部分が置き換わります。

送信ボタンを押さずに検索結果を表示するpost includeのサンプル

post includeの書き方

post includeには2つのファイルが必要です。

  • 表示したい中身のみの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フォルダ内に入れます。私の場合はBID2の「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


この記事をシェアする

おすすめ記事

この記事のハッシュタグに関連する記事が見つかりませんでした。

このブログの著者

デザイナー

森田かすみ

マークアップエンジニアからWebプロダクトのデザイナーへ職種変更を行い、現在はUI/UXデザインを勉強中。
ストレス発散方法はかっぱのイラストを描くこと。