时间戳

首页 > 解决方案 > 在 Docusaurus v2 中将外部 javascript 添加到文档页面

javascript - 在 Docusaurus v2 中将外部 javascript 添加到文档页面

问题描述

我正在构建一个仅包含 HTML 片段和相应的 js/css 的组件库，并且我正在使用 Docusaurus 来记录这些组件。我有每个组件的文档页面。在文档页面上有每个组件的示例。我想让组件正常工作（点击事件、键盘导航等），所以我通过插件附加了组件 javascript：

module.exports = function (context, options) {
  return {
    name: 'docusaurus-plugin-component-assets',
    injectHtmlTags() {
      return {
        headTags: [
          {
            tagName: 'link',
            attributes: {
              rel: 'stylesheet',
              href: 'https://example.com/css/component.min.css',
            },
          },
        ],
        postBodyTags: [
          {
            tagName: 'script',
            attributes: {
              src: 'https://example.com/js/component.min.js',
            },
          },
        ],
      };
    },
  };
};

在我的docusaurus.config.js我添加了我的插件：

...

plugins: [
  'docusaurus-plugin-sass',
  path.resolve(__dirname, 'src/plugins/docusaurus-plugin-component-assets.js')
],

...

这成功地将样式表和 javascript 添加到正确的位置。但是 javascript 永远不会执行。看来我的组件 javascript 在文档应用程序加载之前触发。

我错过了什么？将外部 javascript 添加到文档页面的正确方法是什么？

编辑：我正在使用“@docusaurus/core”：“2.0.0-beta.0”，

标签： javascriptdocusaurus

解决方案

您可以将组件嵌入 Live Code 块 Docusaurus V2。

您将需要使用 npm 或 yarn 安装该软件包。

npm install --save @docusaurus/theme-live-codeblock

module.exports = {
  plugins: ['@docusaurus/theme-live-codeblock'],
  themeConfig: {
    liveCodeBlock: {
      /**
       * The position of the live playground, above or under the editor
       * Possible values: "top" | "bottom"
       */
      playgroundPosition: 'bottom',
    },
  },
};

您可以使用下面的链接找到有关此过程的详细信息。

https://docusaurus.io/docs/markdown-features/code-blocks#interactive-code-editor

需要注意的是，这只适用于 react 组件。

推荐阅读