Hugo導入記(3) ドキュメントルート用index.html

Categories
Tags
Share

では、ドキュメントルート用のindex.htmlを書いていきましょう。 前回、テーマ「happy」を作ったので、それを編集していきます。

まず、layoutsディレクトリをおさらいします。

themes/happy/layouts/
├── 404.html
├── _default
│   ├── list.html
│   └── single.html
├── index.html
└── partials
    ├── footer.html
    └── header.html

この、index.htmlを編集していきます。

index.htmlを編集

では書いていきましょう。 まずは、header部分や、footer部分を書きましょう。 最初は、余計な情報・ロジックはなるべく載せないようにします。 これをthemes/happy/index.htmlにコピーしてください。

<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="{{ .RSSlink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}">
<title>{{ $isHomePage := eq .Title .Site.Title }}{{ .Title }}{{ if eq $isHomePage false }} - {{ .Site.Title }}{{ end }}</title>
</head>
<body>
  <noscript>当サイトはJavaScriptを使用しています。JavaScriptを有効にしてください。</noscript>
  <div class="blog-header">
    <header>
      <h1><a href="/">ブログのタイトル</a></h1>
      <p>ブログの説明など</p>
    </header>
  </div>
  <!-- 先頭からここまでがヘッダー共通部分 -->
  
  <main>
    <h1>テスト</h1>
    <!-- あとで記事表示部分を入れる -->
  </main>
  
  <!-- ここから最後まで、フッター共通部分 -->
  <div class="blog-footer">
    <footer>
      <p class="copyright">Copyright &copy;</p>
    </footer>
  </div>
</body>
</html>

では、確認してみましょう。Hugoのプロジェクトのディレクトリで以下を入力してHugoのサーバーを立ち上げておきます。

hugo server -t happy -w -D

これで、http://localhost:1313/にアクセスすると、以下のような画面が表示されます。

ドキュメントルートを表示してみたところ

この状態でも、一応テンプレートは出来上がっていますが、追加された記事が画面に表示されるような処理は書いていません。 追加された記事を表示したいところですが、その前に、まずは共通部分を他のファイルに分けて、分離してみましょう。

共通部分を部分テンプレートにする

layoutsディレクトリのおさらいをします。 中に、partialsディレクトリがあり、そこに、header.htmlとfooter.htmlがあります。

themes/happy/layouts/
├── 404.html
├── _default
│   ├── list.html
│   └── single.html
├── index.html
└── partials
    ├── footer.html
    └── header.html

partialsディレクトリは、部分テンプレート置き場です。 部分テンプレートとは、様々なテンプレートから共通で利用するパーツのことです。 Hugoでいえば、以下のもので共通で使い回すと便利です。

  • ドキュメントルート用のindex.html
  • 記事一覧用の_defualt/list.htmlなど
  • 記事用の_default/single.htmlなど

ひとまず、使ってみましょう。ヘッダー、フッターの内容をindex.htmlからカットして、ペーストしてみましょう。

ヘッダー

partials/header.htmlに以下をコピーしましょう。

<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="{{ .RSSlink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}">
<title>{{ $isHomePage := eq .Title .Site.Title }}{{ .Title }}{{ if eq $isHomePage false }} - {{ .Site.Title }}{{ end }}</title>
</head>
<body>
  <noscript>当サイトはJavaScriptを使用しています。JavaScriptを有効にしてください。</noscript>
  <div class="blog-header">
    <header>
      <h1><a href="/">ブログのタイトル</a></h1>
      <p>ブログの説明など</p>
    </header>
  </div>

フッター

partials/footer.htmlに以下をコピーしましょう。

  <div class="blog-footer">
    <footer>
      <p class="copyright">Copyright &copy;</p>
    </footer>
  </div>
</body>
</html>

index.htmlを再編集

では、部分テンプレートを読み込んでみましょう。 themes/happy/index.htmlで、{{ partial "header.html" . }}のように書いてみましょう。

{{ partial "header.html" . }}
<main>
  <h1>テスト</h1>
  <!-- あとで記事表示部分を入れる -->
</main>
{{ partial "footer.html" . }}

themes/happy/index.htmlの中身が簡潔になりましたね。 これで、ドキュメントルートに出力するべきコンテンツのみに注力してテンプレートを編集できます。

次に、Hugoのロジックの記述方法について軽く説明します。

Hugoのロジック記述方法

さきほど、{{ partial "header.html" . }}のように書いてみましょう、と書きました。 これがまさにHugoの記述方法です。{{ 処理内容 }}という書き方をします。ですので、{{}}が出てきたら、Hugo用の処理を何かやってるな、と思って下さい。

今回使った{{ partial "header.html" . }}は、partialsディレクトリのheader.htmlを読み込んで、内容(.)をここに出してね、という処理です。 この.がHugoにとって重要だと思われるので、書き忘れないように注意しましょう。

これは私個人の印象なのですが、Hugoの.は、プログラマやJavaScriptをやったことがあるデザイナーさんにわかりやすくいうと、thisだと思います。 そう考えると、後々出てくるHugoの処理について、理解しやすいのではないかと思います。

記事を表示する

先に記事を作っておく

では、いよいよ記事を表示します。が、その前に、表示する記事を作っておかなければなりません。とりあえず10個作ってみます。

hugo new post/0001.md
hugo new post/0002.md
hugo new post/0003.md
hugo new post/0004.md
hugo new post/0005.md
hugo new post/0006.md
hugo new post/0007.md
hugo new post/0008.md
hugo new post/0009.md
hugo new post/0010.md

Hugoはmarkdown形式で記述ができるので、拡張子を.mdにしています。どんな内容になっているか、post/0001.mdを見てみましょう。

+++
date = "2016-04-28T00:00:24+09:00"
draft = true
title = "0001"

+++

この+++で囲まれたところは、Front Matterというもので、記事固有の変数を設定できる領域です。 詳しくは、HugoのサイトのFront Matterにありますが、今回は特にいじりません。 後々やっていきましょう。とりあえず、簡単に説明すると、

date
記事の作成日時
draft
下書きか否か(trueなら下書き状態)
title
記事のタイトル
です。

では、今回は各記事をわかりやすくするために、本文を書いておきます。

+++
date = "2016-04-28T00:00:24+09:00"
draft = true
title = "0001"

+++

これは0001の本文です。

0001.mdだけでなく、全部本文を書いておくといいでしょう。

index.htmlを編集して記事を出す

では、themes/happy/layouts/index.htmlを編集して記事を出してみましょう。

{{ partial "header.html" . }}
<main>
  {{ range .Data.Pages }}
    <article>
      <h1>{{ .Title }}</h1>
      <div>
        <span>投稿日時: {{ .Date.Format "2006-01-02" }}</span>
      </div>
      <p>{{ .Content }}</p>
    </article>
  {{ end }}
</main>
{{ partial "footer.html" . }}

{{ range .Data.Pages }}で、記事のループ処理が開始されます。{{ end }}を入れて、ちゃんと閉じましょう。 Hugoの場合、ループ処理を行うと、ループの度に記事の内容が暗黙の変数に入れられます。 そのため、range内で{{ .Title }}や{{ .Content }}のように短く直感的に書くことができます。

暗黙の変数を使わないことも可能です。以下のようにすれば、$articleという変数にループごとの記事の内容を代入できます。

{{ range $article := .Data.Pages }}
  <article>
    <h1>{{ $article.Title }}</h1>
    <div>
      <span>投稿日時: {{ $article.Date.Format "2006-01-02" }}</span>
    </div>
    <p>{{ $article.Content }}</p>
  </article>
{{ end }}

どちらの書き方がいいかは、好みの問題だと思います。 ただ、公式サイトのサンプルは、暗黙の変数を使っていることがほとんどなので、「暗黙の変数を使うとわかりにくい！」と感じるところでのみ、 明示的に変数を使えばいいと思います。

さて、この修正によって、記事が一覧で表示されるようになりました！

ブログの記事一覧を表示してみたところ

ようやく少しブログらしくなってきましたねー。

今回のまとめ

今回は、Hugoでブログの内容を全部出すようにテンプレートindex.htmlを書きました。

その中で、部分テンプレートや、rangeによるループを紹介しました。 今のところは、とりあえず出せるようになっただけですので実用にはまだまだですね。 現在の状態だと記事があるぶんだけ全部出てしまうので、100件くらい記事があるととんでもなく長いページになってしまいます。

次回は、index.htmlでのページングをやっていきます。お楽しみに。

comments powered by Disqus