在Jekyll页面中包含CSS样式表

Question

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

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

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

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

Answer 1

当我想要一个快速而肮脏的方式将一些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

Answer 2

该杰基尔办法做到这一点是采取取其布局您要使用的最后一页(例如_layouts/posts.html),并有创建HTML文档框架(即html,head和body标签).在head布局HTML中,放{% 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链接进行修改.

如果您希望我澄清一切,请跟进!