Step by Step チュートリアル

7. Assets

JekyllでCSSやJS、画像その他のファイルを使うのは、簡単です。サイトのフォルダにそれらを入れれば、サイトを構築する過程でコピーされます。

Jekyllのサイトでは、ファイルを整理するために次のような構成を取ることが多いです。

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

Sass

_includes/navigation.htmlのインラインスタイルは、ベストではありません。classを使用して、現在のページの表示スタイルを設定してみましょう。

<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のファイルを作成します。

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

冒頭にある空のfront matterは、Jekyllに処理が必要なファイルだと知らせるためのものです。@import "main"は、Sassへのsassディレクトリ（デフォルトではサイトのrootの_sass/）のmain.scssというファイルを探すようにという指示です。

この段階では、メインのcssファイルのみです。より大きなプロジェクトでは、CSSを整理するための素晴らしい方法になります。

以下の内容で、_sass/main.scssを作成します。

.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の最もポピュラーな機能、ブログについて見てみましょう。

Back