beta

【保存版】 HUGOで使うフロントマッターまとめ

HUGOで使うフロントマッターをまとめました。基本的なものから、ページを細かく制御する方法など、パラメータと説明、テンプレートでの呼び出しタグを一覧にしています。

公開日：2020年6月4日

目次

絶対に必要な設定項目

最低限、これらがあればページが出力できるという項目です。

キー	バリュー	説明	テンプレートでの呼び出し
title	文字列	ページのタイトル	.Title
date	文字列	ページの作成日	.Date
summary	文字列	ページのサマリー。とは一緒に使えない。、フロントマッター、自動生成の順で優先。	.Summary

あれば便利な設定項目

日付系

キー	バリュー	説明	テンプレートでの呼び出し
lastmod	文字列	ページの更新日。記事を更新日順で並び替えることができるようになる	.Lastmod
publishDate	文字列	未来を設定すると表示されないが、「–buildFuture」コマンドで表示が可能	.PublishDate
expiryDate	文字列	ページの表示期限。ただし、動的には対応しない。ビルド時の日時で判定。	.ExpiryDate

meta系

キー	バリュー	説明	テンプレートでの呼び出し
description	文字列	ページの説明文。summaryとの違いは.Summaryで呼び出せるか。	.Description
audio	URL配列	OGPで使うオーディオを指定	.Params.audio
videos	URL配列	OGPで使う動画を指定	.Params.videos
images	URL配列	画像関連の設定	.Params.images
keywords	文字列、配列	metaキーワード用。テンプレに指定がないと使われない	.Keywords

ページ制御系

キー	バリュー	説明	テンプレートでの呼び出し
layout	文字列	レンダリングで使うレイアウトを指定できる	-
draft	true / false	下書き指定。–buildDraftsフラグを使わない限り表示されない	-
aliases	文字列	リダイレクト元のパスを指定	-
headless	文字列	ページとして出力されないけど、コンテンツとして持っておきたい時用	-
linktitle	文字列	ページにリンクする時に使われるタイトル。テンプレートで.Titleの代わりに.LinkTitleを指定する。フロントマッターにlinktitleがなければ、titleが自動で使われる	.LinkTitle
outputs	配列	アウトプットフォーマットを配列で指定	-
weight	数字	ページの表示順序。数字が少ない方が上にくる。	-
slug	文字列	URLなどに使う文字列	.Slug
type	文字列	セクションを指定できる。なければディレクトリ構成から取得する	.Type

なくても良いけど、使いこなすと便利系

キー	バリュー	説明	テンプレートでの呼び出し
series	配列	ページをシリーズとしてまとめるための項目	-
url	文字列	ページURLの指定。ドキュメントルートからの相対パスをフルで書く。なければconfigファイルのpermalinksを元に自動生成	-
taxonomies	配列	パンくずを指定	.Params.taxonomies
resources	配列	.Resourcesメソッドで呼び出す時のタイプを指定する。	.Resources
isCJKLanguage	true or false	中国語・日本語・朝鮮語・ベトナム語かどうか。	.Params.isCJKLanguage

地味に、頭に.Paramsが必要なパターンとそうでないパターンが混在していて使いにくいのがHUGOのフロントマッターですが、覚えておくとテンプレートを書くのが速くなるので、テーマを作る際などには見返してみてください。

Author

Koji Kadoma: Member of codit.work

新着ノート

nodenvでコマンド実行時にだけバージョンを指定する方法

NUXT3

公開日：2023年2月16日
Nuxtをアップグレードする方法

NUXT3

公開日：2023年1月30日

新着コード

Vue.js 3でdayjsをグローバルに組み込む方法

Vue.js

公開日：2022年4月18日
Vue.js 3でのmain.jsの書き方

Vue.js

公開日：2022年4月13日

新着ノート

新着コード

import { createApp } from 'vue'
import App from './App.vue'
import dayjs from 'dayjs';

const app = createApp(App);
app.config.globalProperties.$dayjs = dayjs
app.mount('#app')

JAVASCRIPT Vue.js 3でdayjsをグローバルに組み込む方法 Koji Kadoma

import { createApp } from 'vue'
import App from './App.vue'
import routes from './routes'
import { store } from './stores/'

const app = createApp(App);
app.use(routes);
app.use(store);
app.mount('#app')

JAVASCRIPT Vue.js 3でのmain.jsの書き方 Koji Kadoma

docker run --detach -it --restart=always --name=dropbox -e "POLLING_INTERVAL=20" -v /home/rancher/Dropbox:/opt/dropbox/Dropbox otherguy/dropbox:latest

DOCKER Dropboxのdockerコンテナを立ち上げる Koji Kadoma

<template>
  <p id="exscript">
    <ins class="banner"></ins>
  </p>
</template>
<script>
  export default {
    mounted() {
      let scriptEl = document.createElement('script')
      scriptEl.setAttribute('src', 'スクリプトのURL')
      document.getElementById('exscript').appendChild(scriptEl)
    }
  }
</script>

JAVASCRIPT Vue.jsのコンポーネントで外部scriptをロードする方法 Koji Kadoma

カテゴリ

タグ