CODEWITHSUNDEEP
jekyll
hombrus
hombrus

Reputation: 95

Layout for pages generated from a collection with output set to true

I build a style guide in Jekyll and have a collection set up for each of the components. It uses only front-matter to display data about the styles. A file could look like this:

---
title: "Button Big Fixed"
type: interactive elements
description: "A big button with a fixed height."

code:
 html: |
  <button class="expanderBtn icon">Button</button>
 css: |
  .test { 
    font-size: 20px; 
    text-align: center;
  }

colors:
  - name: Brand Blue
    hex: "#006CFF"
    notes: Used as the background
  - name: Hover
    hex: "#7FB5FF"
    notes: Brand Blue with 50% opacity
  - name: Clicked
    hex: "#4091FF"
    notes: Brand Blue with 75% opacity
  - name: Text
    hex: "#000000"
    notes: Text should be black for best legibility
---

Now, for a permalink feature, I'd like to use output: true. However, the documents that get generated are empty because I only use front matter.

Is there any way to set a custom template or something similar, so I can render the front matter on the page generated by output: true?

Upvotes: 1

Views: 932

Answers (1)

Mr. Hugo
Mr. Hugo

Reputation: 12582

You can add a default template for each collection in your _config.yml. This looks like this:

defaults:
  - scope:
      path: ''
    values:
      layout: 'page'
  - scope:
      path: ''
      type: 'guides'
    values:
      layout: 'guide'

It means: use the page.html file in the _layouts directory for everything except for the collection 'guides'. For 'guides' you should use guide.html. Create this file in your _layouts folder. In this guide.html file you call parts of the frontmatter by using:

page.title
page.description
page.etc

Good luck!

Upvotes: 2

Related Questions