使用 Docusaurus 的自定义内联脚本

Question

我正在尝试将魔兽世界工具提示添加到 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 很好，它适用于延迟或异步：

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> 我尝试在 index.js <Layout> 部分使用 <Head> 组件但没有成功。

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

Answer 1

使用 D.Kastier 的建议，我成功地解决了我的问题，虽然它不是很优雅。

要正确加载脚本，并在页面初始加载后更新它：

     injectHtmlTags() {
       return {
         headTags: [
           // https://www.wowhead.com/tooltips
           {
             tagName: 'script',
             innerHTML: `
               const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};

               document.addEventListener('readystatechange', event => {
                 if (event.target.readyState === "complete") {
                   console.log('Updating tooltips from plugin');
                   window.$WowheadPower.refreshLinks();
                 }
                });
             `,
           },
           {
             tagName: 'script',
             attributes: {
               defer: true,
               src: 'https://wow.zamimg.com/widgets/power.js',
             },
           },
         ],
       };
     },

然后在每次页面更改时更新工具提示：

    onRouteUpdate({location}) {
      setTimeout(function() {           
          window.$WowheadPower.refreshLinks(); 
        }, 0);
    },

使用 Docusaurus 的自定义内联脚本

Custom Inline Script with Docusaurus

reactjs

docusaurus