html - 如何配置我的 HelpNDoc HTML 版本以使用 Microsoft Clarity？

Question

如何配置我的HelpNDoc HTML 构建以使用Microsoft Clarity？

Answer 1

我将假设您已经具备在 HelpNDoc 中使用自定义模板的一些知识。您可以在此处了解有关模板的更多信息。

首先编辑topics.pas.html文件：

在文件中找到此位：

<!-- Content style -->
<link href="css/hnd.content.css" rel="stylesheet" />

您需要在之前添加一些新代码。例如：

<!-- Microsoft Clarity -->
<script type="text/javascript">
  (function(c,l,a,r,i,t,y){
      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
      t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
      y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "~~~~~~~~~~");
</script>

Microsoft Clarity 将为您提供要使用的实际代码。它看起来像上面的代码，除了"~~~~~~~~~~"你的个人 ID 值。

保存您的脚本，现在您的 HTML 构建将支持 Microsoft Clarity。

---

使用模板变量

可以改进模板并使其适用于多个项目。这可以通过用模板变量替换硬编码的个人 ID 来完成。

这在这里讨论（替代方法：添加一个模板变量来定义默认的机器人元标记值）。

步骤1

向您的模板添加一个新变量。我叫它MSClarityID：

第2步

更改topics.pas.html文件：

  <!-- Microsoft Clarity -->
  <script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "<% Print(HndGeneratorInfo.GetCustomSettingValue('MSClarityID')); %>");
  </script>

我们将硬编码的项目 ID 更改为：

<% Print(HndGeneratorInfo.GetCustomSettingValue('MSClarityID')); %>

第 3 步

最后，在 HelpNDoc 的项目模板设置选项卡中指定变量的值：