为了将 页面重量降低到最低限度,有几种方法可以让 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>