在 Jekyll 页面中包含 CSS 样式表

Question

我已经使用 Jekyll 玩了几个星期了，我正在尝试为我的每篇博文创建一个默认样式，但我不确定应该在哪里以及如何完成。我的主索引页面在样式方面工作正常，但尽管尝试了各种方法，但我的帖子没有任何 CSS 传递给它们。

博客文章的 CSS 应该写成 _layouts/default.html 还是 _layouts/posts.html ，我是否必须通过使用 {% include ...%} 来指定我想在 YAML 中使用哪些样式表 --- ，或通过写作

{% if page.style %}
    <link rel="stylesheet" href="{{ page.style }}">
{% endif %}

我无法找到给出明确答案的信息。

原文由 gabed123 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Jekyll 的方法是采用您要用于最终页面的任何布局（例如 _layouts/posts.html ）并在那里创建您的 HTML 文档框架（即 html , head 和 body 标签）。在布局 HTML 的 head 中，放入 {% include blog-head.html %} 。这个 blog-head.html 文件是我们要包含每个博客页面所需的所有 CSS、JS 等的地方。

然后在你的 blog-head.html 中，你可以为自定义 CSS 文件编写包含的 CSS 文件：

 <link rel="stylesheet" href="blogposts.css">

这样，您可以轻松地在所有博客文章页面中包含相同的 head 部分，并且可以轻松更新该 head 部分（添加、删除或更改 CSS/JS）它将自动在您的所有博客文章中生效。

以下链接提供了覆盖主题默认值的一般步骤： Jekyll：覆盖主题默认值。该页面提供了获取 html 基本布局文件副本（来自您的主题）的说明，您需要使用新的 CSS 链接对其进行修改。

如果您希望我澄清任何事情，请跟进！

原文由 Maximillian Laumeister 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

当我想要一种快速而肮脏的方式将一些 CSS 添加到帖子中时，我将在帖子正文中添加一个 <style> 标签。

 ---
layout: post
title: "quick and dirty CSS in jekyll posts"
date: 2016-04-08 13:04:00
---

<style type="text/css">
  p {
    border: 1px solid black;
  }
</style>

whoa this paragraph has a border around it, such magic

原文由 Kayce Basques 发布，翻译遵循 CC BY-SA 3.0 许可协议