Jekyll 页面特定的 CSS

Mat*_*zzo 7 css jekyll

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

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

问题是:是否有一种聪明的方法可以将一些代码行添加到特定页面,也许使用 YAML 前端?

在使用 Jekyll 之前,我曾经在 .css 文件中链接一个单独的 .css 文件<head>,如下所示:

<link rel="stylesheet" href="/style.css">       # main stylesheet
<link rel="stylesheet" href="/page/style.css">  # secondary stylesheet
Run Code Online (Sandbox Code Playgroud)


更新 #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>
Run Code Online (Sandbox Code Playgroud)

这样我就可以从_includes.

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

Dav*_*uel 6

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

---
title:  any page
style:  one         # defines body main class
layout: default
---
Run Code Online (Sandbox Code Playgroud)

布局/default.html

<body class="{% if page.style %}{{ page.style }} {% endif %}">
...
Run Code Online (Sandbox Code Playgroud)

你的CSS

one: { background: #f00; }
two: { background: #0f0; }
...
Run Code Online (Sandbox Code Playgroud)