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>
参考
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重の括弧で囲むと、配列として定義されることがわかります。...
フロントマター
はじめに Hugoで記事を書く際に、各投稿の先頭に投稿の情報を記載できます。 この情報のことをフロントマター（FrontMatter）と言います。 フォーマット フロントマターはどんな記号で囲まれているかで、フォーマットの指定ができます。 TOML: +++ YAML: --- JSON: {} 中身はkeyvalueのペアで指定できます。 TOMLの場合はdate = "2021-07-11"のように=で繋ぎます。 定義済み変数 フロントマターには定義済み変数と独自定義変数が存在します。 定義済み変数の一部は以下のようになっています。 date: 投稿日付 description: コンテンツの説明 draft: trueなら下書き段階 images: 対象のページに関連する画像のパス配列。_internal/twitter_cards.htmlなどで使用される keywords: メタキーワード lastmod: 最終更新日付 linkTitle: コンテンツのリンク生成時に使用されるURL。Hugoはtitleの前にlinkTitleを使用する series: ページが属するシリーズ名 slug: 出力URLの末尾に表示される weight: 順番を並べ替える際に、小さいほど優先される 独自定義変数 include_toc = true このように定義した場合、.Params.include_tocで使用できます。 参考 Front Matter ...