Step by Step チュートリアル

8. ブログ

データベースを使わず、どうやってブログにするのか不思議に思っているのではないでしょうか。Jekyllのスタイルなら、テキストファイルだけでブログを作ることができます。

ポスト

ブログポストは_postsフォルダに入れます。ポストのファイル名は特別なフォーマットで、公開日、タイトル、拡張子です。

最初のポストを、以下の内容で_posts/2018-08-20-bananas.mdとして作成しましょう。

---
layout: post
author: jill
---
A banana is an edible fruit – botanically a berry – produced by several kinds
of large herbaceous flowering plants in the genus Musa.

In some countries, bananas used for cooking may be called "plantains",
distinguishing them from dessert bananas. The fruit is variable in size, color,
and firmness, but is usually elongated and curved, with soft flesh rich in
starch covered with a rind, which may be green, yellow, red, purple, or brown
when ripe.

以前作成したabout.mdに似ていますが、レイアウトが異なり、著者（author）の指定が入っています。authorはカスタム変数で、必須ではありませんし、creatorの様な名前にすることもできます。

レイアウト

postレイアウトがありませんので、以下の内容で_layouts/post.htmlを作成しましょう。

---
layout: default
---
<h1>{{ page.title }}</h1>
<p>{{ page.date | date_to_string }} - {{ page.author }}</p>

{{ content }}

これはレイアウトを継承する例です。postレイアウトはタイトル、日付、著者をコンテンツをdefaultレイアウトのbodyに出力します。

date_to_stringはフィルタで、日付のフォーマットをより良いフォーマットに変換します。

ポストのリスト

ブログポストへの移動方法がまだありません。通常ブログはポストのリストのページがあります。次はそれを作ってみましょう。

Jekyllはポストをsite.postsで使用可能にします。

以下の内容のblog.htmlをroot（/blog.html）に作成します。

---
layout: default
title: Blog
---
<h1>Latest Posts</h1>

<ul>
  {% for post in site.posts %}
    <li>
      <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
      {{ post.excerpt }}
    </li>
  {% endfor %}
</ul>

このコードのメモです。

post.urlはJekyllが自動でセットするポストの出力するパスです。
post.titleはポストのファイル名から取得され、front matterでtitleを設定することで上書きできます。
post.excerptはデフォルトではポストの内容の最初の段落です。

また、メインナビゲーションにこのページへの移動が必要です。_data/navigation.ymlを開き、ブログページを追加しましょう。

- name: Home
  link: /
- name: About
  link: /about.html
- name: Blog
  link: /blog.html

ポストを増やす

一つのポストだけのブログは面白くありません。もう少し追加しましょう。

_posts/2018-08-21-apples.md:

---
layout: post
author: jill
---
An apple is a sweet, edible fruit produced by an apple tree.

Apple trees are cultivated worldwide, and are the most widely grown species in
the genus Malus. The tree originated in Central Asia, where its wild ancestor,
Malus sieversii, is still found today. Apples have been grown for thousands of
years in Asia and Europe, and were brought to North America by European
colonists.

_posts/2018-08-22-kiwifruit.md:

---
layout: post
author: ted
---
Kiwifruit (often abbreviated as kiwi), or Chinese gooseberry is the edible
berry of several species of woody vines in the genus Actinidia.

The most common cultivar group of kiwifruit is oval, about the size of a large
hen's egg (5–8 cm (2.0–3.1 in) in length and 4.5–5.5 cm (1.8–2.2 in) in
diameter). It has a fibrous, dull greenish-brown skin and bright green or
golden flesh with rows of tiny, black, edible seeds. The fruit has a soft
texture, with a sweet and unique flavor.

http://localhost:4000を開き、ブログポストを確認してみましょう。

次は、ポストの著者のページの作成に焦点を合わせます。

Back