如何基于URL自动为MadCap Flare多站点导航按钮添加active类

我们用MadCap Flare维护4个关联站点，已经添加了跨站导航栏，但每个项目的对应链接都得手动设置active标签，这种重复操作效率太低。原本想基于URL自动检测给对应导航按钮分配active类，但导航链接是https://example.com/Site1/Default.htm这类会重定向到Home.htm的地址，直接对比完整URL的方案完全失效。团队没有编程经验，试了网上的JavaScript方案也没成功，下面是针对这个场景的可行解决方法：

现有代码参考 #

HTML

<div class="my-header">
  <ul class="XLink">
    <li class="XLink"><a href="https://example.com/Site1/Default.htm">Site 1</a></li>
    <li class="XLink"><a href="https://example.com/Site2/Default.htm">Site 2</a></li>
    <li class="XLink"><a href="https://example.com/Site3/Default.htm">Site 3</a></li>
    <li class="XLink"><a href="https://example.com/Site4/Default.htm">Site 4</a></li>
  </ul>
</div>

CSS

ul.XLink
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width: 100%;
}

li.XLink
{
    float: left;
}

li.XLink a
{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li.active
{
    background-color: #1c5a97;
}

li.XLink a:hover
{
    background-color: #111;
}

div.my-header
{
    background-color: #103d78;
    margin-bottom: 15px;
    width: 75%;
}

解决方法 #

因为导航链接的Default.htm会重定向到Home.htm，完整URL的文件名部分会变，但站点目录（比如Site1、Site2）是固定的，所以我们通过匹配URL中的目录片段来实现自动添加active类：

1. 修改HTML，给导航项加站点标识
   给每个<li>标签添加自定义属性data-site，值对应URL里的站点目录名：

<div class="my-header">
  <ul class="XLink">
    <li class="XLink" data-site="Site1"><a href="https://example.com/Site1/Default.htm">Site 1</a></li>
    <li class="XLink" data-site="Site2"><a href="https://example.com/Site2/Default.htm">Site 2</a></li>
    <li class="XLink" data-site="Site3"><a href="https://example.com/Site3/Default.htm">Site 3</a></li>
    <li class="XLink" data-site="Site4"><a href="https://example.com/Site4/Default.htm">Site 4</a></li>
  </ul>
</div>

2. 添加简单的JavaScript代码
   把这段代码放到MadCap Flare的主模板页面里（所有页面都会自动加载），它会自动识别当前页面所属的站点，给对应导航项加active类：

// 获取当前页面的URL路径
const currentPath = window.location.pathname;

// 遍历所有导航项
document.querySelectorAll('.XLink li.XLink').forEach(navItem => {
  // 获取导航项对应的站点标识
  const targetSite = navItem.getAttribute('data-site');
  // 检查当前路径是否包含目标站点的目录
  if (currentPath.includes(`/${targetSite}/`)) {
    // 给导航项添加active类
    navItem.classList.add('active');
  }
});

3. 验证CSS样式
   你的现有CSS已经包含li.active的样式，不需要修改，它会自动给激活的导航项设置背景色。

操作提示 #

• 把JavaScript代码添加到MadCap Flare的Master Page中，这样所有页面都会生效，不用逐个页面添加。
• 确保data-site的取值和URL里的站点目录完全一致（比如URL是/Site1/，data-site就写Site1）。

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