14

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?

jbranchaud
  • 5,909
  • 9
  • 45
  • 70
Alex Lande
  • 1,280
  • 11
  • 11
  • " 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 Jan 23 '12 at 13:01
  • 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 – Alex Lande Jan 23 '12 at 22:12

2 Answers2

17

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.

kikito
  • 51,734
  • 32
  • 149
  • 189
  • Yep, that worked. It gave me syntax errors on some complex rules (like gradients and so on), but it works fine for simple CSS, and I can probably figure out how to deal with any errors that come up. Thanks a lot! – Alex Lande Jan 24 '12 at 20:49
  • Hi axelande, probably what is happening is that markdown/textile is trying to interpret the css you passed in as markdown. Adding one more space on the lines might help with that. If not, try escaping that text so it is not transformed (with `notextile.` in textile, I don't know how you do it in markdown) – kikito Jan 25 '12 at 11:36
13

Jekyll 3 breaking change

Now variables declared in the layout front-matter (_layouts/default.html) are visible via:

{{ layout.style }}

instead of the older:

{{ page.style }}

https://github.com/jekyll/jekyll/issues/4123

Ciro Santilli OurBigBook.com
  • 347,512
  • 102
  • 1,199
  • 985