分步教程

7. 资产

使用 Jekyll，使用 CSS、JS、图像和其他资产非常简单。将它们放在你的网站文件夹中，它们将复制到构建的网站中。

Jekyll 网站通常使用此结构来保持资产的井井有条

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

因此，从你的资产文件夹中，创建名为 css、images 和 js 的文件夹。此外，直接在根目录下创建另一个名为 _sass 的文件夹，你很快就会需要它。

Sass

内联 _includes/navigation.html 中使用的样式（在同一文件中添加或配置）不是最佳实践。相反，让我们通过在一个新 css 文件中定义我们的第一个类来设置当前页面的样式。

为此，通过从 navigation.html 文件中删除你之前添加的代码（将当前链接着色为红色）并插入以下代码，从 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";

顶部的空前端信息告诉 Jekyll 它需要处理该文件。 @import "main" 告诉 Sass 在 sass 目录（默认情况下为 _sass/），查找名为 main.scss 的文件，你已经直接在网站的根文件夹下创建了该文件）。

在此阶段，您只需拥有一个主 css 文件。对于大型项目，这是保持 CSS 井井有条的好方法。

创建上述当前类以将当前链接着色为绿色。在 _sass/main.scss 中创建一个 Sass 文件，内容如下

.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 生成。

加载 https://#:4000，并检查导航中的活动链接是否为绿色。

接下来，我们将了解 Jekyll 最流行的功能之一，即博客。

下一步