📘
Lab Website Template docs
  • Introduction
    • Overview
    • Is this right for me?
    • Gallery
    • Support
  • Getting Started
    • Set up your site
    • Set up your URL
    • Tidy up your repo
    • Change your site
    • Preview your site
  • Basics
    • Repo structure
    • Configure your site
    • Edit pages
    • Write basic content
    • Use your logo
    • Customize your theme
    • Team members
    • Blog posts
    • Citations
    • Components
      • Section
      • Figure
      • Button
      • Icon
      • Feature
      • List
      • Citation
      • Card
      • Portrait
      • Post Excerpt
      • Alert
      • Tags
      • Float
      • Grid
      • Cols
      • Search
      • Site Search
  • Advanced
    • Update your template
    • Embeds
    • Math, diagrams, videos, etc.
    • Analytics
    • Data and collections
    • Jekyll plugins
    • Custom components
    • Background knowledge
Powered by GitBook
On this page
  1. Advanced

Custom components

PreviousJekyll pluginsNextBackground knowledge

Last updated 1 year ago

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.

  1. 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.

/_data/talks.yaml
- title: A new way to analyze data
  venue: University of London
  length: 45
  
- title: Utilizing AI in research
  venue: University of Colorado
  length: 30

...etc.
  1. 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.

/_include/talk.html
<div class="talk">
  <strong>{{ include.title }}</strong>
  <span>{{ include.venue }}</span>
  <em>{{ include.length }} minutes</em>
</div>
  1. 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.

/_styles/talk.scss
---
---

.talk {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
    padding: 20px;
    box-shadow: var(--shadow);
}
/talks/index.md
# Talks

{% include list.html data="talks" component="talk" %}
  1. 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.

/_includes/list.html
  ..
  venue=d.venue
  length=d.length
  ...
  1. 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.

list
data file
icon
few placeholder data lists and matching components for common needs