Templates

Bunto uses the Liquid templating language to process templates. All of the standard Liquid tags and filters are supported. Bunto even adds a few handy filters and tags of its own to make common tasks easier.

Filters

Options for the slugify filter

The slugify filter accepts an option, each specifying what to filter. The default is default. They are as follows (with what they filter):

• none: no characters
• raw: spaces
• default: spaces and non-alphanumeric characters
• pretty: spaces and non-alphanumeric characters except for ._~!$&'()+,;=@

Tags

Includes

If you have small page snippets that you want to include in multiple places on your site, save the snippets as include files and insert them where required, by using the include tag:

{% include footer.html %}

Bunto expects all include files to be placed in an _includes directory at the root of your source directory. In the above example, this will embed the contents of _includes/footer.html into the calling file.

For more advanced information on using includes, see Includes.

Code snippet highlighting

Bunto has built in support for syntax highlighting of over 60 languages thanks to Rouge. Rouge is the default highlighter in Bunto 3 and above. To use it in Bunto 2, set highlighter to rouge and ensure the rouge gem is installed properly.

Alternatively, you can use Pygments to highlight your code snippets. To use Pygments, you must have Python installed on your system, have the pygments.rb gem installed and set highlighter to pygments in your site’s configuration file. Pygments supports over 100 languages

To render a code block with syntax highlighting, surround your code as follows:

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

The argument to the highlight tag (ruby in the example above) is the language identifier. To find the appropriate identifier to use for the language you want to highlight, look for the “short name” on the Rouge wiki or the Pygments’ Lexers page.

Line numbers

There is a second argument to highlight called linenos that is optional. Including the linenos argument will force the highlighted code to include line numbers. For instance, the following code block would include line numbers next to each line:

{% highlight ruby linenos %}
def foo
  puts 'foo'
end
{% endhighlight %}

Stylesheets for syntax highlighting

In order for the highlighting to show up, you’ll need to include a highlighting stylesheet. For an example stylesheet you can look at syntax.css. These are the same styles as used by GitHub and you are free to use them for your own site. If you use linenos, you might want to include an additional CSS class definition for the .lineno class in syntax.css to distinguish the line numbers from the highlighted code.

Gist

Use the gist tag to easily embed a GitHub Gist onto your site. This works with public or secret gists:

{% gist parkr/931c1c8d465a04042403 %}

You may also optionally specify the filename in the gist to display:

{% gist parkr/931c1c8d465a04042403 jekyll-private-gist.markdown %}

To use the gist tag, you’ll need to add the bunto-gist gem to your project.

Links

Linking to pages

To link to a post, a page, collection item, or file, the link tag will generate the correct permalink URL for the path you specify. For example, if you use the link tag to link to mypage.html, even if you change your permalink style to include the file extension or omit it, the URL formed by the link tag will always be valid.

You must include the file’s original extension when using the link tag. Here are some examples:

{{ site.baseurl }}{% link _collection/name-of-document.md %}
{{ site.baseurl }}{% link _posts/2016-07-26-name-of-post.md %}
{{ site.baseurl }}{% link news/index.html %}
{{ site.baseurl }}{% link /assets/files/doc.pdf %}

You can also use the link tag to create a link in Markdown as follows:

[Link to a document]({{ site.baseurl }}{% link _collection/name-of-document.md %})
[Link to a post]({{ site.baseurl }}{% link _posts/2016-07-26-name-of-post.md %})
[Link to a page]({{ site.baseurl }}{% link news/index.html %})
[Link to a file]({{ site.baseurl }}{% link /assets/files/doc.pdf %})

(Including {{ site.baseurl }} is optional — it depends on whether you want to preface the page URL with the baseurl value.)

The path to the post, page, or collection is defined as the path relative to the root directory (where your config file is) to the file, not the path from your existing page to the other page.

For example, suppose you’re creating a link page_a.md (stored in pages/folder1/folder2) to page_b.md (stored in pages/folder1). Your path in the link would not be ../page_b.html. Instead, it would be /pages/folder1/page_b.md.

If you’re unsure of the path, add {{ page.path }} to the page and it will display the path.

One major benefit of using the link tag is link validation. If the link doesn’t exist, Bunto won’t build your site. This is a good thing, as it will alert you to a broken link so you can fix it (rather than allowing you to build and deploy a site with broken links).

Note you cannot add filters to link tags. For example, you cannot append a string using Liquid filters, such as {% link mypage.html | append: "#section1" %} . To link to sections on a page, you will need to use regular HTML or Markdown linking techniques.

Linking to posts

If you want like to include a link to a post on your site, the post_url tag will generate the correct permalink URL for the post you specify.

{{ site.baseurl }}{% post_url 2010-07-21-name-of-post %}

If you organize your posts in subdirectories, you need to include subdirectory path to the post:

{{ site.baseurl }}{% post_url /subdir/2010-07-21-name-of-post %}

There is no need to include the file extension when using the post_url tag.

You can also use this tag to create a link to a post in Markdown as follows:

[Name of Link]({{ site.baseurl }}{% post_url 2010-07-21-name-of-post %})