我是第一次使用 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.
到目前为止,它可以正常工作,我对此感到非常满意。
聪明的答案是在您的问题中:使用前端变量来定义应用于特定页面的样式。
---
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)