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

您可以创建一个custom.css（我建议）和样式。

这可以帮助您从正确的方向开始。 http://markdotto.com/2014/02/28/including-css-in-jekyll/

这是关于杰基尔主题的一个体面的教程。 https://learn.andrewmunsell.com/learn/jekyll-by-example/tutorial

Answer 3

你可能会对包含内容感到非常疯狂，毫无疑问，这些代码最终会看起来很好。但是，生产力可能会受到打击。特别是最初，当您使用Brackets.io等“实时预览”工具完成大部分工作时。在早期，您可能还没准备好开始“jekyll serve”工作流程模式。我怀疑你的部分问题不包括'baseurl'配置参数。

对我有用的一个快乐的中等解决方案是有条件地包含标题链接。

{% 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

在Jekyll页面中包含CSS样式表

3 个答案: