如何在 Docusaurus V2 的 index.html 的头部添加自定义脚本？
[英]How can I add custom scripts in index.html's head part in Docusaurus V2?
问题描述
We are making a website with Docusaurus V2.
我们正在使用 Docusaurus V2 制作网站。
In Docusaurus V1, there is a scripts setting in siteConfig.js to cusutimize html's head content.在 Docusaurus V1 中，siteConfig.js 中有一个scripts设置， siteConfig.js自定义 html 的头部内容。 But, I cannot find the corresponding setting in Docusaurus V2.但是，我在 Docusaurus V2 中找不到相应的设置。
According to https://docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2#layout , it seems possible to customize html's <head> part in V2.根据https://docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2#layout ，似乎可以在 V2 中自定义 html 的<head>部分。
Layout
The current state of Docusaurus is that it is in charge of the entire layout and styling, unintentionally making it very hard for users to customize their site's appearance to their wishes.
For Docusaurus 2, layout and styling should be controlled by the user.
I tried to use react-helmet in src/pages/index.js , with the following code:我尝试在src/pages/index.js使用react-helmet ，代码如下：
function Home() {
const context = useDocusaurusContext();
const { siteConfig = {} } = context;
return (
<Layout
title={`Hello from ${siteConfig.title}`}
description="Description will go into a meta tag in <head />">
<Helmet>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
</Helmet>
</Layout>
);
}
} }
But the script https://appsforoffice.microsoft.com/lib/1/hosted/office.js did not show up inside <head></head>但是脚本https://appsforoffice.microsoft.com/lib/1/hosted/office.js没有出现在<head></head>
Has anyone encountered similar problem and could anyone give some help?有没有人遇到过类似的问题，谁能提供一些帮助？
3 个解决方案
解决方案1
3 2019-10-12 00:23:55
Instead of React Helmet, use '@docusaurus/Head' instead.使用'@docusaurus/Head'代替 React Helmet。
import Head from '@docusaurus/Head';
function Home() {
const context = useDocusaurusContext();
const { siteConfig = {} } = context;
return (
<Layout>
<Head>
<script src="..."></script>
</Head>
</Layout>
);
}
We're working on this feature so you can add this via docusaurus.config.js .我们正在开发此功能，因此您可以通过docusaurus.config.js添加此docusaurus.config.js 。 You can follow this PR to track the progress: https://github.com/facebook/docusaurus/pull/1831 .您可以按照此 PR 跟踪进度： https : //github.com/facebook/docusaurus/pull/1831 。
We'll release v2.0.0-alpha.27 soon so that you can try it out.我们将很快发布v2.0.0-alpha.27以便您可以试用。 Thanks for your patience!谢谢你的耐心！
解决方案2
1 2019-09-16 13:25:51
i am also developing a blog which is based on docusaurus.我也在开发一个基于 docusaurus 的博客。
and it provides the functionality to add script in head tag.它提供了在 head 标签中添加脚本的功能。
follow below steps :请按照以下步骤操作：
1. Open siteConfig.js 1.打开siteConfig.js
2. // Add custom scripts here that would be placed in tags. 2. // 在此处添加将放置在标签中的自定义脚本。
scripts: [' https://buttons.github.io/buttons.js '],脚本：[' https://buttons.github.io/buttons.js ']，
解决方案3
0
I have no idea if you solved this.我不知道你是否解决了这个问题。 Your friend is the Lifecycle API.您的朋友是 Lifecycle API。
Specifically you want this: https://v2.docusaurus.io/docs/lifecycle-apis#injecthtmltags具体你想要这个： https : //v2.docusaurus.io/docs/lifecycle-apis#injecthtmltags
Build a plugin and use the above.构建一个插件并使用上面的。 D2 is looking pretty strong, I wish they'd release a stable version 2 soon! D2 看起来很强大，我希望他们尽快发布稳定版 2！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.