在 Jekyll 页面中包含 CSS 个样式表

Question

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

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

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

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

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">

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

中生效

以下 link 提供了覆盖主题默认值的一般步骤：Jekyll: Overriding Theme Defaults。该页面提供了获取 html 基本布局文件副本（来自您的主题）的说明，您需要使用新的 CSS link.

修改该文件

如果你想让我澄清什么，请跟进！

Answer 2

您可以对 includes 感到非常疯狂，毫无疑问，代码最终看起来会很好地分解并且很酷。但是，生产力可能会受到打击。尤其是最初，当您可能使用 'Live Preview' 工具（如 Brackets.io）完成大部分工作时。早期您可能还没有准备好开始您的 'jekyll serve' 工作流程模式。我怀疑您的部分问题不包括 'baseurl' 配置参数。

一个适合我的快乐媒介解决方案是有条件地包含 header 个链接。

{% if site.baseurl %}
  {% include links.html %}
{% else %}
  <link rel="stylesheet" href="/solarized-dark.css">
  <link rel="stylesheet" href="/site.css">
{% endif %}

这处理所有工作流：实时预览、jekyll 服务器和生产。

如果您在本地使用 jekyll 进行测试，您可以传递一个空的 baseurl 参数。

jekyll serve --baseurl ''

http://jekyllrb.com/docs/github-pages/#project-page-url-structure

Answer 3

当我想要一种快速而肮脏的方式将一些 CSS 添加到 post 中时，我将在 [=15= 的正文中添加一个 <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

Answer 4

在您的 _includes/a head.html 中创建了简单的解决方案（将替换您在索引 c 中使用的 head:) 文件，其中包括从您的 css 导入的内容。所以你可以在任何地方包含它，但是你必须放../css/main.css，这里的关键是2个点。

<link rel="stylesheet" href="../css/main.css">

现在可以了。至少它解决了 404 non-style 错误和像 myUrl:4000/categories.

这样的 url

希望对你有帮助:)

在 Jekyll 页面中包含 CSS 个样式表

Including CSS stylesheets in Jekyll pages

html

css

jekyll