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?
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? 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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With