The objective is to set up a services page that will have multiple sections. Each section will contain a block of HTML and an image.
It should be easy to edit section content in obvious markdown files, and we should avoid duplication as much as possible.
Data Driven Sections
Jekyll can read data files in either
CSV format. Data is loaded from files with these formats located in the
Data files allow us to specify files to be used as includes or images, and help avoid repetition in templates. You just set up the data file correctly, and edit the (content) source files without touching the template.
Though I have tinkered with using
CSV format data files (to make it easier to harvest user generated content), I prefer the
YAML format - basically because I prefer how the data looks in a text editor. If you do use
CSV, you need to include a header row.
For this post, we’ll focus on the
Create a new data file:
Enter data, being careful with whitespace and tabs:
In this case, the data file serves as a way of referencing the files that contain the content.
YAML block, the
description field is a path to a markdown include. I’ve tried to make this as logical as possible, by having an appropriate directory structure within the
_includes/services/service-name/content-file.md… so if you want to add content to the section on “Roller Blinds” on the “Commercial” services page, you need to edit
In a similar way, we can reference images, titles and other data for each section.
The HTML Include
The section data are looped through within a HTML include, which is in turn inserted in the
service_page template. IN this case, the include is
The include does the following:
- Sets up a for loop that goes through each data block in the specified data file.
- Makes section display conditional
- Builds variable content into the correct HTML markup
Sections displayed must have a service-category that corresponds to the page service-category (which needs to be set in the page front-matter). This allows us to easily define section content for different service pages from within the data file.
For example, this is
This is included within the
index.html page of each service. For example,
The service page (
service-name/index.html) front matter sets the page title, meta description etc. It also sets the service-category, which is used in the
layouts/services-sections.html include to build the correct section content. For example, this is
Did we achieve the objectives of data-driven page sections? Kind of. Overall it’s a pretty good solution - it means that we can manage site content in a fairly straightforward way.
There are still more edit points than I’d like, and I don’t like the way that the service sections are bunched up in a single data file.
I’d prefer to be able to create separate data files for each page category - but I had trouble creating a dynamic reference to the data file whilst setting up the for loop. I still have a lot to learn about Jekyll (and Ruby), so it could well be that I’m missing something obvious.
comments powered by Disqus