例 1: モバイルページの共通ヘッダ部分の宣言とテンプレート内での使用¶

テンプレート内でのスニペットの使い方を下記の例で示します。このスニペットでは、テンプレートが割り当てられたすべてのモバイルページにヘッダ（HEAD要素）を加えます。

下記コードでは、headerという名前のスニペットを宣言しています。

<meta charset="utf-8" />
<!--{= $.title }-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, user-scalable=0" />
<meta name="HandheldFriendly" content="true" />
<meta name="format-detection" content="telephone=no" />
        <link href="<!--{= __CONTENTS_ROOT__ }-->images/favicon.ico" rel="shortcut icon" />
        <link href="<!--{= __CONTENTS_ROOT__ }-->images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
        <link href="<!--{= __CONTENTS_ROOT__ }-->images/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" />
<meta name="description" content="<!--{= $.meta.description }-->" />
<meta name="keywords" content="<!--{= $.meta.keywords }-->" />
<meta name="copyright" content="<!--{= $.meta.copyright }-->" />
        <link href="<!--{= __CONTENTS_ROOT__ }-->/css/main.css" rel="stylesheet" type="text/css" />

<!--{/snippet}-->

こうすることで、下のようにして宣言したheaderスニペットをテンプレート内で呼ぶことができます。

<!--{call header()}-->

すると、headerスニペットで宣言されたHEAD要素のコードはテンプレートを割り当てたすべてのモバイルサイトに差し込まれます。

参考