使用Jekyll有条件地加载脚本或样式表

为了将页面重量减少到最低限度，有一些技巧可以让 Jekyll 的前端内容变得非常方便。

只有 🐊 的特定页面需要某些脚本或需要应用某些样式。 Front matter 允许创建自定义变量，因此只在需要的地方包含脚本或样式表变得非常容易。

例如，这是一篇客座文章的头条，突出显示了有趣的部分：

---
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
---

下面是它如何有条件地包含在页脚包含文件中：

_includes/footer_scripts.html

  <link rel="stylesheet" property="stylesheet" href="/assets/css/authors.css">

请注意，对于有效的 html，通常不允许在 body 标记中包含样式表。一个技巧是使用 property=“stylesheet” 而不是 type=“text/css” 让验证者满意。

另请注意，这会创建一个新的 http 请求，有些人可能会争辩说，最好使用一个大的样式表文件。将 CSS 分成多个模块化文件似乎是未来的方式，所以让我们为此进行优化！

这是一个帖子的示例，它调用我可以使用脚本来嵌入我可以使用的数据：

---
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
---

最后，有条件地将其包含在页脚包含文件中的液体标记：

_includes/footer_scripts.html

  <script async src="//cdn.jsdelivr.net/caniuse-embed/1.0.1/caniuse-embed.min.js"></script>