config.tomlファイルの使い方
コンフィグファイルの種類
Hugoではいくつかのコンフィグファイルの種類が定義でき、好きな形式で書くことができます。
- config.toml
- config.yaml
- config.json
ここでは、TOML形式で定義したコンフィグファイルの説明を行います。
config.tomlファイルの読み方
TOMLとJSONファイルを変換できるサイトがあるので、一度確認すると意味がわかりやすいです。
TOML
参考にTOMLをJSONに変換したものを載せます。
TOML
title = "TOML Example"
[test]
a = 1
[[table]]
b = 2
[[table]]
c = 3
[table3.inner]
d = 4
[[table2.description]]
e = 5
JSON
{
"title": "TOML Example",
"test": {
"a": 1
},
"table": [
{
"b": 2
},
{
"c": 3
}
],
"table3": {
"inner": {
"d": 4
}
},
"table2": {
"description": [
{
"e": 5
}
]
}
}
TOMLで[[<PARAM_NAME>]]のように2重の括弧で囲むと、配列として定義されることがわかります。
また、パラメータ名を.区切りにすることで階層構造を表現できます。
独自定義の変数
baseURL = "https://example.com/"
languageCode = "ja-jp"
title = "Hugoまとめ"
[params]
subtitle = "コツコツとHugoについてナレッジを記載します。"
Hugoで独自変数をコンフィグファイルに記載する場合は、[params]の部分に記載します。
使用する場合は$.Site.Params.subtitleのように使います。$を省略して、.Site.Params.subtitleとしたり、$.Site.Params.Subtitle変数名の頭文字を大文字にしても構いません。
参照
サイト作成
Hugoとは Hugoは静的サイトジェネレーターと呼ばれ、Markdown形式のコンテンツからHTMLを作成してくれます。 HugoはGoogle製のGo言語で作成されており、サイト作成の速度が非常に高速です。 この記事では、MacOSでの環境構築について説明します。 ローカルでサイト作成 Hugoインストール Homebrewを使用すると簡単にインストールできます。 $ brew install hugo 無事インストールが完了していると、以下のコマンドでバージョンが表示されるはずです。 $ hugo version Hugo Static Site Generator v0.79.0/extended darwin/amd64 BuildDate: unknown 新しいサイトの作成 $ hugo new site new_site_name このコマンドを実行することで、new_site_nameというフォルダー名で新しいサイトが作成できます。 テーマの追加 Hugoはテーマという仕組みで、簡単にサイトのデザインを使用できます。 テーマファイルは、themes/theme_nameディレクトリに保存されます。 git init(gitの初期化)を実行した後に以下を実行します。 git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke submodule addはgitのリポジトリ内に、子供のリポジトリを追加するコマンドです。 https://github.com/theNewDynamic/gohugo-theme-ananke.gitで定義されているHugoのテーマファイルを、ローカルのthemes/anankeディレクトリに保存しています。 submoduleとして追加しなくても、ダウンロードしてきたテーマファイルを配置しても構いません。 完了した後theme = "ananke"のようにconfig.tomlファイルに追加することでテーマを使用できます。 投稿の追加 投稿はcontent/<CATEGORY>/<FILE>.<FORMAT>という形式で保存します。 hugo new post/first-post.md と実行すると、content/post/first-post.mdに投稿んぼ雛形が追加されます。 --- title: "My First Post" date: 2019-03-26T08:47:11+01:00 draft: true --- 中にはこのような情報が記載されており、記事の詳細情報を定義することができます。 Hugoを起動する hugo server -D このコマンドで起動できます。 通常 http://localhost:1313/ にアクセスすると立ち上げたサーバーにアクセスできます。...
Markdownでclass属性やid属性を付ける
はじめに 通常Markdownで記載していると、独自のclass属性やid属性が指定できません。 ただし、だからと言って直接HTMLを記載するとMarkdownで書くというメリットが失われます。 Markdownで書きつつ、class属性やid属性を付ける方法を説明します。 markup.goldmark.parser.attribute 装飾したいMarkdown要素の後に{}で囲んだ属性リストを追加することで、独自の属性を追加できます。 この機能を使用するためにはconfig.tomlに以下の設定が必要です。 [markup.goldmark.parser.attribute] block = true ただし、この機能はv0.81.0からHugoに追加された機能です。 例えば以下のMarkdownを変換してみます。 この文章は警告です。 { .warn } <p class="warn">この文章は警告です。</p> 参考 Configure Markup ...