Docusaurus的自定义内联脚本
Docusaurus的自定义内联脚本
提问于 2021-08-11 05:15:34
我正在尝试将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>，我尝试在我的index.js <Layout>部分中使用<Head>组件，但没有成功。
我如何正确地将这个内联脚本添加到docusaurus中，以便它在wowhead脚本之前加载？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-12 04:39:47
使用来自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);
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68736346
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号