reactjs - 使用 Docusaurus 自定义内联脚本

标签 reactjs docusaurus

我正在尝试将 wowhead 工具提示添加到 docusaurus页。

wowhead documentation建议您需要将以下内容添加到您的<head>中部分:

<script>const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};</script>
<script src="https://wow.zamimg.com/widgets/power.js"></script>

我可以添加https://wow.zamimg.com/widgets/power.js使用脚本配置选项即可,该选项可与 defer 或 async 配合使用:

module.exports = {
  // Snipped rest of configuration
  scripts: [
    {
      src:
        'https://wow.zamimg.com/widgets/power.js',
      defer: true,
    },
  ],

对于内联部分<script>const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};</script>我尝试过使用 <Head>我的 index.js 中的组件 <Layout>部分但没有成功。

如何将此内联脚本正确添加到 docusaurus,以便它在 wowhead 脚本之前加载?

最佳答案

我们可以直接在docusaurus.config.js

中使用head标签
  headTags: [
    {
      tagName: 'script',
      attributes: {
        type: 'text/javascript',
      },
      innerHTML: `
      console.log('I am JavaScript')
      `
    }
  ],

关于reactjs - 使用 Docusaurus 自定义内联脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68736346/

相关文章:

javascript - 如何支持由 docusaurus 维护的旧版本文档的更改

javascript - react 事件处理程序未在 Docusaurus 页面上执行

javascript - 如何使用 useState() 钩子(Hook)在 ReactJS 中打开/关闭所有详细标签?

docusaurus - 有没有办法只对/docs 目录使用 Docusaurus?

ReactJs - 在 ES6 中使用 Mixins

css - React.js 中带有样式组件的动态背景图像

javascript - 如何用 Jest 调用 zendesk 函数

javascript - 如何在 fetch 中检索对象属性数组,然后将其传递给第二个 fetch 调用?

javascript - 如何在 react 中更改 pdf 的高度或宽度(npm react-pdf)