Go言語製のWebサイトエンジンHugoの機能整理をします。 今回はFront Matterです。
Hugoとは?
Front Matterとは?
HugoのContentにメタデータを付与することができます。
Hugoはこのメタデータを複数のフォーマットで記載できます。
フォーマット
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
の内容が展開されていることを確認できました。