Jekyll 和自定义 CSS答案

【问题标题】：Jekyll and custom cssJekyll 和自定义 CSS
【发布时间】：2013-02-18 14:44:43
【问题描述】：

在使用markdown作为入口文件的同时，有没有办法在jekyll站点中包含自定义css标签；例如，当我想突出某个段落时？

【问题讨论】：

你能详细说明你想要什么吗？ ScottHelm 和@berkes 都提供了非常有效的解决方案，但除非我们对您正在尝试做的事情有更多了解，否则很难推荐一个特定的解决方案。
@Peterb 你看到了吗？ stackoverflow.com/questions/27501185/… - 测试并使用自定义 css ".float-right" 在添加到帖子的图像上使用 md：{: .float-right}![](/path/to/img)

【解决方案1】：

Markdown 和 YAML FrontMatter 都内置了这个。但你可以自己制作。

假设您有 foo.css 想要包含在某些帖子中。

在_posts/2013-02-03-higligting-foo.markdown：

---
css: foo
title: "Drupal Imagecache security vulnarability with DDOS attack explained"
tags: [drupal, imagecache, security, ddos]
---

然后，在_layouts/default.html：

{% if post && post.css %}
  <link rel='stylesheet' type='text/css' href='public/assets/{{ post.css }}.css' />
{% endif %}

如果显示一个帖子，并且该帖子定义了一个变量 css，则使用它来包含带有名称的 css 文件。请注意，这不会测试文件名是否正确，css文件是否存在等等。

【讨论】：

post 应该改为 page 并且 {% post.css %} 应该是 {{ page.css }}。
@duleorlovic：这是最近的变化，还是我只是发布了错误的内容？你有一些文档的链接吗？关于这个？
{% ... %} 用于无法解析为文本的事物（即 if/for/unless）----- {{...}} 用于文本发射
我使用了@duleorlovic ({{ page.css }}) 的建议，但我在 octopress 中。这是区别吗？最后是页面还是帖子？ NB: 在 Octopress 中，您必须使用上面的行编辑 source/_includes/custom/head.html，使用页面（而不是帖子）并将包含的 css 放置在根目录：@987654326 @

【解决方案2】：

如果你的意思是你能给你的 Markdown 文档中的特定段落一个特定的类，从技术上讲，你可以通过按你想要的方式键入段落标签：

My **first** paragraph

<p class="mySpecialClass">My **second** paragraph</p>

My **third** paragraph

Markdown 会将您的 p 标记传递给生成的 HTML。

但是，Markdown 放弃解析您自己键入的标签内的内容，因此您的段落内容不会被视为 Markdown - 例如该段中的单词**second** 不会显示为粗体。

由于这种行为，我为 Jekyll 帖子切换到 Textile。

祝你好运！

【讨论】：

kramdown 引擎确实提供了在 HTML 标签中嵌入 markdown 的选项。只需在 config.yml 或前面做 parse_block_html: true 即可
@jasonszhao 这对 Github Pages 有用吗？那太好了。
kramdown is supported by Github Pages。但是，我只上传我编译的目录，我不完全确定该选项是否有效。

【解决方案3】：

您应该能够将 html 标签放入您的 markdown 文档中，并且它应该可以毫无问题地解析它们。例如：

#This

is a paragraph <span style="background-color:yellow">with highlighting</span>

【讨论】：