We have already seen in our Jekyll series, how you can change your default theme using RubyGems. However, instead of changing your whole theme, you can also edit the theme you have and creat new layouts based on your own design. In this article, we’re going to show you how to edit your Jekyll theme.
There are a few important ways you can edit your Jekyll theme:
- Selecting assets and stylesheets
- Including files
- Creating layouts
Selecting Assets and Stylesheets
In the course of making your Jekyll site, you may realize that the site comes with different parts. Some of these elements will change each time the site is built. However, some site elements will stay the same and require no further conversion or processing. For these static assets, Jekyll has a folder called “assets”.
Any items places in the “assets” folder will be copied over to your final site when you run the build command. Unlike the markdown files, which are converted to HTML, the static assets in the “assets” folder will simply be copied. This means you can link to them (like images) or include them in your site header (like CSS stylesheets).
Including Files
When building a site dynamically, different elements of the final page can come together from different files. For example, all pages have a header, body, and footer. The body may always be different, but the header and footer remain the same. This means that you can include the same header and footer alongside each new body.
Jekyll works the same way. If you want a create a header file, you can use your text editor to fill in the necessary HTML code and then save the file the _includes folder. In the next section we’ll explain how these files can be included in layouts.
Creating Layouts
Now, assuming that you have a header file coded and saved in your _includes folder, you can create an HTML layout called, let’s say, “Body1”, and save Body1.html in the _layouts folder. The code inside Body1.html might look like this:
{% include header.html %}
<h2>Title Content</h2>
<!-- Post Content -->Blank code has been written here to show where the variables for title and post information can do, but this demonstrates the proper syntax for including files.
We will provide more information about variables you can include in later articles. For now, you should have a better grasp on how you can edit your current theme. Remember that your current theme will have example code you can copy and edit as you see fit.
