如何在Docusaurus中正确添加前置内联脚本实现Wowhead工具提示

解决方法 #

方案1：直接在docusaurus.config.js的scripts配置项插入内联脚本（推荐，顺序可控） #

Docusaurus的scripts配置本身支持定义内联脚本，你只需要把内联的配置脚本放在外部Wowhead脚本的前面，就能保证加载顺序符合要求：

module.exports = {
  // 省略其余配置
  scripts: [
    // 内联配置脚本，优先级在前，会先执行完成
    {
      innerHTML: 'const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};',
    },
    // 外部Wowhead脚本，放在内联脚本之后
    {
      src: 'https://wow.zamimg.com/widgets/power.js',
      defer: true,
    },
  ],
}

Docusaurus会严格按照配置顺序将脚本插入到页面<head>标签中，内联脚本没有网络请求延迟，可确保whTooltips变量在外部脚本执行前完成定义。

方案2：使用injectHtmlTags配置注入 #

如果需要更精细的控制注入位置，可以在docusaurus.config.js中添加injectHtmlTags配置，直接将内联脚本注入到<head>的最前部：

module.exports = {
  // 省略其余配置
  scripts: [
    {
      src: 'https://wow.zamimg.com/widgets/power.js',
      defer: true,
    },
  ],
  injectHtmlTags: {
    headTags: [
      {
        tagName: 'script',
        innerHTML: 'const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};',
      },
    ],
  },
}

你之前在Layout组件中用<Head>组件注入不生效的原因是：组件内注入的内容加载时机晚于docusaurus.config.js中配置的外部脚本，变量定义无法在Wowhead脚本执行前完成。

内容的提问来源于stack exchange，提问作者Alex.Ritna