今回は、少し細かいところになりますが、titleタグとmeta descriptionをよしなに表示させるようにします。
Jekyllのテーマを自作する 基本編 記事一覧
- Jekyllのテーマを自作する 基本編 – はじめに –
- Jekyllのテーマを自作する 基本編 – 第1回 – 初期データを作成する
- Jekyllのテーマを自作する 基本編 – 第2回 – 設定ファイルを作成する
- Jekyllのテーマを自作する 基本編 – 第3回 – 基本レイアウトを作成する
- Jekyllのテーマを自作する 基本編 – 第4回 – Sass（CSS）でスタイルを作成する
- Jekyllのテーマを自作する 基本編 – 第5回 – titleタグとmeta descriptionを作成する ←いまここ
- Jekyllのテーマを自作する 基本編 – 第6回 – トップページに記事一覧を作成する
- Jekyllのテーマを自作する 基本編 – 第7回 – ページネーションを作成する
- Jekyllのテーマを自作する 基本編 – 第8回 – 記事のフィード（feed.xml）を作成する
- Jekyllのテーマを自作する 基本編 – 第9回（終） – まとめ
titleタグを修正する
こんな感じに表示できるようにします。
- トップページでは「サイトタイトル | サイトの説明文」と表示する
- 他のページでは「ページタイトル | サイトタイトル」と表示する
if文を使って、「_layouts/default.html」のtitleタグ内を以下のように書き換えます。
<title>{% if page.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }} | {{ site.description}}{% endif %}</title>meta descriptionを修正する
meta descriptionはこんな感じに表示できるようにします。
- トップページではサイトの説明文を表示する
- それ以外ページでは、ページの概要を表示する（160文字）
If文を使って以下の用に書き換えます。
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">page.excerptは、デフォルトの設定では、ページの最初の一段落を取得します（厳密には'\n\n'の前まで）。
WordPressのように、<!–more–>前までなどに変更する場合は、_config.ymlに以下のように記述します。
excerpt_separator: "<!--more-->"「_layouts/default.html」はこのようになりました。
さて、今回は以上です。次回はトップページの記事一覧を作成します。