Liquid is uniquely perfect for making an Instructable style page without writing html. In this blog post, I’ll show you how to create a tutorial page with steps, where each step is simply a list in the front matter without any html markup. We’ll create a nicely formatted tutorial page with a new
1. Create a new layout for the tutorial page
_layouts/tutorial.html in your Jekyll site. This tutorial will be placed into the
post parent layout. We will pull our tutorial items from an array in the
_posts file. An array named
steps will be located in the front matter and will be available to the layout as
page.steps. Each tutorial step has several elements:
- Image caption
- Image link to full size
This is going to use a new array placed into the front matter of a post to display each step in the tutorial. This means that instead of writing html, you can just make an array of steps!
2. Use this layout in a new post
Update the front matter of a post to use this new template:
3. Add the new tutorial to the front matter
You can see a full example in my Miter Saw post. Note that in the second array element, the
> operator allows us to make a multi-line assignment.
4. Add some new styles to format the tutorial
We’ve used the
figure element and we’ll style it to float according to a media query so that it’s to the left on large screens and above the instruction on small screens.
Please note that there is an extra space in the media rule because of a bug in jekyll-mentions.
5. Publish some tutorials!
Go forth and publish tutorials.