Custom components
Last updated
Last updated
The template comes with a , but advanced users can make their own. Here's an example of doing that.
Let's say we want to have a page that lists the talks we've given at various places.
We'll start with a to cleanly list and manage the key details of each talk. Notice that these field names aren't something you'll see in any of the included components.
Now let's make a new component with matching parameters. In the future we could make this nicer by having a little clock next to minutes and maybe a link to the venue's website or location on Google Maps.
We already included some bold and italics right in the HTML, but let's add a little bit more style with CSS/Sass. We'll reference the talk
class we put in the HTML.
Hmm but wait, it didn't work completely right. Only the title shows. Unfortunately, due to a limitation of Jekyll/Liquid, any new parameters that you want to pass from data
to component
in the list component must be explicitly named in /_includes/list.html
. The title works because there are built-in components that take a parameter named title
, so it was already included. Just add the other two like this.
It's finally working! We've now created a custom page that uses the list component to show a custom set of data (written in human-readable form) with a custom component with custom styling.
Now we can use the component to easily loop through our new data and display each item with our custom component.