Hugo設定のTOMLからJSONへの変換

Hugo静的サイトジェネレーターのTOML設定をJSONに変換します。サイトメタデータ、メニュー定義、パラメータ、テーマ設定を実践的な例とともに解説します。

Real-World Configs

詳細な説明

Hugoは人気のある静的サイトジェネレーターで、伝統的にTOMLを主要な設定形式として使用しています(YAMLとJSONもサポート)。JSON等価物を理解することは、設定の移行やHugoサイトジェネレーターのプログラム的構築に役立ちます。

Hugoのconfig.toml:

baseURL = "https://example.com/"
languageCode = "en-us"
title = "My Tech Blog"
theme = "PaperMod"
paginate = 10

[params]
  env = "production"
  description = "A blog about technology"
  author = "Alice"
  defaultTheme = "auto"
  ShowReadingTime = true
  ShowShareButtons = true

[params.homeInfoParams]
  Title = "Welcome"
  Content = "A blog about software engineering and tech"

[[params.socialIcons]]
  name = "github"
  url = "https://github.com/alice"

[[params.socialIcons]]
  name = "twitter"
  url = "https://twitter.com/alice"

[[menu.main]]
  identifier = "posts"
  name = "Posts"
  url = "/posts/"
  weight = 10

[[menu.main]]
  identifier = "about"
  name = "About"
  url = "/about/"
  weight = 20

[markup.goldmark.renderer]
  unsafe = true

JSONに変換すると:

{
  "baseURL": "https://example.com/",
  "languageCode": "en-us",
  "title": "My Tech Blog",
  "theme": "PaperMod",
  "paginate": 10,
  "params": {
    "env": "production",
    "description": "A blog about technology",
    "author": "Alice",
    "defaultTheme": "auto",
    "ShowReadingTime": true,
    "ShowShareButtons": true,
    "homeInfoParams": {
      "Title": "Welcome",
      "Content": "A blog about software engineering and tech"
    },
    "socialIcons": [
      {"name": "github", "url": "https://github.com/alice"},
      {"name": "twitter", "url": "https://twitter.com/alice"}
    ]
  },
  "menu": {
    "main": [
      {"identifier": "posts", "name": "Posts", "url": "/posts/", "weight": 10},
      {"identifier": "about", "name": "About", "url": "/about/", "weight": 20}
    ]
  },
  "markup": {
    "goldmark": {
      "renderer": {
        "unsafe": true
      }
    }
  }
}

変換時の注目ポイント:

  • [[params.socialIcons]][[menu.main]] はテーブル配列構文を使用し、JSONオブジェクト配列を生成します。
  • 深くネストされたテーブル[markup.goldmark.renderer])は3レベルの深いJSONネストを生成します。
  • インデントされたキー[params] の下)はTOMLでのスタイル上の選択です。インデントには意味的な意味はありませんが、可読性を向上させます。
  • 大文字小文字を区別するキーShowReadingTime)はJSONでも大文字小文字が保持されます。

ユースケース

JSONテンプレートからプログラム的に設定を生成し、Hugoが消費するためにTOMLに変換するHugoサイトスキャフォールディングツールの構築。またはHugo設定をTOML、YAML、JSON形式間で移行する場合。

試してみる — TOML ↔ JSON Converter

フルツールを開く