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.
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
Post a Comment