Loading Scripts or Stylesheets Conditionally With Jekyll
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
In an effort to reduce page weight to a minimum, there are a few tricks where Jekyll’s front matter can become really handy.
Only specific pages of 🐊 call for certain scripts or need certain styles applied. Front matter allows to create custom variables, so it becomes very easy to include the scripts or stylesheets only where needed.
Here’s for example the front matter for a guest post, interesting part highlighted:
--- layout: page-fullwidth title: "Sass @each Loops" categories: - sass image: thumb: sass/sass-each-loops.png meta_description: "Loop through maps and lists in Sass. Here's a quick snippet that shows you how." guest: true ---
And here’s how it’s conditionally included in the footer include file:
<link rel="stylesheet" property="stylesheet" href="/assets/css/authors.css">
Note that including stylesheets within the body tag is usually not allowed for valid html. A trick is to use property=“stylesheet” instead of type=“text/css” to make validators happy.
Note also that this creates a new http request, and some may argue that it’s probably better to have one large stylesheet file instead. Separating CSS into multiple modular files seems to be the way of the future though, so let’s optimize for that!
And here’s an example for a post that calls a Can I Use script for embedding Can I Use data:
--- layout: page-fullwidth title: "The CSS calc() function" categories: - css image: title: css/calc-2.svg meta_description: "A nice little CSS function to let you calculate things." caniuse: true ---
And finally, the liquid markup that conditionally includes it in the footer include file:
<script async src="//cdn.jsdelivr.net/caniuse-embed/1.0.1/caniuse-embed.min.js"></script>