AEM Guides中如何在生成的HTML5预设输出中使用DITA映射的data元素

嗨，作为刚接触AEM Guides的过来人，我完全懂你这种想从DITA Map里取自定义数据却摸不着门路的感觉！咱们一步步来搞定这个问题，核心思路是先从DITA Map中提取data元素的内容，再把这些数据传递到生成的HTML里，最后用你的自定义JS/CSS渲染到侧边栏和页脚。

第一步：在自定义DITA-OT插件中提取Map的data元素 #

DITA-OT生成HTML的过程依赖XSLT转换，所以我们需要在插件里加一段XSLT代码，专门捕获Map里的data内容。

1. 首先在你的自定义插件里创建一个XSL文件（比如xsl/custom-map-data.xsl），编写模板来处理Map元素：

<xsl:stylesheet version="2.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:dita="http://dita.oasis-open.org/architecture/2005/">

  <!-- 在HTML生成完成后注入自定义数据 -->
  <xsl:template match="dita:map" mode="after-main">
    <!-- 提取data下的logo图片路径 -->
    <xsl:variable name="logoHref" select="dita:data/dita:image/@href"/>
    <!-- 提取copyright的文本文件路径 -->
    <xsl:variable name="copyrightHref" select="dita:data/dita:xref/@href"/>

    <!-- 把数据放到隐藏的div里，方便JS读取 -->
    <div id="map-hidden-data" style="display: none;">
      <span id="sidebar-logo-path"><xsl:value-of select="$logoHref"/></span>
      <span id="copyright-file-path"><xsl:value-of select="$copyrightHref"/></span>
    </div>
  </xsl:template>

</xsl:stylesheet>

2. 然后在插件的plugin.xml里注册这个XSL扩展，让它参与到HTML5的转换流程中：

<plugin id="com.yourcompany.custom.aemguides">
  <feature extension="dita.xsl.html5" file="xsl/custom-map-data.xsl"/>
</plugin>

第二步：用自定义JS读取数据并渲染 #

你已经有了自定义JS，现在只需要在里面添加读取数据、渲染元素的逻辑就行：

渲染侧边栏Logo

// 获取隐藏的logo路径
const logoPath = document.getElementById('sidebar-logo-path').textContent;
// 创建图片元素
const sidebarLogo = document.createElement('img');
sidebarLogo.src = logoPath;
sidebarLogo.alt = '品牌Logo';
sidebarLogo.className = 'sidebar-logo';

// 找到侧边栏容器，把Logo插进去（这里的选择器要根据你的侧边栏结构调整）
const sidebarNav = document.querySelector('.sidebar-nav-container');
if (sidebarNav) {
  sidebarNav.prepend(sidebarLogo);
}

渲染页脚版权信息

因为版权是存放在txt文件里的，我们需要用fetch获取文件内容，再插入到页脚：

// 获取版权文件路径
const copyrightPath = document.getElementById('copyright-file-path').textContent;

// 读取文件内容并渲染到页脚
fetch(copyrightPath)
  .then(response => {
    if (!response.ok) throw new Error('版权文件加载失败');
    return response.text();
  })
  .then(copyrightText => {
    const footer = document.querySelector('.page-footer');
    if (footer) {
      const copyrightElement = document.createElement('div');
      copyrightElement.className = 'copyright-disclaimer';
      copyrightElement.textContent = copyrightText;
      footer.appendChild(copyrightElement);
    }
  })
  .catch(err => console.error('处理版权信息出错:', err));

注意事项 #

• 路径问题：如果你的图片或txt文件是AEM里的资源，可能需要用DITA-OT的resolve-href模板来处理路径，确保生成的HTML里路径正确。比如把<xsl:value-of select="$logoHref"/>改成<xsl:call-template name="resolve-href"><xsl:with-param name="href" select="$logoHref"/></xsl:call-template>。
• 插件部署：如果是AEM Guides云服务，记得把自定义插件打包成zip，通过AEM的Package Manager上传部署。

这样就能把Map里data元素的内容完美用到你的侧边栏和页脚啦！

备注：内容来源于stack exchange，提问作者Mistico