customize tinkerer page
sidebar items
You can customize items in sidebar (right side of this page) by modifying values in dictionary, html_sidebars.
For example, if you would like to show tags, then add “tags.html” as follows.
# Add templates to be rendered in sidebar here
html_sidebars = {
"**": ["recent.html", "searchbox.html", "tags.html"]
}
tinkerer documentation will help you configure customization.
tweet button
You can add tweet button on each post. Here is sample code needed to be added in page.html file under _templates directory.
<!-- Twitter button -->
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
This code can be created mannualy by referencing twitter site.
google analytics
You can take statistics of your blog by google analytics. oN google analytics site create Tracking ID for your blog site, which yields javascript like this.
Please be noted that you have to exclude <script> tags.
(function(i,s,o,g,r,a,m){
i['GoogleAnalyticsObject']=r;
i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)
},i[r].l=1*new Date();
a=s.createElement(o),m=s.getElementsByTagName(o)[0];
a.async=1;
a.src=g;
m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxxx-1', '<your_site>');
ga('send', 'pageview');
Save this code as google_analytics.js under _static directory.
And add following lines into page.html so as to incorporate this javascript.
{% extends "!page.html" %}
{% set script_files = script_files + ["_static/google_analytics.js"] %}
With above configurations applied, you will see page.html as follows.
{% extends "!page.html" %}
{% set script_files = script_files + ["_static/google_analytics.js"] %}
{%- block body %}
<div class="section_head">
<div class="timestamp_layout">
{{ timestamp(metadata.formatted_date) }}
</div>
{% block buttons %}
<div class="buttons">
<!-- Twitter button -->
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
{% endblock %}
</div>
{{ link }}
{{ body }}
{{ post_meta(metadata) }}
{{ comments }}
{% endblock %}