Pimping The Blog


Posted on 2014-02-19 in  bootstrap


I've applied the Start Bootstrap Blog Post template to this site. A fairly painless exercise that took the default Jekyll layout and made it a whole lot easier to look at. Now all it needs is one of the Bootswatch themes to make it pop.

Also added Google Custom Search Engine, which took a whopping 5 minutes.

Using Modulo in Liquid Templates

The two-column category list on the right got me into a bit of Liquid coding. I needed to split the list of categories into two DIVs. The code to get the mod of the index feels a bit ridiculous to me and I'd never have guessed it had I not found an example of this somewhere, but it works.

<h4>Popular Blog Categories</h4>
<div class="row">
    <div class="col-lg-6">
        <ul class="list-unstyled">
            {% for tag in site.tags %}
              {% assign loopindex = forloop.index | modulo: 2 %}
              {% if loopindex == 1 %}
                <li><a href="/tag/{{ tag[0] }}">{{ tag[0] }}</a> 
                  <span>({{ tag[1].size }})</span></li>
              {% endif %}
            {% endfor %}
        </ul>
    </div>
    <div class="col-lg-6">
        <ul class="list-unstyled">
            {% for tag in site.tags %}
              {% assign loopindex = forloop.index | modulo: 2 %}
              {% if loopindex == 0 %}
                <li><a href="/tag/{{ tag[0] }}">{{ tag[0] }}</a> 
                  <span>({{ tag[1].size }})</span></li>
              {% endif %}
            {% endfor %}
        </ul>
    </div>
</div>

Filtering a page list in Jekyll Templates

I also added pagination to the home page. More work to be done there, but its a step. When I did that, Jekyll started seeing each page of the blog list as a Page on the site. As a result, my code to list the pages (as opposed to posts), which now sits in the persistant header area as a horizontal nav, started showing all the iterations of the home page generated by Jekyll's paginator. At the same time, it started including all the tag pages generated by the tag generator plugin I added a while back. I used a custom page variable of ishome: true on the home page and this code to list pages that aren't the home page and aren't a tag page. Note the hack used here because the Liquid template engine is missing a "does not contain" operator.

<ul class="nav navbar-nav">
{% for page in site.pages %}
  {% if page.ishome != true %}
    {% if page.url contains "/tag/" %}{% else %}
      <li><a href="{{ page.url }}">{{ page.title }}</a></li>
    {% endif %}
  {% endif %}
{% endfor %}
</ul>

Escaping Jekyll Tags when Posting Code

And finally, a thing I learned while writing this post is how to escape Jekyll tags to show them in a blog post, as I've done above. Nice trick. Basically, you just replace the opening {{ or {% of each Liquid tag with {{ "{{" }} or {% "{%" }}, respectively.


Leave a Comment:


Blog Search

Some Tags

Programming Is Fun

This is a blog about programming for the sheer joy of it. More...

Contact
github.com/wiseley
twitter.com/mattwiseley