# サイトディレクトリを作成
$ mkdir HelloHugo
$ cd HelloHugo

# 中を初期化
$ hugo new site

# 好みのテーマファイルを取得 (ここでは ananke を指定)
$ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
$ git submodule update --init
$ vim ../config.toml
> ...
> theme = "ananke" ... テーマ指定して保存
> ...

# 新たなページを追加 その1
$ hugo new hello.md
content/hello.md created

# 新たなページを追加 その2
$ hugo new post/article.md
content/post/article.md created

# 動作確認用サーバーを起動 (memo: -D はドラフト版も表示するという意味)
# ブラウザでアクセスして表示を確認 (http://localhost:1313/hello/)
# 表示しながら記事を編集するとホットリロードされ、表示が更新されます。
$ hugo server -D

.
├ archetypes       ... 新しいページを追加した際の雛形を格納
│ └ default.md
├ config.toml
├ content          ... ページの格納場所
│ ├ hello.md
│ └ post           ... 各ディレクトリをセクションと呼ぶ。第1階層は ContentType とも呼ぶ
│ 　 └ article.md  ... 先程作成した記事
├ data
├ layouts
├ resources
├ static           ... 静的ファイルの格納場所。ビルド先のルートに展開される
└ themes           ... テーマの格納場所
　 └ ananke        ... インストールしたテーマ

# ./public へ html ファイルを出力
$ hugo

---
title: "My First Post"
date: 2020-08-03T07:09:35+09:00
tags: [tag1, tag2]
categories: [cat1]
draft: true
custom_prop: [item1, item2, item3]
--- 

# セクション1
サンプルテキスト

---
title: "My First Post"
cascade:
 - custom_prop: [item1, item2, item3]
---

---
title: "{{ replace .Name "-" " " | title }}" 
date: {{ .Date }}
draft: true
---
{{ expression }} で動的要素を定義可能

# Leaf Bundle
content/posts/my-post
┣ content/posts/my-post/index.md ... index file
┣ subdir
┃ ┗ image1.jpg ... リソース(テンプレート内からの参照時: .Resource.Match "/subdir/image1.jpg")
┣ image2.jpg   ... リソース(テンプレート内からの参照時: .Resource.Match "/subdir/image2.jpg")
┗ page.md      ... リソース(テンプレート内からの参照時: .Resource.Match "/page.md")

# Branch Bundle
content/posts/my-post
┣ content/posts/my-post/_index.md ... index file
┣ subdir
┃ ┗ image1.jpg ... リソース(テンプレート内からの参照時: .Resource.Match "/subdir/image1.jpg")
┣ image2.jpg   ... リソース(テンプレート内からの参照時: .Resource.Match "/subdir/image2.jpg")
┗ page.md      ... ページ (テンプレート内からの参照時: .GetPage "/page.md")

YouTube 動画の貼付け可能。ショートコードという機能を活用する
{{< youtube id="OP6NxM6Al98" >}}

ショートコードは独自のものも作成可能
{{< hogeshort color = "blue" >}}

<!-- 動的要素の展開 -->
<p>{{ expression }}</p>

<!-- layouts/partials/subtemp.html を作成したとする -->
<!-- .Scratch.Get で値を取得する -->
<p>Partial template body {{.Page.Date}}</p>
<p>{{ $param := .Scratch.Get "Param1"}}</p>

<!-- パーシャルテンプレートを使う場合は partial 関数を使う -->
<!-- .Scratch.Set を使って値を入れる -->
<p>{{ $param := .Scratch.Set "Param1" "Value" }}</p>
{{ partial "subtemp" . }}

<!-- テンプレート呼び出し -->
<!-- 第2引数で指定したものがテンプレート内でのカレントコンテキストになる -->
{{ define "subtemp" }}
    <p>テンプレート内容をここへ定義する</p>
{{ end }}

<!-- baseof.html 内部では block でサブテンプレートを参照する -->
{{ block "subtemp" . }}
    <p>テンプレートが存在しなかった場合には、ここの定義が使用される</p>
{{ end }}

# ショートコードは Go の Template 形式で記述する
vim layouts/shortcodes/shortcode-name.html

# markdown ファイル内の使用したい箇所に以下を記述
# 起動時のオプションも attr="value" の形式で記述可能
{{<shortcode-name attr_name="value" >}}

{{/* ショートコード使用時のオプションは以下の記述で取得可能 */}}
{{ .Get "attr_name" }}
{{/* 未指定時に既定値を使用 */}}
{{ .Get "attr_name" | default "default value" }}
{{/* 未指定時にスコープ内の処理をスキップ */}}
{{ with .Get "attr_name" }}{{ . }}{{ end }}

{{/* 値の代入・参照 */}}
{{ $var_name := expression }}
{{ $var_name }}

{{/* 配列の生成 */}}
{{ slice 100 200 300 }}
{{/* 配列の生成 (シーケンス) */}}
{{ seq 1 5 }}

{{/* マップオブジェクトの生成 */}}
{{ dict "key1" 100 "key2" 200 }}

{{/* ネスト */}}
{{ $var_name := dict "key1" 100 "key2" (slice 200 300 400) }}

{{/* 配列・マップオブジェクトの対象要素へのアクセス */}}
{{ index $var_name "key2" 1 }}

{{ $val = . }}
{{ printf "value: %s, type_info: %T" $val $val }}

{{/* 描画中のページのタイトルを取得 */}}
{{ $title := .Title }}
{{/* 描画中のページのタイトルを取得 ($を使うとグローバルコンテキストを参照する) */}}
{{ $title := $.Title }}

{{/* 親ページのオブジェクトを取得 */}}
{{ $parent_page_obj := .Parent }}

{{/* 任意のページのオブジェクトを取得 */}}
{{ $other_page_obj := .GetPage "/other" }}
{{ $other_page_url := $other_page_obj.RelPermalink }}

{{/* 条件分岐 */}}
{{ $val := 2 }}
{{ if eq $val 1 }}
    <p>テキストA</p>
{{ else if eq $val 2 }}
    <p>テキストB</p>
{{ else }}
    <p>テキストC</p>
{{ end }}

{{/* 演算子 */}}
{{/* シェルスクリプト風だが、演算子ではなく関数として実装されている */}}
{{- eq "text_a" "text_a" -}} {{/* == ... true  */}}
{{- ne "text_a" "text_a" -}} {{/* != ... false */}}
{{- not 100 200 -}}          {{/* !  ... false */}}
{{- lt 100 200 -}}           {{/* <  ... true  */}}
{{- le 100 200 -}}           {{/* <= ... true  */}}
{{- gt 100 200 -}}           {{/* >  ... false */}}
{{- ge 100 200 -}}           {{/* >= ... false */}}

{{/* ループ1 (ループ内はカレントコンテキストが列挙中の要素になる) */}}
{{/* 元のコンテキストを参照したい場合には . と書く */}}
{{ range slice "text_a" "text_b" "text_c" }}
    <li>{{.}} {{ $.Page.Title }}</li>
{{ end }}

{{/* ループ1 (変数指定すると添字も取得できる。 */}}
{{/* しかし、変数指定してもカレントコンテキストは切り替わる) */}}
{{ range $idx, $item := slice "text_a" "text_b" "text_c" }}
    <li>{{ $idx }}: {{ $item }}</li>
{{ end }}

{{/* パイプ文字で複数関数を繋ぐと、実行結果を左から右へ流せる */}}
{{ seq 1 5 | shuffle }}

{{/* 複数引数の関数へも使用可能。関数はカリー化されている様子 */}}
{{ "isn't it?" | printf "This is a %s, %s" "pen" }}

{{ .CurrentSection }} ... 現在地のセクション
{{ .Parent }} ... 親セクション
{{ .Sections }} ... 現在地にぶら下がるサブセクション

{{/* asset/style からCSSファイルを2本取得 */}}
{{ $css_1 := resources.Get "style/1.css" |  }}
{{ $css_2 := resources.Get "style/2.css" |  }}

{{/* CSSファイル2本を結合し、新たなファイル名を main.css と命名 */}}
{{ $css_file := slice $css_1 $css_2 | resources.Concat "style/main.css" }}

{{/* RelPermalink などで処理結果を使用可能 */}}
<link rel="stylesheet" href="{{ $css_file.RelPermalink }}">