Eleventy: front matter questions

Created on 8 Feb 2020 · 5Comments · Source: 11ty/eleventy

Is there a list somewhere of the front matter names that 11ty recognizes as more than just a variable? For example, there are "layout" and "tags".

Is there a way to specify a CSS file to include for a page using front matter?
If not, is the best way to associate a CSS file with a page to define a page-specific layout that adds a <link rel="stylesheet" href="path-to-css-file" /> and refer to that with the "layout" front matter variable?

education

Source

mvolkmann

Most helpful comment

Is there a way to specify a CSS file to include for a page using front matter?

You should be able to specify a CSS file to include in your template's front matter like this:

---
title: Some fancy page
css_include: /assets/path-to-css-file.css
---

And then in your _includes/layouts/default.njk (or whatever) file do something like this:

<head>
{% if css_include %}
<link rel="stylesheet" href="{{ css_include }}" />
{% endif %}
</head>

pdehaan on 8 Feb 2020

👍5

All 5 comments

Is there a way to specify a CSS file to include for a page using front matter?

You should be able to specify a CSS file to include in your template's front matter like this:

---
title: Some fancy page
css_include: /assets/path-to-css-file.css
---

And then in your _includes/layouts/default.njk (or whatever) file do something like this:

<head>
{% if css_include %}
<link rel="stylesheet" href="{{ css_include }}" />
{% endif %}
</head>

pdehaan on 8 Feb 2020

👍5

Or, if you want to be fancy about it, I suppose you could use Nunjucks blocks for layout, and then do something like:

---
title: Some fancy page
---

{% extends "layouts/default.njk" %}

{% block head %}
<link rel="stylesheet" href="{{ css_include }}" />
{% endblock %}

{% block content %}
This is my regular page content.
{% endblock %}

That takes a bit more setup, but might be a bit more flexible.
I did have an example at https://github.com/pdehaan/11ty-blocks but it's a bit messy (I was trying to use blocks to include dynamic blog sidebars for different layouts/templates).

pdehaan on 8 Feb 2020

👍1

My question about CSS is resolved, but I'm still curious about this:
Is there a list somewhere of the front matter names that 11ty recognizes as more than just a variable? For example, there are "layout" and "tags".

mvolkmann on 9 Feb 2020

You should be able to specify a CSS file to include in your template's front matter like this:
---
title: Some fancy page
css_include: /assets/path-to-css-file.css
---

Personally, I find an Array more suitable here (since it allows you to list several CSS files - e.g. a Prism one only if needed)