Example 1: Declare Common Header Part of the Mobile Website and Use It in Page Template

The example below shows how to use a snippet in a template. This snippet will add header (HEAD element) to all pages of your mobile site to which the template is assigned.

The code below declares a snippet with the name 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" />

Then you call the declared header snippet in your template in the following way:

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

Now code of the HEAD element declared in the header snippet will be inserted in all pages of your mobile site to which the template is assigned.

See also