向 Docusaurus.io 添加 JS 代码片段（完整故事、混合面板等）

Question

我正在尝试了解如何添加 JS 代码片段以与 Docusaurus.io (https://docusaurus.io) 一起使用。我想向基于 Docusaurus 的 Web 文档添加一些分析工具，例如 mixpanel、完整故事等，但我不知道如何做到这一点。

Answer 1

对我来说这有效：

第1步：安装mixpanel SDK：

npm i -D --save mixpanel-browser

第 2 步：创建一个文件

src/theme/Layout.js

，其中包含以下内容：

import React, { useEffect } from 'react';
import OriginalLayout from '@theme-original/Layout';
import mixpanel from 'mixpanel-browser';

export default function Layout(props) {
  useEffect(() => {
    // Initialize Mixpanel
    // https://docs.mixpanel.com/docs/quickstart/install-mixpanel?sdk=javascript
    mixpanel.init('INSERT_TOKEN_HERE', {
      debug: true,
      track_pageview: true,
      persistence: 'localStorage',
    });

    // Optional: Track initial page view
    mixpanel.track('Page View', {
      path: window.location.pathname,
    });
  }, []);

  return <OriginalLayout {...props} />;
}

这个解决方案是w.r.t.多库龙 3.6.3

Answer 2

我不确定你到底想把 JS 片段放在哪里。以下是 Docusaurus 中的一些场景。

您可以在siteConfig.js中添加JS文件，这部分：

scripts: ['https://buttons.github.io/buttons.js'],

如果你想在页面中添加 JS 片段，那么这是可行的，因为每个页面只是一个 React 组件。你的渲染方法中是这样的：

<script type="text/javascript" dangerouslySetInnerHTML={{__html: js_snippet}} />

如果你想将 JS 片段添加到文档中，我认为这非常困难，因为文档是 markdown 格式的，我认为你不能添加脚本标签。

希望这有帮助。

Answer 3

将

scripts

键添加到

siteConfig.js

中，它接收要在头部加载的脚本源数组。如本页所述 - https://docusaurus.io/docs/en/site-config.html#optional-fields

scripts - 要加载的 JavaScript 源数组。脚本标签将被插入到 HTML 头部。

所以你可以在

siteConfig.js

中添加它：

const siteConfig = {
  ...
  scripts: [
    'https://buttons.github.io/buttons.js',
    ...
  ],
  ...
};