[Hugo] Learn で構築したサイトにページを追加する方法まとめ

# 概要
Hugo で構築したサイト（テーマ：Learn）にページの追加とレイアウトを適用する手順についてまとめる。

# 前提
- [[Docker] Hugo を利用するための環境構築](https://qiita.com/ub0t0/items/4ac2f2d8c3e8fbdfcfad)
- [[Docker] Hugo でサイトを構築し、GitHub で公開](https://qiita.com/ub0t0/items/39b1649dffcba23517a6)

上記に記載の手順環境構築、ページの作成を行っており、「content」 フォルダに以下に posts フォルダがあることを前提として説明する

```
content
└── posts
    └── my-first-post.md
```

現時点で完成しているページ
![スクリーンショット 2020-09-16 23.06.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/aa60684d-80fa-53f6-178b-9e8580e5a727.png)

# ゴール
ページ（子）の追加とインデックスページ（親）の設定を行い、以下のようなサイトを作成することをゴールとする
#### サイト
![スクリーンショット_2020-10-15_15_55_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/9c999443-ad42-a46e-15bb-67df6e17367b.png)

#### フォルダ構成
最終的なファイル構成は以下の通り

```
content
├── _index.md         // baseurl 
└── posts　　　
    ├── _index.md     // .../post 
    ├── my-first-post.md　　　　// .../post/my-first-post
    └── my-second-post.md　　　// .../post/my-second-post
```
サイトのインデックスページ、ページの設定はフォルダ構成に依存する

# ページの作成
`hugo new`コマンドを実行することでページ(子)が作成される。
[前回の記事](https://qiita.com/ub0t0/items/39b1649dffcba23517a6)で、以下のコマンドを実行済

```
hugo new posts/my-first-post.md　
```

このコマンドを実行することで、「archetypes」フォルダの「default.md」 ファイルに記載している内容が指定した.md ファイルに追加される。

デフォルトで追加される項目は以下の通り

```default.md
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---
```
これらのパラメーターを埋めることで、Web サイトを作ることができる。

## 目次のタイトル名の変更方法
目次のタイトルの変更方法について説明する
![スクリーンショット_2020-10-13_15_03_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/b66ddc20-8d87-dbec-2e91-585c8c0f32f9.png)

タイトルは、「my-first-post.md」の「title:」で設定しているため、ここの文字列を変更する

```my-first-post.md
---
title: "My First Post" // ここで指定している
date: 2020-XX-XX
draft: true
---

# タイトル
hoge サイトを作成してみる
```
`title: "第1章" `に変更すると、以下の 3 箇所が変更される
![スクリーンショット_2020-10-13_15_13_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/01ae2671-6791-725d-1f66-4ae6c9897e85.png)


## ページ（子）の追加方法
ページの追加方法は、以下の２通り
1.新規でページを作成した時と同様に、`hugo new` コマンドで実行
2.`hugo new`コマンドを実行した時に追加される項目を手動で記入

default.md ファイルの中身をコマンドで行うか、手動で入力するかの違いである

ここでは、「my-first-post.md」をコピーして、「my-second-post.md」と名前を変更し、同じ階層に保存し、ページを追加する

```my-second-post.md
---
title: "第2章"
date: 2020-XX-XX
draft: true
---

# ページの追加
my-first-post.md をコピーして中身を修正し、my-second.mdファイルとして保存
```
ページが追加された
![スクリーンショット 2020-10-13 15.27.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/9f0940bb-2e30-37eb-f2a6-44dbb1bd8f72.png)



## インデックスページ（親）の追加
「Post」 や「My New Hugo Site」をクリックした時に、表示されるページの設定を行いたい
![スクリーンショット_2020-10-13_15_34_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/fd24b38b-17ba-74fb-1da4-0ba7ef787826.png)
現在のファイル構成をみると、以下の通りになっている。これらは、インデックスページと呼ばれる、親ページである。[Learn ガイド:_index.md]((https://gohugo.io/content-management/organization#index-pages-_indexmd)) 

```
content
└── posts
    ├── my-first-post.md
    └── my-second-post.md
```
デフォルトでは、「Post」 や 「My New Hugo Site」 ページを構成しているファイルがない。それぞれのフォルダに`_index.md`を作成することで、ページを構成できる。

##### content > _index.md の追加
```_index.md
---
title: "サイトの案内"
date: 2020-XX-XX
draft: true
---
このサイトでは、Learn のカスタマイズをテストしています。
```
![スクリーンショット 2020-10-13 15.49.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/61975d16-f56f-2ad0-1910-ca87e87db705.png)


##### posts > _index.md の追加

```_index.md
---
title: "カスタマイズ手順"
date: 2020-XX-XX
draft: true
---
# Learn のカスタマイズ
_index ファイルを作成することで、このページを編集できるようになります。
```
![スクリーンショット 2020-10-13 15.49.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/16bd2310-efa5-fb2a-464a-8ecd1b5a33f5.png)

ここまでの操作で、以下のようなファイル構成となった

```
content
├── _index.md
└── posts
    ├── _index.md
    ├── my-first-post.md
    └── my-second-post.md
```


## ページのレイアウトの適用
Learn では通常のページのレイアウトの他に、チャプターページ用のレイアウトを提供している 
[Learn ガイド:Create your first chapter page](https://themes.gohugo.io//theme/hugo-theme-learn/en/basics/installation/)
ヘッダー部分に、`chapter: true` と追記し、以下のように記載することでレイアウトが適用される

```
### 小見出し
# タイトル
ここに文章をかく
```

posts > _index.md ファイルにチャプター用のレイアウトを適用

```_index.md
---
title: "カスタマイズ手順"
date: 2020-XX-XX
draft: true
chapter: true // 追記
---
### 初心者向け
# Learn のカスタマイズ
_index ファイルを作成することで、このページを編集できるようになります。
```
![スクリーンショット 2020-10-13 16.01.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/ba95e152-761b-8efe-cf3e-d340c2eebdc6.png)



# 参考
[Hugo Learn ガイド](https://themes.gohugo.io//theme/hugo-theme-learn/en)
[Hugo コンテンツ編成](https://gohugo.io/content-management/organization/)