高度な項目

このガイドをできるだけわかりやすくするために、いくつかの項目については簡単にだけ触れました。この高度なセクションでは、それらの項目についてより理解を深めるチャンスです。

Collections vs Front Matter vs Dataファイル

Jekyllにはデータを追加する方法がたくさんあるので、どれを使えばよいの？と混乱したと思います。いつもはっきりしているわけではないですが、決定のために私たちはいくつかのルールを使っています:

データがすでにCSV、YML、JSON形式であり、それらのファイル形式のファイルに情報をためている場合、Dataファイルを使います。
一般的な順序付けではない方法でデータを並べたい、また特定の1ページでしかそのデータを必要としないなら、Front Matterの配列を使います。
その他はCollectionを使います。Collectionsは最も柔軟な機能であり、たいてい良い選択です。

Collectionsでページを生成する

このガイドの前半で出てきたサービスの例で、サービスごとのページを生成したいと思ったかもしれません。Jekyllなら簡単にできます。

_config.ymlを変更します:

collections:
  services:
    output: true
defaults:
  -
    scope:
      path: ""
      type: "services"
    values:
      layout: "post"

それぞれのCollectionの項目にレイアウトを設定する必要もあるでしょう。それぞれのページに追加するかわりに、Servicesコレクションに対してdefaultレイアウトを設定しました。

services.htmlに作成したページへのリンクを追加するだけです:

...
{% for service in site.services %}
  <div class="col-lg-3 col-md-6 text-center">
    <div class="service-box">
      <img src="{{ service.image_path }}" alt="{{ service.title }}"/>
      <h3><a href="{{ service.url }}">{{ service.title }}</a></h3>
      <p class="text-muted">{{ service.content | truncatewords: 10 }}</p>
    </div>
  </div>
{% endfor %}
...

フィルター: {{ service.content | truncatewords: 10 }}を使うことで、ページに10単語しか表示しないよう制限しています。フィルターはコンテンツの出力に、少し手を加える事ができます。こちらでさらに多くのフィルターが探せます。

ページネーション

数えるのが大変になってくるほど、ブログの記事数が増えてきたとします。 Jekyllではページネーションを使って、ブログの記事一覧を、複数ページに切り分けることができます。

ページネーションを有効にするには_config.ymlを開き、paginate変数を設定します。こちらは1ページにいくつ記事を表示するかというものです:

...
paginate: 5
paginate_path: "/blog/page:num"
...

blog.htmlを/blog/index.htmlに変更する必要もあります。これは、ページネーションのURLがうまく動作するために必要です。URLは/blog/page2のようになるでしょう。

次に、先ほどファイルを移動したので、_includes/nav.htmlのリンクを変更する必要があります。

...
<li {% if page.url == "/blog/index.html" %} class="active" {% endif %}>
  <a href="/blog/">Blog</a>
</li>
...

最後に、ページネーションを使うために/blog/index.htmlを更新しましょう。

---
layout: default
title: Blog
---
<section class="bg-dark">
  <div class="text-center">
    <h1>Blog</h1>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="text-center">
        <ul style="list-style-position: inside">
           {% for post in paginator.posts %}
             <li>
               <a href="{{ post.url }}">{{ post.title }}</a> - {{ post.date | date: "%d %B %Y" }}
             </li>
           {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</section>

<nav>
  <ul class="pager">
    {% if paginator.previous_page %}
      <li><a href="{{ paginator.previous_page_path }}">Previous</a></li>
    {% endif %}

    {% if paginator.next_page %}
      <li><a href="{{ paginator.next_page_path }}">Next</a></li>
    {% endif %}
  </ul>
</nav>

Jekyllは、複数ページに分割するためにpaginator変数を使えるようにしてくれます。前/次というリンクもページの下部で追加しています。

よりよいナビゲーション

より少ないコードで重複を無くしたナビゲーションを作る1つの方法は、他のソースからリンクを引っ張ってくることです。。 CSVファイルを使ってやってみましょう。

_data/nav.csvを以下の内容で作成します:

name,link
About,/about.html
Services,/services.html
Portfolio,/portfolio.html
Blog,/blog/index.html
Contact,/contact.html

そして_includes/nav.html内で、このCSVに対して繰り返し処理をします:

...
<ul class="nav navbar-nav navbar-right">
  {% for nav_item in site.data.nav %}
    <li {% if page.url == nav_item.link %} class="active" {% endif %}>
      <a href="{{ nav_item.link }}">{{ nav_item.name }}</a>
    </li>
  {% endfor %}
</ul>
...

まとめ

願わくば、このガイドが、よい基礎の獲得に役立てばと思います。これから、美しいJekyllサイトとともに、インターネットに飛び出しましょう。

もし行き詰まったり、助けが必要なときは、Jekyllの公式サイトにとてもすばらしいドキュメントがあります。 talk.jekyllrb.comというコミュニティもすばらしい教材です。

Happy Jekylling!

Guide