Custom Template カスタムテンプレート

Since ver.1.0, this addon uses underscore.js for templating.

underscore.js uses <%- XXX %>, where XXX will be a variable name, will be replaced by a data.

For exmple, <%- url %> will be replaced by "http://example.com/sample-page".

 

blocks/recent_views/templates/withimage/view.php

<script id="recent_views<?php echo $bID;?>" type="text/javascript">// <![CDATA[
<div class="recent_views_image"><img src="<%- thumbnail %>"> </div>
<div class="recent_views_text"> <a href="<%- url %>" target="_self"><%- title %></a>
<p><%- description %></p> </div>
// ]]></script>

 

variables for template

thumbnail
url
title
description

 

div.recent_views data attributes allow some setting.

data-noimg : a image when the page has no thumbnail.

data-title : the title setting. headertitle - text in the <head><title>. pagetitle - pagetitle you have inserted in composer.

バージョン1.0以降では、本アドオン(Recently Viewed Page: 最近閲覧したページ)は underscore.js テンプレートを使用している。

underscore.js は <%- XXX %> といった書式を使う。ここで XXX は変数名で、表示するときは実際のデータに置き換えられる。

例えば、 <%- url %> は、 "http://example.com/sample-page" に置き換えられる。

カスタムテンプレート blocks/recent_views/templates/withimage/view.php での使用例

<script id="recent_views<?php echo $bID;?>" type="text/javascript">// <![CDATA[ 
<div class="recent_views_image"><img src="<%- thumbnail %>"> </div>
<div class="recent_views_text"> <a href="<%- url %>" target="_self"><%- title %></a>
<p><%- description %></p> </div>
// ]]></script>

このテンプレートで使用されている変数

thumbnail
url
title
description

 

div.recent_views のデータ属性を使用して、いくつか設定が可能。

data-noimg : 閲覧履歴のページにサムネイル画像が無かった場合に表示するデフォルト画像。

data-title : タイトル設定。headertitle にすると、<head><title> のテキストを表示する。 pagetitle にすると、コンポーザーで設定したタイトルを表示する。