侧边栏组件中添加链接的活动状态未生效

开发
1

您好，我正在将一些类别添加为指向 Discourse 侧边栏顶部的独立链接，但当我点击这些链接时，与其他组件中的原生链接不同，单个链接或部分链接的 CSS active 状态不起作用。由于 active 状态不起作用，访客无法确定他们正在查看哪个页面。有什么方法可以解决这个问题吗？

active 状态正常工作：

image
image680×112 1.54 KB

active 状态不工作
image

3 个赞
2

作为临时解决方案，您可以在插件/组件中使用此初始化程序：

import { withPluginApi } from "discourse/lib/plugin-api";

/**
 * 此初始化程序的目的是在当前页面与侧边栏部分链接的 href 匹配时，
 * 向该链接添加“active”类。理论上，这可以由 Discourse 核心处理，
 * 但目前它不处理自定义链接，因此我们在此实现它。
 *
 * @see https://meta.discourse.org/t/active-state-not-working-for-added-links-in-the-sidebar-component/323422
 */
function initialize(api) {
  // 非 Ember 视图的侧边栏部分链接的选择器。看起来 Ember 视图有自己的活动状态处理，
  // 而非自定义链接则没有。
  const LINK_SELECTOR = ".sidebar-section-link:not(.ember-view)";
  const CLASS_ACTIVE = "active";
  const applyClass = () => {
    document.querySelectorAll(LINK_SELECTOR).forEach((link) => {
      const href = link.getAttribute("href");
      const toggle = window.location.pathname === href;
      link.classList.toggle(CLASS_ACTIVE, toggle);
    });
  };
  // 应用一次
  applyClass();
  // 在页面更改时也重新应用（便宜 + 弹性）
  api.onPageChange(applyClass);
}

export default {
  name: "sidebar-section-link-active-class",

  initialize() {
    withPluginApi(initialize);
  },
};