Can you use Jekyll page variables in a layout?

Question

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?

" I'd prefer to include the CSS in a style tag in the page instead of linking to a style sheet" Can you explain that part a bit better? I don't understand what you want to do. — kikito
Well, right now I link to an external css file for blog posts with art direction that differs from the rest of the blog. I refer to that file's location in the YAML frontmatter and link to it with the page.style variable in the head of my document, which is in a layout. I would prefer to include the art direction css between <style> tags in the head of the document so that there isn't an additional HTTP request and I can keep the style and content for a page together and organized easily on my end. — Alex Lande

kikito kikito · Accepted Answer · 2012-01-24T08:25:44

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.

Can you use Jekyll page variables in a layout?

2 Answers