如何在Docusaurus V2的index.html头部添加自定义脚本?

时间:2019-09-09 18:24:30

标签: javascript react-helmet docusaurus

我们正在使用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>

有人遇到过类似的问题吗?有人可以提供帮助吗?

3 个答案:

答案 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!