ステップバイステップチュートリアル

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という名前のファイルを探すように指示します（Webサイトのルートフォルダの直下にすでに作成されています）。

この段階では、メインの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は、assets/css/で以前に作成したstyles.scssからJekyllによって生成されます。

http://localhost:4000を読み込み、ナビゲーションのアクティブなリンクが緑色であることを確認します。

次に、Jekyllの最も人気のある機能の1つであるブログを見ていきます。

戻る