Jekyllのコレクションの紹介

Jekyllのコレクションは、同じタイプのコンテンツの周りに独自の分類を作成する簡単な方法を提供します。これは、グループに属する作品には最適ですが、実際には投稿ではなく、時系列で整理するべきではありません。コレクションの良い使用例は、コンテンツコラボレーターのためにこのWebサイトに実装されている著者ページです。

お気に入りの動物に関連するコンテンツを保持する簡単なanimalsコレクションを設定しましょう。

コレクションの構成

まず、_config.ymlファイルでコレクションを設定します。

_config.yml

collections:
  animals:
    output: true

output オプションをtrueに設定すると、コレクション内の各ドキュメントのページが生成されます。

次に、Jekyllサイトのルートフォルダーに _animals フォルダーを作成し、コレクション内の各動物のマークダウンファイルを入力します。

_animals/
  zebra.md
  lion.md
  alligator.md
  ...

これにより、たとえば / animal /zebraにアクセスして動物にアクセスできるようになります。必要に応じて、別のパーマリンク構造を定義することもできます…

_config.yml

collections:
  animals:
    output: true
    permalink: /my-animal/:name

…そして、それは私たちの動物のページを / my-animal /zebraのようなURLで利用できるようにします。

動物の属性のデフォルト値を定義できます。これは、コレクション内のすべてのドキュメントが同じレイアウトを共有する場合に役立ちます。たとえば、次のようになります。

_config.yml

collections:
  animals:
    output: true
    permalink: /my-animal/:name

defaults:

_config.yml に変更を加えた後、ローカルサーバーを再起動することを忘れないでください。

コレクションドキュメント

コレクションのmardownファイルの1つに含まれるコンテンツの例を次に示します。

_animals / zebra.md

---
layout: animal # You can ommit this if you've set it as a default
title: Zebra
class:     Mammalia
family: Equidae
headline: Zebras are the best!
picture: /images/animails/zebra.jpg
---

私たちの動物のそれぞれには、 title 、 class 、 family 、…、および[X180Xを使用して出力されるいくつかのマークダウンコンテンツ]の値が含まれます。 animalレイアウトの]テンプレート:Content。

レイアウト

単純なレイアウトがどのように見えるかの例を次に示します。

_layouts / animal.html

---
layout: default
---
<article class="animal">


    <img src="{{ page.picture }}" alt="Photo of a {{ page.title | downcase }}">


  <h1>Animal Profile: {{ page.title }}</h1>

  <div class="animal-class {{ page.class | downcase }}">
    {{ page.class }}
  </div>

  <div class="animal-family {{ page.family | downcase }}">
    {{ page.family }}
  </div>

  <div>
    {{ content }}
  </div>

</article>

ここで、 animal レイアウトは、defaultレイアウトに依存します。

コレクションドキュメントの一覧表示

コレクション内の各動物を一覧表示してリンクしたいページがあるとします。これは、site変数を介してコレクションにアクセスすることで簡単に実行できます。 url 属性が自動的に使用可能になり、ドキュメントに簡単にリンクできるようになることにも注意してください。

pages / animals.md

---
layout: page
title: "A list of animals"
permalink: "/animals/"
---

url 以外に、 content 、 output 、 path 、relative_pathなどの属性が各ドキュメントで自動的に使用可能になります。、コレクションおよび日付。

著者のユースケース

このWebサイトの場合、レイアウトに次のような投稿の作成者を取得します。

  <span class="author">
    <a href="{{ author.url }}">{{ author.title }}</a>
  </span>

著者の投稿は、著者コレクションの各ドキュメントのslug属性に相関する値を持つauthor属性を定義します。リキッドテンプレート言語の力のおかげで、各投稿の正しい著者を取得できます。

🦄静的なJekyllサイトのコレクションを作成して楽しんでください！詳細については、公式ドキュメントを参照してください。