Advanced theming for Postach.io

Published by Kathleen Woo, March 12th, 2016

I have gone through all of the themes offered by Postach.io and pulled out all of their theme elements and significant syntax. The goal is for this to serve as reference and make it easier to add and modify aspects of a theme when modifying the source code.

HTML provided is for context only to make it easier to understand where a code snippet is intended to be used.

Overall page elements

These are the primary elements that would appear on each page of the blog.

<html prefix="og: http://ogp.me/ns#" xmlns:og="http://ogp.me/ns#">
  <head>
    <title>
      {% if is_login %}Login
      {% elif is_home %}{{ site.author }}
      {% elif is_tag %}{{ tag }}
      {% elif post %}{{ post.title }}
      {% endif %}
      | {{ site.name }}
    title>

    {{ header_meta }}

    
    {% if site.analytics %}
      <script>
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', '{{ site.analytics }}']);
        _gaq.push(['_trackPageview']);
        (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
      script>
    {% endif %}
  head>
  <body>

    {% if is_login %}
      {{ login_form }}
    {% else  %}

 
      {{ site.name }}
      <img class="avatar" src="{{ site.avatar }}" alt="{{ site.author }}" />
      {% if site.cover_photo %}
        <img src="{{ site.cover_photo}}" />
{% endif %}
      {% if site.bio %}<p>{{ site.bio }}p>{% endif %}
      {{ account.email }}

      
      {% if site.twitter %} <a href="{{ site.twitter }}" title="Twitter">Twittera>{% endif %}
      {% if site.facebook %} <a href="{{ site.facebook }}" title="Facebook">Facebooka>{% endif %}
      {% if site.googleplus %}<a href="{{ site.googleplus }}?rel=author" title="Google+">Google+a>{% endif %}
      {% if site.linkedin %}<a href="{{ site.linkedin }}" title="LinkedIn">LinkedIna>{% endif %}
      <a href="{{ site.atom_url }}" title="RSS" target="_blank">RSSa>

      
      <ul>
{% if pages|length > 0 %} <li><a href="/">Homea>li> {% for page in pages %} <li><a href="{{ page.url }}" class="{{ set_active(page.url) }}">{{ page.title }}a>li> {% endfor %} {% endif %}

      

      
      {% if posts_recent %}
        <ul>
        {% for post in posts_recent %}
          {% if loop.index <= 6 and loop.index > 1 %}
            <li><a href="{{ post.url }}">{{ post.title }}a>li>
          {% endif %}
        {% endfor %}
        ul>
      {% endif %}

      
      {% if site.tags %}
        <ul class="tags">
        {% for tag in site.tags %}
          <li><a href="/tag/{{ tag.name }}">#{{ tag.name }}a>li>
        {% endfor %}
        ul>
      {% endif %}

      <footer class="footer">
        
      footer>
 
    {% endif %}

    {{ footer_meta }}

  body>html>

Change display according to current view

A Postach.io blog is composed of several views: the listing of lastest posts, a listing of posts from a tag, a blog post (which has several types), and pages.


{% if is_home or is_tag %}
  {% if is_tag %}
    {{ tag }}
  {% endif %}
  {% if posts %}
    
  {% endif %}


{% elif post %}
  


{% elif post.type == 'page' %}
  {{ page.title }}
  {{ page.content }}

{% endif %}

Iterate through posts

The listing of recent posts on the homepage, and all posts of a specific tag, are generated by iterating through all available posts.

{% if posts %}
  <section itemscope itemtype="http://schema.org/Blog" class="posts">
    
    {% for post in posts %}
      <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting" class="blog-post">
        {{ post.title }}
        {{ post.url }}
        {{ post.created_at|format_date }}
        <time datetime="{{ post.created_at }}">{{ post.created_at|date_format }}time>

        
        {% if post.photos %}
          {% for photo in post.photos %}
            {% if loop.index == 1 %}
              {% if photo %}
                {{ photo.width_600 }}
                {{ photo.square_75 }}
                {{ loop.index }}
              {% endif %}
            {% endif %}
          {% endfor %}
        {% endif %}

        
        {% if post.tags %}
          {{ post.tags|format_tags(humanize=True) }}
        {% endif %}

        
        <p class="post-comment-count">
          <a href="{{ post.url }}{% if site.disqus %}{% endif %}" class='dsq-comment-count comment-link commentslink'>a>
        p>

        {{ post.content }}
      article>
    {% endfor %}
  section>

  
  {% if site.disqus %}
    <script type="text/javascript">
      var disqus_shortname = '{{ site.disqus }}';
      (function() {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      })();
    script>
  {% endif %}

  
  {% if pagination.prev or pagination.next %}
    {% if pagination.prev %}<a href="{{ pagination.prev }}" class="post-prev">← View Previous Postsa>{% endif %}
    {% if pagination.next %}<a href="{{ pagination.next }}" class="post-next">View More Posts →a>{% endif %}
  {% endif %}

{% else %}
  
{% endif %}

Post display

An individual post's permalink view.

<article itemscope itemtype="http://schema.org/BlogPosting">
  <section class="content">

    {{ post.title }}
    Published by {{ site.author }}, <time datetime="{{ post.created_at }}">{{ post.created_at|date_format }}time>
    {{ post.created_at|format_date }}

    {{ post.content }}

    {% if post.type == 'link' or post.type == 'webclip' %}
      {{ post.link_url }}
      {{ link.link_url }}
      {{ link.content }}
    {% endif %} 

    {{ theme.social.bar }} 

    {% if post.tags %}
      
      {{ post.tags|format_tags(humanize=True) }}

       
      {% for tag in post.tags %} 
        <a href="/tag/{{ tag }}">{{ tag|format_tag(link=False, humanize=True) }}a> 
      {% endfor %}
    {% endif %}

  section>

   
  {% if site.disqus %}
    <section class="comments">
      <div id="disqus_thread">div>
      <script>
        var disqus_shortname = '{{ site.disqus }}';
        var disqus_url = '{{site.base_url}}{{ post.url }}';
        (function() {
          var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
          dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
      script>
      <noscript>
        Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.a>
      noscript>
    section>
  {% endif %}

article>

Miscellaneous syntax

Alternate methods to display data, and other edge-case scenarios.


{% if post.tags and not post.photos %}
  <p class="post-tags">{{- post.tags|format_tags(humanize=True) -}}p>
{% endif %}


{% if post.content|striptags|wordcount > 0 %}
  <p>{{ post.content|striptags|truncate(200) }}p>
  <p class="post-link"><a href="{{ post.url }}">View more →a>p>
{% endif %}

<a href="{{ post.url }}">{{ post.title|truncate(40, False, '...') }}a>


{% if post.tags %}
  {% for tag in post.tags %}
    {% if loop.index <= 3 %}
      <a href="/tag/{{ tag }}" class="tag">{{ tag }}a>
    {% endif %}
  {% endfor %}
{% endif %}


{% if is_home or is_tag %}
{% elif is_post %}
{% elif is_link %}
{% elif is_page %}
{% endif %}
{% if not is_login %}
  
{% endif %}


{% if post.location.lat %}
  <iframe width="280" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?ll={{post.location.lat}},{{post.location.lng}}&spn=0.040853,0.109863&t=m&z=14;output=embed">iframe>
{% endif %}


{% if post.tags %}
  {{ post.tags|format_tags(delimiter=' ') }}
{% endif %}

<ul class="post-options">
  <li>{{ theme.social.share }}li>
  <li>{{ theme.social.follow }}li>
  <li>{{ theme.social.like }}li>ul>


{% if posts %}
  {% for year, items in sort_by_year(posts) %}
    {% if not is_tag %}
      {{ year }}
    {% endif %}
    {% for post in items %}
      <article itemscope itemtype="http://schema.org/Article">
        <time datetime="{{ post.created_at }}">{{ post.created_at.strftime('%d %b') }}time> 
        <a href="{{ post.url }}" class="permalink">{{ post.title }}a>
      article>
    {% endfor %}
  {% endfor %}
{% endif %}


{% set skiptags = ['bananas', 'apples', 'status:finaldraft'] %}
{% if post.tags %}
  {% for tag in post.tags %}
    {% if tag not in skiptags %}
      
    {% endif %}
  {% endfor %}
{% endif %}