如何使用Asciidoctor为段落添加自定义数据属性？

你之前的问题在于用错了属性写法——把自定义数据属性当成了class的扩展，导致progress=23被当成了class名称的一部分。其实Asciidoctor原生就支持直接添加HTML的data属性，下面分两种场景给你说明正确用法：

1. 给普通段落添加data属性 #

如果你要给一段普通文本（非章节标题）添加data-progress属性，只需要在段落内容上方单独一行写带data-*前缀的块属性：

[data-progress="23"]
Lorem ipsum dolor sit.

生成的HTML完全符合你的需求：

<div class="paragraph" data-progress="23">
  <p>Lorem ipsum dolor sit.</p>
</div>

2. 给章节（Section）添加data属性 #

如果你是想给三级章节（即你用===定义的标题块）加属性，只需要把原来的.progress=23改成data-progress="23"即可：

=== 5 [data-progress="23"] Lorem ipsum dolor sit

对应的HTML输出会是：

<div class="sect3" data-progress="23">
  <h3 id="_5_lorem_ipsum_dolor_sit">5 Lorem ipsum dolor sit</h3>
</div>

核心原理 #

Asciidoctor对块属性有特殊处理：只要属性名以data-开头，就会自动被解析为HTML元素的自定义数据属性，而不是class的一部分。你之前的写法用了.前缀，这是Asciidoc中添加class的语法，所以才会把整个progress=23当成class名称。

如果需要批量处理这类属性，还可以结合自定义属性和模板扩展，但针对单个元素的话，上面的直接写法最简洁高效。

内容的提问来源于stack exchange，提问作者aggsol