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

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false'
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
    <b:include data='blog' name='all-head-content' />


<!-- 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)" />

<!-- End of Variable definitions -->

#widget-placeholders {
  display: none;

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

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


    <script src='' />
      window.blogger = {
        widgets: {}
        function () {
          var allData = _WidgetManager._GetAllData();
          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);

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

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

      <div class='posts'>
        <div class='post'>
          <h3 class='post-title'>{{title}}</h3>
          <div class='post-body'>

      This is the normal output, before the Mustache template renders.
      It's used by search engines and JS-disbled views.
    <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>
            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:include name='super.main' />


Popular posts from this blog

Add syntax highlighting to my Blog

Change my post timestamps to a custom format

Add snippets to the Emporio theme