Alex Lande Alex Lande - 6 months ago 24
CSS Question

Can you use Jekyll page variables in a layout?

I'm using Jekyll for my blog, and I'd like the ability to use unique CSS styling in particular posts. Right now, I'm specifying a CSS file in the YAML frontmatter like so:

style: artdirection.css


and using it in the layout like this:

{% if page.style %}
<link rel="stylesheet" href="{{ page.style }}">
{% endif %}`


This works, but I'd prefer to include the actual CSS styling in a style tag in the page's frontmatter instead of linking to a style sheet.

I've tried dealing with this in a couple of ways, including the method described here, but the variable that I capture is only usable inside the post itself, not in the layout.

So, is it possible?

Answer

I'm pretty sure this would work:

---
title: xxx
style: |
  /* You can put any CSS here */
  /* Just indent it with two spaces */
  /* And don't forget the | after "style: " */
  h2 {
    color: red;
  }
---

Your markdown/textile goes here. h2s will be red

And then in your layout:

<style type="text/css">
{{ page.style }}
</style>

And that should be it.

Comments