【メモ】js-post_includeを使用してエントリーをランダムに表示させる
postインクルードを下記のように記述して
<form action="" method="post" class="js-post_include-ready"> <input type="hidden" name="tpl" value="include/relationEntryList.html" /> <input type="hidden" name="ACMS_POST_2GET" /> </form>
relationEntryList.htmlをJSで読み込ませて表示をさせていますが
<div>
<h3>ランダムにエントリー表示</h3>
<!-- BEGIN_MODULE Entry_List id="relationEntryList"-->
<ul>
<!-- BEGIN entry:loop -->
<li><a href="{url}">{title}</a></li>
<!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->
</div>
このモジュールEntry_ListはモジュールIDを付与して表示設定でランダム表示にしています。
当然キャッシュONにしておけばjs-post_includeを使ってもrelationEntryList.htmlがキャッシュされるのでアクセスが発生するたびにランダムでエントリー表示をすることはできません。
しかし、下記のように記述を追加すれば、ランダム表示が可能になります。
<form action="" method="post" class="js-post_include-ready"> <input type="hidden" name="hash" value="Math.random()" class="js-post_include-eval_value" /> <input type="hidden" name="query[]" value="hash" /> <input type="hidden" name="tpl" value="include/relationEntryList.html" /> <input type="hidden" name="ACMS_POST_2GET" /> </form>
必要なタグ
<input type="hidden" name="hash" value="Math.random()" class="js-post_include-eval_value" /> <input type="hidden" name="query[]" value="hash" />
開発の方からいただいた解説。
class="js-post_include-eval_value" というクラスが付いている入力要素は
その値をjavascriptのプログラムコードとして扱われます。
<input type="hidden" name="hash" value="Math.random()" class="js-post_include-eval_value" />
は実際にはMath.random()というプログラムが実行されます。
これは0から1までのランダムな実数を生成するコードになります。
ですので、フォームから実際に送信されるデータは
のようになります。
フォームから送信されるデータの中にランダムな文字列が含まれいるため、
アクセスするたびにキャッシュされるページのURLが異なります。
http://example.com/?hash=0.8770308238454163
http://example.com/?hash=0.17486891080625355
というように、毎回異なるURLでアクセスされます。
キャッシュされなくなるわけではないですが、同じURLにアクセスされることはなくなりますので
キャッシュが使われることがありません。
どこかでまた使う機会があるかもしれないので忘れないようにしないと。。
ということで以上、私の作業メモでした。
注)js-post_include-eval_valueについては近日中に公式サイトのマニュアルにも情報が公開されるようです。
- tag
- a-blogcms
