Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/helpscout/jekyll-jolt

Jolt ⚡️: Jekyll library for creating custom template blocks
https://github.com/helpscout/jekyll-jolt

blocks jekyll open-source template-engine templates

Last synced: about 1 month ago
JSON representation

Jolt ⚡️: Jekyll library for creating custom template blocks

Host: GitHub
URL: https://github.com/helpscout/jekyll-jolt
Owner: helpscout
License: mit
Created: 2017-06-03T03:20:15.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2017-08-09T14:57:09.000Z (over 7 years ago)
Last Synced: 2024-11-17T03:10:43.891Z (about 1 month ago)
Topics: blocks, jekyll, open-source, template-engine, templates
Language: Ruby
Homepage:
Size: 61.5 KB
Stars: 5
Watchers: 5
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE.txt

Awesome Lists containing this project

README

# Jolt ⚡️ [![Build Status](https://travis-ci.org/helpscout/jekyll-jolt.svg?branch=master)](https://travis-ci.org/helpscout/jekyll-jolt) [![Gem Version](https://badge.fury.io/rb/jekyll-jolt.svg)](https://badge.fury.io/rb/jekyll-jolt)

Jekyll library for creating custom template blocks (with YAML front matter support)

Fun fact: Jolt is an acronym for (Jekyll Optimized Liquid Templates)

## Installation

Add this line to your application's Gemfile:

```ruby
gem 'jekyll-jolt'
```

And then execute:
```
bundle
```

Or install it yourself as:
```
gem install jekyll-jolt
```

---

## Documentation

Templates (`{% template %}`) work similarly to Jekyll's `{% include %}` tag. It references an existing `.html` file for markup. However, the biggest difference (and most awesome feature) between `{% template %}` vs. `{% include %}` is that templates allow for content to be used inside the block.

### Setting up the template directory

The first thing you have to do to allow for template blocks to work is to create a new directory called `_templates` within your Jekyll site's source directory:

```
my-jekyll-site/
├── _data/
├── _includes/
├── _plugins/
├── _posts/
├── _templates/ <-- Right here!
└── index.md
```

Once you have your directory created, add template files as regular `.html` files (just like you would `_includes/` files).

### Creating a template file

Let's create a template file called `awesome.html`, which will be added to `_templates`.
(Full path is `_templates/awesome.html`)

```markdown

```

You can write whatever markup you would like inside a template file. The most important thing is to include a `{{ template.content }}` tag. This destinates where your content will be rendered.

### Using a template block

After creating our `awesome.html` template, we can use it in any of our Jekyll pages (or posts… heck even in `_include` files).

For this example, let's add it to our `index.md` file:

```markdown
# Hello
{% template awesome.html %}
I am content!
{% endtemplate %}
```

Your template content needs to begin with `{% template %}` and end with `{% endtemplate %}`. Be sure to include the path/name of the template file you wish to use.

The final rendered `.html` will look like this:

```html

Hello

I am content!

```

## Rendering template content as HTML

By default, templates parse and render content as **markdown**. To force templates to render content as HTML, all the `parse: "html"` attribute to your `{% template %}` tag.

```markdown
{% template awesome.html parse: "html" %}
# Title
I am content! As HTML!
{% endtemplate %}
```

The final rendered `.html` will look like this:

```html

# Title I am content! As HTML!

```

## Using YAML front matter

You can add YAML front matter to both your template files, just like Jekyll pages and posts.

```
---
title: Awesome title
---

{{ template.title

```

Front matter can also be defined in your `{% template %}` block. Any front matter data defined here will override the data defined in your original template.

```
{% template awesome.html %}
---
title: Best title
---
I am content!
{% endtemplate %}
```

```html

Best title

I am content!

```

## Using templates within templates

Yo dawg. I heard you liked templates! The template block supports nesting 👏

```markdown
{% template outer.html %}
{% template inner.html %}
Hi!
{% endtemplate %}
{% endtemplate %}
```

---