如果在移动设备上没有回复，DiscoTOC 样式将无法正常显示

用户体验
, ,
3

凭借我基本的编码技能和一些与 ChatGPT 的交流，我认为我成功了。

创建了一个自定义组件，并将以下内容放入 CSS 选项卡：

/* CSS for Discourse component - Mobile only */
@media (max-width: 767px) {
    #topic-progress-wrapper.sticky-bottom {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}

并在 JS 选项卡中放入了以下内容：

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) =
> {
  api.onPageChange(() =
> {
    const observer = new MutationObserver(() =
> {
      const wrapper = document.getElementById("topic-progress-wrapper");
      const tocButton = wrapper?.querySelector(".d-toc-mini button");

      if (wrapper) {
        if (tocButton) {
          wrapper.classList.add("sticky-bottom");
        } else {
          wrapper.classList.remove("sticky-bottom");
        }
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });
});

即使没有回复，这似乎也能正常工作。
再说一遍，我不是专家，我只是一个善于“提问”的人，在与 ChatGPT 进行几次正确的提问和挑战的“来回”之后，它似乎奏效了。

如果任何 JavaScript 专家想改进它，请分享。

1 个赞