资源文件

Jekyll提供了对Sass的内建支持,还能通过安装相应的 Ruby gem 支持CoffeeScript。使用时只需创建以 .sass.scss.coffee 为扩展名的文件,并以两行 --- 开头即可,例如:

---
---

// start content
.my-definition
  font-size: 1.2em

Jekyll将这些文件视为常规页面,因为输出文件将放在它来自的同一目录中。例如,如果您的站点的源文件夹中有一个css/styles.scss文件,Jekyll将处理它并将其放在您站点的目标文件夹下 css/styles.css

Jekyll 会处理 asset 文件中的所有 Liquid 过滤器和标签

如果你在使用Mustache 或其他会与 Liquid 模板语法冲突的JavaScript模板语言,那么你需要将你的代码放在 {% raw %}{% endraw %} 标签内。

Sass/SCSS

Jekyll 允许在某些方面自定义 Sass 转换。

你需要将所有需要导入的部分文件放在 sass_dir 下,该路径默认是 <source>/_sass;而主 SCSS / Sass 文件放在你希望输出文件所在的目录下,如 <source>/css。详情可以参考 示例网站

如果你在使用 Sass 的 @import 语句,则需要确保你的 sass_dir 已设为 Sass 文件所在的目录。你可以这样设置:

sass:
    sass_dir: _sass

Sass 转换器默认配置中的 sass_dir_sass

The sass_dir只用于Sass

注意 sass_dir 只是 Sass 的导入目录,没有其他作用。这意味着 Jekyll 并不直接知晓这些文件,所以这里的文件不应该包含 YAML 头信息,它们亦不会被转换。该目录只应该包含导入文件。

您还可以使用_config.yml文件中的style选项指定输出样式:

sass:
    style: compressed

这些传递给Sass,因此Sass支持的任何输出样式选项在这里也是有效的。

Coffeescript

为了确保 Coffeescript 能在 Jekyll 3.0 及更新版本中使用,你必须:

  • 安装 jekyll-coffeescript gem
  • 确保你的 _config.yml 包含下列设置并更新(即重新 jekyll serve):
plugins:
  - jekyll-coffeescript