【问题标题】：Jekyll page specific CSSJekyll 页面特定的 CSS
【发布时间】：2018-08-02 07:03:42
【问题描述】：

我是第一次使用 Jekyll 建立一个网站，到目前为止它真的很棒。

我的问题是：我希望能够将特定的 CSS 添加到网站的特定页面。

问题是：有没有一种巧妙的方法可以将一些代码行添加到特定页面，也许使用 YAML 前端？

在使用 Jekyll 之前，我曾经在 <head> 中链接一个单独的 .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 的整个样式表。

到目前为止，它可以正常工作，我对此非常满意。

【问题讨论】：

标签： css jekyll

【解决方案1】：

聪明的答案就在您的问题中：使用前端变量来定义应用于特定页面的样式。

---
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 文档，发现了这一点：jekyllrb.com/docs/includes/… 我现在正在尝试：1. 我创建了一个 style_index.html，其中包含一些
嘿，很抱歉回复晚了（是的，我不擅长跟进哈哈）。我通过使用{% if page.style %} {% include css/{{ page.style }}.css %} {% endif %} 解决了问题，这样我就可以在头部包含一个完整的样式表。到目前为止它没有问题，我很满意。