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

为了将 页面重量降低到最低限度,有几种方法可以让 Jekyll 的前面材料变得非常有用。

只有特定页面需要应用某些脚本或需要应用某些风格。前面材料允许创建自定义变量,因此只在需要时很容易包括脚本或样式表。

例如,这里是客人帖子的首页内容,有趣的部分突出了:

 1---
 2layout: page-fullwidth
 3title:  "Sass @each Loops"
 4categories:
 5    - sass
 6image:
 7    thumb: sass/sass-each-loops.png
 8meta_description: "Loop through maps and lists in Sass. Here's a quick snippet that shows you how."
 9guest: true
10---

以下是它如何被条件包含在包括文件的脚下:

1[label _includes/footer_scripts.html]
2
3  <link rel="stylesheet" property="stylesheet" href="/assets/css/authors.css">

请注意,在有效的html中通常不允许包含体内标签中的风格表,一个技巧是使用 property="stylesheet"而不是 type="text/css"来使验证员满意。

另外,请注意,这会创建一个新的 http 请求,有些人可能会认为,要有一个大型样板文件可能更好,但将 CSS 分开成多个模块化文件似乎是未来的一种方法(https://jakearchibald.com/2016/link-in-body/),所以让我们为此优化!


以下是一个帖子的例子,该帖子呼叫一个 Can I Use script 用于嵌入Can I Use data:

 1---
 2layout: page-fullwidth
 3title:  "The CSS calc() function"
 4categories:
 5    - css
 6image:
 7    title:  css/calc-2.svg
 8meta_description: "A nice little CSS function to let you calculate things."
 9caniuse: true
10---

最后,有条件将其包含在脚印中的液体标记包括文件:

1[label _includes/footer_scripts.html]
2
3  <script async src="//cdn.jsdelivr.net/caniuse-embed/1.0.1/caniuse-embed.min.js"></script>
Published At
Categories with 技术
Tagged with
comments powered by Disqus