https://tbpgr.hatenablog.com/entry/2015/08/12/224727

f:id:tbpg:20150811225844p:plain

Go言語製のWebサイトエンジンHugoの機能整理をします。今回はFront Matterです。

Hugoとは？

Go言語製のWebサイトエンジンHugoの疎通確認

Front Matterとは？

HugoのContentにメタデータを付与することができます。
Hugoはこのメタデータを複数のフォーマットで記載できます。

フォーマット

TOML - +++
YAML - ---
JSON - { and }

TOML の例

+++
title = "esaでナレッジ共有"
description = "esaでナレッジ共有する方法について"
tags = [ "esa", "markdown" ]
date = "2015-08-12"
categories = [
  "ナレッジ共有"
]
slug = "esa"
+++

## esaとは？
Markdownで記述可能なゆるふわナレッジ共有サービスです。
：

その他サンプルについては、公式ドキュメントを参照
Front Matter - Content - Hugo

Variable

メタ情報で定義した変数はtemplateで利用可能です。
変数は定義済みの変数とユーザー定義の変数が利用可能です。
変数を呼び出す際は、.Params.variable_nameのような形式で呼び出します。

変数埋め込みサンプル

hugoscrollテーマを利用します

content/first.md

+++
title = "esaでナレッジ共有"
description = " - esaでナレッジ共有する方法について"
weight = 1
type = "post"
tags = [ "esa", "markdown" ]
date = "2015-08-12"
slug = "esa"
class="post first"
hoge = "user define first"
+++

## esaとは？
Markdownで記述可能なゆるふわナレッジ共有サービスです。
：

content/last.md

+++
title = "Finaly!"
description = "Last Post"
weight = 100
type = "post"
class="post last"
hoge = "user define last"
+++

## Hoge
Test

## Hige
Test

## Hage
Test

themes/hugoscroll/layouts/index.html

ユーザー定義変数hogeを.Params.hogeで埋め込みます。

{{ partial "header.html" . }}
<body class="home-template">

    <!-- The big featured header on the homepage, with the site logo and description -->
    <header id="site-head" {{ if .Site.Params.cover }}style="background-image: url({{ .Site.Params.cover }})"{{ end }}>
        <div class="vertical">
            <div id="site-head-content" class="inner">

                {{ if .Site.Params.logo }} <a id="blog-logo" href="{{ .Site.BaseURL }}"><img src="{{ .Site.Params.logo }}" alt="Blog Logo" /></a>{{ end }}
                <h1 class="blog-title">{{ .Site.Title}}</h1>
                {{ if .Site.Params.description }}<h2 class="blog-description">{{ .Site.Params.description }}</h2> {{ else  }}
                <h2 class="blog-description">Power puff girls</h2>
                {{ end }}

                <a class='btn first'>Take a tour</a>
                <a class='btn last'>Cut to the chase</a><br>
                <i id='header-arrow' class="fa fa-angle-down"></i>
            </div>
        </div>

    </header>

    <main class="content" role="main">
    <div class='fixed-nav'>
    </div>
        {{ range .Data.Pages.ByWeight }}
                {{ if eq .Type  "post" }}
                    {{ .Render "post"}}
                {{ end }}
            <div>***{{ .Params.hoge }}***</div>
        {{ end }}

</main>
    {{ partial "footer.html" .}}

    {{ partial "script.html" .}}


</body>
</html>

動作確認

hugo server -wでサーバーを起動し、templateに変数が埋め込まれたことを確認します。
ユーザー定義変数hogeの内容が展開されていることを確認できました。

f:id:tbpg:20150812224219p:plain

外部資料

Front Matter - Content - Hugo