Jekyll页面特定的CSS
Jekyll页面特定的CSS
提问于 2018-08-02 15:03:43
我第一次使用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的整个样式表。
到目前为止，它没有出现任何问题，我对此非常满意。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-02 15:29:59
巧妙的答案就在您的问题中:使用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; }
...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51647425
复制相关文章
相似问题