使用 Jekyll 有条件地加载脚本或样式表
为了将页面重量降至最低,Jekyll 的封面有几个技巧可以派上用场。
只有特定的 ? 页面才需要调用特定脚本或应用特定样式。前页允许创建自定义变量,因此可以非常轻松地仅在需要时包含脚本或样式表。
例如,以下是一篇客座文章的前言,其中有趣的部分被突出显示:
---
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">
请注意,在 body 标签中包含样式表通常不允许用于有效的 html。一个技巧是使用属性=“样式表”而不是类型=“文本/css”让验证者高兴。
还请注意,这会创建一个新的 http 请求,有些人可能会认为最好使用一个大型样式表文件。不过,将 CSS 分成多个模块化文件似乎是未来的趋势,所以让我们对此进行优化吧!
下面是一个帖子示例,该帖子调用“ Can I Use”脚本来嵌入“Can I Use”数据:
---
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>