Collections

次は、Collectionsを見ていきましょう。 Collectionsはコンテンツの関係性をまとめるための、すばらしい方法です。Postsと動作は似ていますが、日付を必要としません。

Servicesページ内で、HTMLの繰り返しを減らすために、Collectionを使っていきましょう。

各サービスは同じようなパターンの形式をしています。画像があり、タイトルと説明があります。現時点ではServiceページのアイコンはフォントですので、クライアントの方が自身で簡単に更新できるよう、画像に変更しましょう。

まず、Jekyllにコレクションについて伝える必要があります。_config.ymlに以下を追加してください:

collections:
  - services

そして、_servicesというフォルダをウェブサイトルートに作成してください。（CloudCannonで編集している場合は、まずファイルをつくってからフォルダに移動させるんでしたね。覚えておいてください。）

フォルダのなかに、web_design.mdというファイルを以下の内容で作成してください:

---
title: Web Design
image_path: ""
---

Beautiful, clean designs tailored to your business

Front Matterを使って、サービスの情報を定義し、マークダウンファイルに説明を書いていきます。

CloudCannonのCollectionsタブに移動すると、Servecesコレクションがあることがわかるでしょう。

Collections

Web Designの項目を開きましょう。ビジュアルエディタを使って、簡単に項目を管理できます。 Web Designに画像を追加しましょう。こちらでダウンロードできる無料のフラットアイコンセットを使っていきましょう。

Add Image Pathをクリックして、適切なアイコンをアップロードしましょう。

Add Image

続けてもう3つのサービスも追加しましょう。Content Writing、SEO、Social Media Marketingを追加しました。

次に、services.htmlでこれらのサービスを表示させる必要があります。 Jekyllでは、site.servicesという変数を使うことで、サービスコレクションが使えるようになります。

Liquidと全てのサービスに対する繰り返し処理を使って、現在の静的な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>{{ service.title }}</h3>
      <p class="text-muted">{{ service.content }}</p>
    </div>
  </div>
{% endfor %}
...

とてもシンプルですね。site.servicesに対して、forループの繰り返し処理を行っただけです。これによって、さきほど作成したFront Matterの変数を出力することができます。

services.htmlの全体像は、現在以下のようなになります:

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

<section id="services">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading">At Your Service</h2>
        <hr class="primary">
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      {% 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>{{ service.title }}</h3>
            <p class="text-muted">{{ service.content }}</p>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

これだけです！これで、クライアントはCollectionsを使い、簡単にサイトを管理できるようになります。

Final

Guide

Collections