Jekyll 页面特定 CSS
Jekyll page specific CSS
我第一次使用 Jekyll 构建网站，到目前为止它真的很棒。
我的问题是：我希望能够将特定 CSS 添加到网站的特定页面。
问题是：是否有一种聪明的方法可以将一些代码行添加到特定页面，也许使用 YAML front matter？
在使用 Jekyll 之前，我曾在 <head> 中 link 一个单独的 .css 文件，就像这样：
<link rel="stylesheet" href="/style.css"> # main stylesheet
<link rel="stylesheet" href="/page/style.css"> # secondary stylesheet
更新#1
我找到了这份文件 https://jekyllrb.com/docs/includes/#using-variables-names-for-the-include-file。
它似乎完成了与我正在寻找的类似的东西。
唯一的问题是（由于我设置模板的方式）CSS 最终包含在 <body> 标记中。不过一切似乎都很好。
解决方案
我通过在 <head> 中包含以下几行解决了这个问题：
<style>
{% if page.style %} {% include css/{{ page.style }}.css %} {% endif %}
</style>
这样我就可以包含来自 _includes 的整个样式表。
到目前为止它没有问题，我很满意。
聪明的答案就在你的问题中：使用 front matter 变量来定义特定页面应用的样式。
---
title: any page
style: one # defines body main class
layout: default
---
layouts/default.html
<body class="{% if page.style %}{{ page.style }} {% endif %}">
...
你的css
one: { background: #f00; }
two: { background: #0f0; }
...
我第一次使用 Jekyll 构建网站，到目前为止它真的很棒。
我的问题是：我希望能够将特定 CSS 添加到网站的特定页面。
问题是：是否有一种聪明的方法可以将一些代码行添加到特定页面，也许使用 YAML front matter？
在使用 Jekyll 之前，我曾在 <head> 中 link 一个单独的 .css 文件，就像这样：
<link rel="stylesheet" href="/style.css"> # main stylesheet
<link rel="stylesheet" href="/page/style.css"> # secondary stylesheet
更新#1
我找到了这份文件 https://jekyllrb.com/docs/includes/#using-variables-names-for-the-include-file。
它似乎完成了与我正在寻找的类似的东西。
唯一的问题是（由于我设置模板的方式）CSS 最终包含在 <body> 标记中。不过一切似乎都很好。
解决方案
我通过在 <head> 中包含以下几行解决了这个问题：
<style>
{% if page.style %} {% include css/{{ page.style }}.css %} {% endif %}
</style>
这样我就可以包含来自 _includes 的整个样式表。
到目前为止它没有问题，我很满意。
聪明的答案就在你的问题中：使用 front matter 变量来定义特定页面应用的样式。
---
title: any page
style: one # defines body main class
layout: default
---
layouts/default.html
<body class="{% if page.style %}{{ page.style }} {% endif %}">
...
你的css
one: { background: #f00; }
two: { background: #0f0; }
...