目次
デフォルトのテーマ (minima)
Jekyll はデフォルトの状態では minima というテーマが当てられています。
minima を削除する
minima を削除するには Gemfileと_config.ymlで以下の行を削除、またはコメントアウトします。
Gemfile
# This is the default theme for new Jekyll sites. You may change this to anything you like.
gem "minima", "~> 2.5"
_config.yml
theme: minima
自作のレイアウトを作成
自作のレイアウトは _layouts ディレクトリに作成します。
今回はとてもシンプルなレイアウトを作成してみます。
Jekyll が生成したプロジェクトでは default, home, page, post の 4 つのレイアウトが必要です。
_layouts/default.html
default は全てのレイアウトのベースとなるように作成します。
<html>
<head>
<title>{{ site.title }}</title>
</head>
<body>
<header>
<a href="/">{{ site.title }}</a>
</header>
<main>{{ content }}</main>
</body>
</html>
_layouts/home.html
home では記事一覧を表示します。
---
layout: default
---
<ul>
{% for post in site.posts %}
<li>
<span> {{ post.date | date: "%Y-%m-%d" }} </span>
<a href="{{ post.url }}">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
_layouts/page.html
page は特に何もせず、 default を継承しただけにしました。
---
layout: default
---
{{ content }}
_layouts/post.html
post レイアウトではブログの記事を表示します。
---
layout: default
---
<div class="post">
<h1 class="post__title">{{ page.title }}</h1>
<span class="post__date">{{ page.date }}</span>
<div class="post__content">{{ content }}</div>
</div>
動作確認
Jekyll サーバーを再起動して http://localhost:4000 にアクセスすると次のように表示が変わったことがわかります。
