详细教程（分步骤）

7. Assets：资源文件（css、js、图片）

使用 CSS、JS、图片和其他资源在 Jekyll 中非常简单。只需将它们放入你的网站文件夹，它们就会被复制到生成的站点中。

Jekyll 站点通常使用以下结构来整理资源文件：

.
├── assets
│   ├── css
│   ├── images
│   └── js
...

因此，在 assets 文件夹内创建 css、images 和 js 文件夹。此外，在根目录下再创建一个名为 _sass 的文件夹，稍后你会用到它。

Sass

在 _includes/navigation.html 文件中直接内联样式（即在同一文件内添加或配置样式）并不是最佳做法。
相反，我们可以通过在一个新的 CSS 文件中定义样式类来美化当前页面。

为此，在 navigation.html 文件中引用该样式类（稍后你会进行配置）。首先，删除之前用于将当前链接变红的代码，并插入以下代码：

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if page.url == item.link %}class="current"{% endif %}>{{ item.name }}</a>
  {% endfor %}
</nav>

虽然你可以使用标准的 CSS 文件进行样式设置，但我们可以更进一步，使用 Sass。
Sass 是 CSS 的强大扩展，并且已内置在 Jekyll 中。

首先，在 assets/css/styles.scss 文件中创建一个 Sass 文件，并添加以下内容：

---
---
@import "main";

文件顶部的空 front matter（页面头部参数）告诉 Jekyll 需要处理这个文件。
@import "main" 告诉 Sass 默认在 _sass/ 目录下查找名为 main.scss 的文件（该目录你已经在网站的根目录下创建）。

此时，你只有一个主 CSS 文件。对于较大的项目，这种组织方式能让 CSS 结构更清晰。

接下来，在 _sass/main.scss 文件中创建 current 类，使当前链接显示为绿色：

.current {
  color: green;
}

你还需要在布局文件中引用这个样式表。

打开 _layouts/default.html，并在 <head> 部分添加样式表：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

这里引用的 styles.css 是 Jekyll 从 assets/css/styles.scss 生成的。

现在，打开 http://localhost:4000，
检查导航栏中当前页面的链接是否显示为绿色。

接下来，我们将介绍 Jekyll 最受欢迎的功能之一——博客系统。