remark 插件通过 hProperties 注入 HTML 属性

在 remark 插件中修改 MDAST 节点的 data.hProperties，可在 build 时向生成的 HTML 元素注入任意属性（包括 data-* 属性），供客户端脚本读取。

概述

这是 unified 生态的标准接口：remark 节点上的 data.hProperties 会在转换为 HAST（HTML AST）时合并到 HTML 元素的属性集合中。

适合将服务器端计算的数据（查表结果、聚合信息等）嵌入 HTML 标签，避免 client-side fetch。

用法

// 在 remark 插件中修改节点
node.data = node.data || {};
node.data.hProperties = {
  ...node.data.hProperties,
  "data-card-title": cardData.title,
  "data-card-content": cardData.content,
  "data-card-status": cardData.status,
  "data-card-tags": JSON.stringify(cardData.tags),
};

最终渲染为：

<a class="wiki-link"
   data-card-title="幂等性"
   data-card-content="在分布式系统中..."
   data-card-status="growing"
   data-card-tags='["分布式","API设计"]'>幂等性</a>

客户端读取：

link.dataset.cardTitle           // "幂等性"
JSON.parse(link.dataset.cardTags) // ["分布式","API设计"]

注意事项

• 注入数据量较大时（如完整文章摘要）需权衡 HTML 体积
• 此模式只在 remark 阶段可用（即只对 Content Layer 有效）；rehypePlugins 中操作 HAST 节点属性是另一套方式

参见

• astro-content-layer-remark-only

参考

• HAT-198：在 buildSlugMap + remarkWikiLinks 插件中实现，用于 SlipBox 卡片悬浮预览
• https://github.com/syntax-tree/mdast-util-to-hast#hproperties