逐步教學

7. 資產

使用 Jekyll 處理 CSS、JS、圖片和其他資產非常簡單。將它們放置在您的網站資料夾中，它們就會複製到建置的網站中。

Jekyll 網站經常使用此結構來整理資產

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

因此，在您的資產資料夾中，建立名為 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 是 Jekyll 內建的出色 CSS 延伸。

首先在 assets/css/styles.scss 建立一個 Sass 檔案，內容如下

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

頂端的空前置事項告訴 Jekyll 它需要處理這個檔案。 @import "main" 告訴 Sass 在 sass 目錄 (_sass/) 中尋找名為 main.scss 的檔案，預設情況下，你已經在網站的根目錄下直接建立它了。

在此階段，你只會有一個主要的 css 檔案。對於大型專案來說，這是保持 CSS 井然有序的好方法。

建立上述的 current 類別，以將目前連結的顏色設為綠色。在 _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 最受歡迎的功能之一：部落格。