前記事の続き

Hugo

Hugoの新機能、Attribute Lists after Markdown Blocksを試してみました。

対象のタグは？

tables, lists, paragraphs etc.

config.toml

config.tomlの一部分です。

[markup]
  defaultMarkdownHandler = "goldmark"
  [markup.goldmark]
    [markup.goldmark.extensions]
      definitionList = true
      footnote = true
      linkify = true
      table = true
    [markup.goldmark.parser]
      autoHeadingID = true
      [markup.goldmark.parser.attribute]
        block = true
        title = true

classの書き方

{.u-truncate class="class1 class2"}
{.u-truncate .class1 .class2}

両方とも、同じ結果になります。

class="u-truncate class1 class2"

tables

Markdownファイルの一部分です。

| hoge | fuga   |
| ---- | ------ |
| piyo | hogera |
{.p-table}

出力されるHTMLファイルの一部分です。

<table class="p-table">
<thead>
<tr>
<th>hoge</th>
<th>fuga</th>
</tr>
</thead>
<tbody>
<tr>
<td>piyo</td>
<td>hogera</td>
</tr>
</tbody>
</table>

lists

Markdownファイルの一部分です。

* Fruit
* Apple
* Orange
* Banana
{.u-truncate}

出力されるHTMLファイルの一部分です。

<ul class="u-truncate">
<li>Fruit</li>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>

ul/ol-nodes only

ドキュメントに書いてある通り、ulやolにしか、classが付かないのが仕様みたいです。

u-truncateの場合は、liタグではなく、ulタグに付けても、文字を丸めてくれました。

paragraphs

Markdownファイルの一部分です。

> foo
> bar
{.myclass}

出力されるHTMLファイルの一部分です。

<blockquote class="myclass"><p>foo
bar</p>
</blockquote>