Hugoでwebサイト構築(4) markdownで記事を書く

written: kengo
tag:

1. Hugoで記事を書いていく

前回のpartialの作り方までにサイトの基本構成であるパラメータの設定、基本レイアウトを作れました。 今回は、これらのレイアウトとマークダウンで記述した記事を連携して、実際にHTMLの記事を生成していきます。

「content」フォルダ内にmdファイルを入れることで記事となります。

1-1. 記事記述の概要

記事はMarkdown記法で記述していきます。 例を以下に示します。

content/sample.md

+++
date		= "2015-08-17"
title		= "Hugoページタイトル"
author		= "your name"
+++

# 1. 見出し1です。#1つ=h1タグ
本文を書きます。
単なる改行では文章はそのまま続きます。

## 1-1. 小見出し1です。##=h2タグ
文章を入れます。

2つ改行がはいると、pタグで段落分けされます。

# 2. 見出し2だよ
文章を入れます。  
改行前に半角スペースを二つ入れておくとbrタグが挿入され、改行になります。

mdファイル内は大きく2つの部分に分かれます。

ファイル先頭部にある+++で包まれたFront Matterと、そのあとに続くマークダウン本文です。

2. Front Matter

Front MatterはHugoだけでなくJekyllなどでも採用されていた記法です。 マークダウン記法の本文が始まる前に、YAMLやTOMLの記述による「各ページのパラメータ」を定めることができます。

2-1. Front Matterの書き方

Hugoでは、Front Matterの種類によって区切り文字が変わります。

TOML Front Matter (+++で区切る)

+++
parameter1 = "値"
parameter2 = true
+++

YAML Front Matter (—で区切る)

---
parameter1: "値"
parameter2: true
---

Hugoの場合、上記の記述のいずれでもパラメータとして認識してくれます。 認識したパラメータは、layoutのHTML内で使用することができます。

2-2. Front Matterのパラメータを使う

Front Matterで定義したパラメータは、layouts内のHTMLからアクセスできます。 いくつかある基本となるパラメータはそのままアクセスできます。例を以下に示します。

まず記事でFront Matterを記述します。

content/sample2.md

+++
date  = "2015-05-08"
title = "こんにちわ Hugo"
+++

次にレイアウトで.mdで指定したパラメータを挿入する記述を行います。

前回作成したヘッダとフッタのpartialを使い、 基本レイアウト「single.html」を作ります。

layouts/_default/single.html

{{ partial "site_head.html" . }}

{{ .Title }}

{{ partial "site_foot.html" . }}

上記の例では、各記事のFront Matterに設定した「date」のパラメータが{{ .Date }}に、 「title」のパラメータが{{ .Title }}に適用されます(規定のパラメータは、利用時に頭文字が大文字になります)。

規定のパラメータ

Hugoの規定のパラメータはPage Variables一覧を参考にしてください。

2-3. Front Matterのその他のパラメータ

Front Matterで基本となるパラメータ以外の任意のパラメータがある場合、 使い方が異なり{{ .Params.パラメータ名 }}で指定します。 記事にauthorというパラメータを追加した例を示します。

content/sample3.md

+++
date   = "2015-08-17"
title  = "たのしいHugo"
author = "日向太郎"
+++

2-2のsingle.htmlにもauthorを表示する部分を追加します。

layouts/_default/single.html(改良)

{{ partial "site_head.html" . }}

{{ .Title }}

{{ .Params.author }}
{{ partial "site_foot.html" . }}

3. 記事本文を挿入する

Front Matterの記述以下の部分全部が「本文」となります。 Markdown記法がそのままHTMLのタグへと変換されます。

記事本文を挿入するには{{ .Content }}を用います。 2-3のsingle.htmlに、さらに本文を追加してみます。

layouts/_default/single.html(改良2)

{{ partial "site_head.html" . }}

{{ .Title }}

{{ .Params.author }}
{{ .Content }}
{{ partial "site_foot.html" . }}

References