Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you use Jekyll page variables in a layout?

Tags:

css

jekyll

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?

like image 901
Alex Lande Avatar asked Jan 21 '12 02:01

Alex Lande


People also ask

What is front matter in Jekyll?

Front matter is a snippet of YAML placed between two triple-dashed lines at the start of a file. You can use front matter to set variables for the page: --- my_number: 5 --- You can call front matter variables in Liquid using the page variable.

What is liquid Jekyll?

What is Liquid? Liquid is a templating language used in Jekyll to process your site's pages. In other words, it helps you make your HTML pages a bit more dynamic, for example adding logic or using content from elsewhere. This doesn't require any setup - we can just start using it.


1 Answers

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.

like image 185
kikito Avatar answered Oct 14 '22 04:10

kikito