2018.03.04 2019.01.14

Jekyllでアーカイブページを作る

jekyll/jekyll-archives を利用してアーカイブページを作成します

Ruby Jekyll ブログ

バックエンド

[ 目次 ]

はじめに
gemをインストール
_config.ymlに設定を追加
アーカイブページのHTMLを作成
アーカイブページのリンクを作成

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

この記事は過去に運用していたブログからの移行記事になります。

ブログの記事も徐々に増えてきたので、jekyll/jekyll-archivesを利用してアーカイブページを作成します。

gemをインストール

Gemfileにjekyll-archivesを追加します。

#Gemfile
group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.6"
  gem 'jekyll-sitemap'
  gem 'jekyll-pwa-plugin'
  gem 'jekyll-minifier'
  gem 'jekyll-archives' <--- これを追加
end

続いてbundle installコマンドを実行し、gemをインストールします

$ bundle install 
or
$ bundle install --path vendor/bundler

※ プロジェクト配下にインストールするかどうかでコマンドを変えてください。

_config.ymlに設定を追加

_config.ymlファイルのpluginsにjekyll-archivesの設定を追加します。

# _config.yml
plugins:
  - jekyll-feed
  - jekyll-sitemap
  - jekyll-minifier
  - jekyll-archives <--- これを追加

すでにcategoryやtagのページは独自に作成済みなので、今回は月ごとのアーカイブを作成します。

_config.ymlに以下の設定を追加します。

# _config.yml
jekyll-archives:
  enabled: [month]
  layouts:
    month: month_archive
   permalinks:
    month: '/archives/month/:year:month/'

enabledをallにすることで、year, month, day, tag, categoryの全てのアーカイブページが作成されます。今回はmonthのみアーカイブページを作成します。
全てのアーカイブページを作成する場合、以下のような設定になります。

# _config.yml
jekyll-archives:
  enabled: [all]
  layouts:
    year: year-archive
    month: month-archive
    day: day-archive
    tag: tag-archive-layout
  permalinks:
    year: '/archives/year/:year/'
    month: '/archives/month/:year:month/'
    day: '/archives/month/:year:month:day/'
    tag: '/archives/tag/:name/'
    category: '/archives/category/:name/'

アーカイブページのHTMLを作成

_layoutsにmonth_archive.htmlを作成します。
今回は以下のようなhtmlを作成しています。

<!-- _layouts/month_archive.html -->
---
layout: default
---
<section class="section">
    <div class="container">
        <nav class="breadcrumb m-b-none" aria-label="breadcrumbs">
            <ul style="margin-left: 0">
                <li><a href="/"><i class="fas fa-home"></i></a></li>
                <li class="is-active"><a href="#" aria-current="page">{{ page.date | date: "%Y/%m" }}</a></li>
            </ul>
        </nav>
        <h1 class="title">{{ page.date | date: "%Y/%m" }}</h1>
        <h2 class="subtitle is-size-7-mobile is-size-6-desktop has-text-grey">{{ page.date | date: "%Y/%m" }}のアーカイブページになります。</h2>
        <div class="home">       
            <div class="columns">
                <div class="column is-two-thirds">
                    {% if site.posts.size > 0 %}
                        {% for post in page.posts %}
                            <article class="card post-card">
                            {% if post.thumbnail %}
                                <a class="post-card__thumbnail" style="background-image: url({{ post.thumbnail }})" href="{{ post.url | relative_url }}"></a>
                            {% endif %}
                            <div class="card-content post-card__content">
                                <h3 class="title post-card__content__title m-b-sm"><a href="{{ post.url | relative_url }}" title="{{ post.title | escape }}">{{ post.title | escape }}</a></h3>
                                <p class="m-b-sm">{{ post.description | escape }}</p>
                                {% if post.tags %}
                                    <p class="m-b-sm">
                                    {% for tag in post.tags %}
                                        {% assign tag_name = tag | replace: " ", "_" %}
                                        <a href="{{ '/tags/' | append: tag_name | relative_url }}" class="tag is-link">
                                            {{ tag }}
                                        </a>
                                    {% endfor %}
                                    </p>
                                {% endif %}
                                {% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
                                <span class="post-meta">{{ post.date | date: date_format }}</span>
                            </div>
                            </article>
                        {% endfor %}
                    {% endif %}
                </div>
                <div class="column"></div>
            </div>
        </div>
    </div>
</section>

※ 各自の環境にあったHTMLに調整してください。

アーカイブページのリンクを作成

全投稿の日付を元にアーカイブページへのリンクを作成します。
リンクは複数のページから呼び出すので、別ファイルを用意しincludeを利用して読み込みます。
まずは、_includesにmonth_archive_links.htmlを作成します。

<!-- _includes/month_archive_links.html -->
<nav class="panel">
    <p class="panel-heading is-dark is-size-6">
        Archives
    </p>
    {% for post in site.posts %}
        {% unless post.next %}
            {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
            {% capture month %}{{ post.date | date: '%m' }}{% endcapture %}
            <a href="{{ '/archives/month/' | append: year | append: month | relative_url }}" class="panel-block">
                <span class="panel-icon">
                <i class="fas fa-book"></i>
                </span>
                {{ year }}/{{ month }}
            </a>
        {% else %}
            {% capture month %}{{ post.date | date: '%m' }}{% endcapture %}
            {% capture nmonth %}{{ post.next.date | date: '%m' }}{% endcapture %}
            {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
            {% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
            {% if month != nmonth %}
                <a href="{{ '/archives/month/' | append: year | append: month | relative_url }}" class="panel-block">
                    <span class="panel-icon">
                    <i class="fas fa-book"></i>
                    </span>
                    {{ year }}/{{ month }}
                </a>
            {% else %}
                {% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
                {% if year != nyear %}
                    <a href="{{ '/archives/month/' | append: year | append: month | relative_url }}" class="panel-block"><span class="panel-icon"><i class="fas fa-book"></i></span>{{ year }}/{{ month }}</a>
                {% endif %}
            {% endif %}
        {% endunless %}
    {% endfor %}
</nav>