Octopress, custom banner

Posted on

One thing I fond from octopress is its super simple customization, here’s example. You might notice that my banner above only showed at front page, and it’s not coincidence. I set that on purpose using almost no code.

The trick is coming from Jekyll itself. Jekyll/Octopress user should already know that there is YAML formatted meta data at the top of each post or page file. So yes, you can put anything there and use it from your template.

There is 2 namespaces used here, site and page.
site refers to configuration variables at _config.yml, and page refers to the post/page file metadata. Now back to banner, at source/_layout/default.html, I move <header> and put it after <nav>, then add:

{% raw %}{% if page.banner %}
  <header role="banner">{% include header.html %}</header>
{% endif %}{% endraw %}

I check if page.banner variable is set, and now I just have to set it somewhere. Since I only want to show banner at index page. I just have to add this:

banner: true

at index.html file. And all done, you can see that the banner not showed in another page.