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

Sof*_*mur 8 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,似乎可以自定义<head>V2中的html 部分。

布局

Docusaurus的当前状态是它负责整个布局和样式,无意中使用户很难根据自己的意愿自定义网站的外观。

对于Docusaurus 2,布局和样式应由用户控制。Docusaurus将处理内容的生成,路由,翻译和版本控制。受create-react-app和VuePress的启发,Docusaurus仍将提供默认主题,用户可以从中弹出该主题,以进行进一步的布局和样式自定义。这意味着用户甚至有可能通过使用React Helmet来更改HTML元数据。基于社区的主题也很有可能。大多数静态站点生成器都采用这种允许用户负责布局和样式的方法。

我试图用react-helmetsrc/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>
  );
}
Run Code Online (Sandbox Code Playgroud)

}

但是脚本https://appsforoffice.microsoft.com/lib/1/hosted/office.js没有出现在里面<head></head>

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

小智 13

更简单的方法:

创建文件 /static/js/loadtags.js。将您的标签放在那里,例如:

UST_CT = [];UST = { s: Date.now(), addTag: function(tag) { UST_CT.push(tag) } };UST.addEvent = UST.addTag;
Run Code Online (Sandbox Code Playgroud)

现在更新 docusaurus.config.js 中的脚本部分

UST_CT = [];UST = { s: Date.now(), addTag: function(tag) { UST_CT.push(tag) } };UST.addEvent = UST.addTag;
Run Code Online (Sandbox Code Playgroud)

  • 只是一个提示,以防您添加此内容但它不起作用。在我的环境中,需要停止并重新启动yarn才能使新脚本项生效。如果这不起作用,请尝试“纱线清除” (4认同)

Yan*_*Tay 12

使用 React Helmet 代替'@docusaurus/Head'

import Head from '@docusaurus/Head';

function Home() {
  const context = useDocusaurusContext();
  const { siteConfig = {} } = context;
  return (
    <Layout>
      <Head>
        <script src="..."></script>
      </Head>
    </Layout>
  );
}
Run Code Online (Sandbox Code Playgroud)

我们正在开发此功能,因此您可以通过添加此功能docusaurus.config.js。您可以关注此 PR 来跟踪进度: https: //github.com/facebook/docusaurus/pull/1831

我们将v2.0.0-alpha.27很快发布,以便您可以尝试一下。谢谢你的耐心!

  • 这会转到哪个文件? (3认同)

Nav*_*ain 1

我还在开发一个基于 docusaurus 的博客。
它提供了在 head 标签中添加脚本的功能。
请按照以下步骤操作:
1. 打开 siteConfig.js
2. // 在此处添加将放置在标签中的自定义脚本。
脚本:[' https://buttons.github.io/buttons.js '],