docusaurus 2：为每个页面运行自定义脚本

Question

是否可以为每个页面运行一些自定义脚本？

例如，我想alert(1);在每个页面上运行。我怎样才能在不使用任何组件的情况下做到这一点？

我知道可以通过创建 jsx 组件并在每个 .mdx 文件中使用它来完成（但每个文档都应该是一个 .mdx 文件）。所以这不是我要找的东西。

Answer 1

Docusaurus 2 用户在这里！

Docusaurus 经过服务器端渲染，然后进行水合以充当单页应用程序。由于不了解您想要实现的目标，我只能尝试给您提供一般性建议。

实现此目的的一种方法是创建您自己的插件，它使您可以访问执行上下文，例如路由器事件。

我目前在用户更改页面时使用它来进行分析报告。它尚未记录，但包中的 Docusaurus 2 存储库中有一个很好的示例docusaurus-plugin-google-analytics。

这是我使用的片段，仅在加载新页面时执行，这非常适合我的用例。当页面水合时可能会调用另一个我还没有找到的生命周期钩子。

分析模块.js

import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";

export default (function () {
  if (!ExecutionEnvironment.canUseDOM) {
    return null;
  }

  return {
    onRouteUpdate({ location }) {
      _paq.push(["setCustomUrl", location.pathname]);
      _paq.push(["setDocumentTitle", document.title]);
      _paq.push(["trackPageView"]);
    },
  };
})();