我们正在使用Docusaurus V2建立一个网站。
在Docusaurus V1中,scripts
中有一个siteConfig.js
设置可以定制html的头部内容。但是,我在Docusaurus V2中找不到相应的设置。
根据https://docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2#layout,似乎可以在V2中自定义html的<head>
部分。
布局
Docusaurus的当前状态是它负责 整个布局和样式,无意间使其很难 用户根据自己的意愿自定义网站的外观。
对于Docusaurus 2,布局和样式应由用户控制。 Docusaurus将处理内容的生成,路由,翻译, 和版本控制。受create-react-app和VuePress启发,Docusaurus 仍会提供默认主题,用户可以从中弹出 进一步的布局和样式定制。这意味着它非常 用户甚至可以通过使用React更改HTML元数据 头盔。基于社区的主题也很有可能。这种方法 允许用户负责布局和样式的工作 大多数静态网站生成器。
我尝试通过以下代码在react-helmet
中使用src/pages/index.js
:
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>
);
}
}
但是脚本https://appsforoffice.microsoft.com/lib/1/hosted/office.js
并未显示在<head></head>
内
有人遇到过类似的问题吗?有人可以提供帮助吗?
答案 0 :(得分:1)
我也在开发基于docusaurus的博客。
并且提供了在head标签中添加脚本的功能。
请按照以下步骤操作:
1.打开siteConfig.js
2. //在此处添加将放置在标记中的自定义脚本。
脚本:['https://buttons.github.io/buttons.js'],
答案 1 :(得分:0)
使用'@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>
);
}
我们正在使用此功能,因此您可以通过docusaurus.config.js
添加此功能。您可以按照此PR跟踪进度:https://github.com/facebook/docusaurus/pull/1831。
我们将尽快发布v2.0.0-alpha.27
,以便您可以尝试一下。感谢您的耐心等待!
答案 2 :(得分:0)
我不知道你是否解决了这个问题。您的朋友是Lifecycle API。
特别是您想要这样: https://v2.docusaurus.io/docs/lifecycle-apis#injecthtmltags
构建一个插件并使用上面的代码。 D2看起来很强大,我希望他们能尽快发布一个稳定的版本2!