5 posts tagged with "Jekyll"

サイトをリニューアルしました．そして、数年振りのブログ更新です． 自分のサイトを持つ意味があまりなくなってきている感じはしますが、もはや学習も含めて新しいフレームワークを使ってみるテストになりつつあります．

jekyll-archives を使うと、日付・カテゴリ・タグごとにアーカイブページを生成してくれます。

jekyll-archives

まずはインストールします。

gem install jekyll-archives

次に _config.yml を編集して生成するようにします。

gems: [jekyll-archives] jekyll-archives: enabled: [all] layout: 'archive' permalinks: year: '/archives/year/:year/' month: '/archives/month/:year:month/' day: '/archives/month/:year:month:day/' tag: '/archives/tag/:name/' category: '/archives/category/:name/'

この設定だと、すべてのアーカイブページを archives フォルダ以下に作成します。 例えば 2016 年の記事の場合 /archives/year/2016 になります。

enabled のところで生成する種類を指定できます。all ならすべて、[year, tag, category] なら年・タグ・カテゴリの３種類になります。

layout ではアーカイブページのレイアウトを指定します。今回は archive と指定しているので、_layouts/archive.html となります。 レイアウトについては こちら を参照してください。

各アーカイブページへのリンクは自分で作成する必要があります。 それについては こちらの記事 を参照してください。

こちらの記事 では jekyll-archives を使った方法を紹介しました。 ですが、GitHub Pages では動作しません。 ここでは GitHub Pages で使える機能でアーカイブページを作成します。

年月日​

全記事から年月日を参照して、列挙します。 記事の列挙は次のようになります。

{% for post in site.posts %}
    {{ post.title }}
{% endfor %}

記事の日付は post.date です。 年月ごとに列挙する場合は次のようになります。

{% for post in site.posts %}
{% unless post.next %}
    {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
    {% capture month %}{{ post.date | date: '%m' }}{% endcapture %}
    <h2 id="{{year}}{{nmonth}}">{{ month }}/{{ year }}</h2>
    <ul class="posts">
    <li>
        <span class="post-date">{{ post.date | date_to_string }} &raquo;</span>
        <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
    </li>
{% else %}
    {% capture month %}{{ post.date | date: '%m' }}{% endcapture %}
    {% capture nmonth %}{{ post.next.date | date: '%m' }}{% endcapture %}
    {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
    {% if month != nmonth %}
    </ul>
    <h2 id="{{year}}{{nmonth}}">{{ month }}/{{ year }}</h2>
    <ul class="posts">
    {% else %}
    {% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
    {% if year != nyear %}
        </ul>
        <h2 id="{{year}}{{nmonth}}">{{ month }}/{{ year }}</h2>
        <ul class="posts">
    {% endif %}
    {% endif %}
    <li>
    <span class="post-date">{{ post.date | date_to_string }} &raquo;</span>
    <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
    </li>
{% endunless %}
{% endfor %}
</ul>

post.date はそのまま出力すると 2016-06-18 00:00:00 +0900 となってしまいます。 {{ post.date | date_to_string }} とすると 18 Jun 2016 というように変換されます。 date_to_string 以外にも細かく指定するオプションがあります。ここでは詳しく解説しません。

post.next は次の記事ですが、最後の記事の場合 nil になります。そのため unless を使って処理を分岐しています。

{% capture year %} は {% capture year %} と {% endcapture %} で囲んだ内容を year に代入します。

カテゴリ​

カテゴリの列挙は次のようになります。

{% for category in site.categories %}
    {% capture name %}{{ category[0] }}{% endcapture %}
    <h2>{{ name }} ({{ site.categories[name] | size }})</h2>
    <ul class="posts">
    {% for post in site.categories[name] %}
    <li>
        <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
        <span class="post-date">{{ post.date | date_to_string }}</span>
    </li>
    {% endfor %}
    </ul>
{% endfor %}

例えば hoge というカテゴリ名の場合 site.categories.hoge で記事を列挙できます。 変数を使って参照する場合は site.categories[variable] というようになります。

site.categories.hoge | size を指定すると記事数を取得できます。

タグ​

カテゴリとやり方は同じです。タグの場合、site.tags になります。

{% for tag in site.tags %}
    {% capture name %}{{ tag[0] }}{% endcapture %}
    <h2>{{ name }} ({{ site.tags[name] | size }})</h2>
    <ul class="posts">
    {% for post in site.tags[name] %}
    <li>
        <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
        <span class="post-date">{{ post.date | date_to_string }}</span>
    </li>
    {% endfor %}
    </ul>
{% endfor %}

これで、カテゴリ一覧やタグ一覧などが作れます。あとは好きなようにレイアウトしてあげればいいです。

site.url は _config.yml で設定されています。ローカル環境で確認しているときは site.url が localhost:4000 だと便利です。 _config.yml を複製し _config-dev.yml という名前にします。この名前は適当で構いません。 下記のコマンドを実行することで _config-dev.yml を参照するようになります。

jekyll serve -w --config _config-dev.yml

GitHub Pages + Jekyll の環境を構築したので、現在のブログ（随分更新していない）から Jekyll へのインポートを試してみました。 使ったのは Jekyll Exporter です。 WorldPress のプラグイン管理からインストールしました。

インストールしたときはエラーが出ていたので、WorldPress を最新にアップデート。 そしたら WordPress 自体が動かなくなったので PHP のバージョンを最新に。 それでも動かなかったので、Jekyll Exporter が動作する PHP 5.3 に。これで WorldPress、Jekyll Exporter ともに有効に。

WordPress の管理画面から Export To Jekyll を選択して出力。 zip ファイルなので適当な場所に解凍して、_posts に入っているファイルをコピー。 Jekyll でビルドするもエラー。Windows だと、rb_sysopen で失敗。CentOS7 だと Protocol Error で失敗。
とりあえず、CentOS 側で原因調査したところ、エラーの内容を見るにパーマリンクが怪しかった。
なので、WordPress のパーマリンク設定でカスタム構造にし、/%category%/%postname% に変更。 カテゴリのスラッグをすべて設定して、英文字で出力できるように。 これで、もう一度 Export To Jekyll をしてビルドをすると、CentOS7 では成功。でも、Windows では変わらずエラー。 Windows のエラーはよくわからんです。

参考​

• WordPressのパーマリンク設定を変更して、SEOや日本語URLの対策をしよう