Blank JS-Based custom template, using Mustache JS

The following snippet is the contents of an incomplete basic Blogger template which exports some of the Blog gadget data into a global dictionary, then pipes that global dictionary through a Mustache-based template, setting the result as the contents of the page.

You can view a demo of the resulting behaviour at js-template.blogspot.com.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false'
      b:defaultwidgetversion='2'
      b:layoutsVersion='3'
      b:responsive='true'
      expr:dir='data:blog.languageDirection'
      xmlns='http://www.w3.org/1999/xhtml'
      xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data'
      xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
    <title><data:view.title.escaped/></title>
   
    <b:include data='blog' name='all-head-content' />

    <b:skin><![CDATA[/*

<!-- Variable definitions -->

<Variable name="keycolor" description="Main color" type="color" default="#2196f3"  value="#2196f3" />
<Variable name="startSide" description="Start side in blog language" type="automatic" default="left" hideEditor="true"  value="left" />
<Variable name="endSide" description="End side in blog language" type="automatic" default="right" hideEditor="true"  value="right" />

<Group description="Page Text">
  <Variable name="body.text.font" description="Font" type="font" default="normal normal 16px Roboto, sans-serif" />
  <Variable name="body.text.color" description="Text color" type="color" default="#000000" />
  <Variable name="body.links.color" description="Link color" type="color" default="$(keycolor)" />
</Group>

<!-- End of Variable definitions -->
*/

#widget-placeholders {
  display: none;
}

body {
  font: $(body.text.font);
  color: $(body.text.color);
}

a {
  color: $(body.links.color); 
}

]]></b:skin>

    <script src='https://cdn.rawgit.com/janl/mustache.js/master/mustache.js' />
    <script>
      window.blogger = {
        widgets: {}
      };
      document.addEventListener(
        'DOMContentLoaded',
        function () {
          var allData = _WidgetManager._GetAllData();
          window.blogger.blog = allData.blog;
          window.blogger.skin = allData.skin;
          window.blogger.template = allData.template;
          window.blogger.view = allData.view;
          var template = document.getElementById('template').innerHTML;
          document.getElementById('main').innerHTML = Mustache.to_html(template, window.blogger);
        });
    </script>
  </head>

  <body>
    <div id='main'></div>

    <b:comment>This is the Mustache template for the whole page.</b:comment>
    <script type='text/json' id='template'>
      <h1>
        <a href='{{blog.canonicalHomepageUrl}}'>
          {{blog.title}}
        </a>
      </h1>
      <p class='blog-description'>
        {{blog.description}}
      </p>

      {{#widgets.Blog1.data}}
      <div class='posts'>
        {{#posts}}
        <div class='post'>
          <h3 class='post-title'>{{title}}</h3>
          <div class='post-body'>
           {{body}}
          </div>
        </div>
        {{/posts}}
      </div>
      {{/widgets.Blog1.data}}
    </script>

    <b:comment>
      This is the normal output, before the Mustache template renders.
      It's used by search engines and JS-disbled views.
    </b:comment>
    <b:section id='widget-placeholders' preferred='yes'>
      <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' visible='true'>
        <b:includable id='main' var='this'>
          <b:comment>We override the main includable, to dump the data in the global JS dict</b:comment>
          <script>
            window.blogger.widgets.<data:widget.instanceId.jsEscaped /> = {
              sectionId: '<data:widget.sectionId.jsEscaped />',
              data: {
                title: '<data:this.title.jsEscaped />',
                description: '<data:this.description.jsEscaped />',
                posts: [<b:loop var='post' values='data:this.posts' index='i'>
                  {
                    title: '<data:post.title.jsEscaped />',
                    body: '<data:post.body.jsEscaped />'
                  }<b:if cond='data:i lt data:posts.size'>,</b:if>
                </b:loop>]
              }
            };
          </script>
          <b:include name='super.main' />
        </b:includable>
      </b:widget>
    </b:section>
  </body>
</html>

Comments

Popular posts from this blog

Add snippets to the Emporio theme

Change my post timestamps to a custom format

Rotate my Blogger images