13

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

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

4

3 回答 3

3

代替 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>
  );
}

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

我们将v2.0.0-alpha.27很快发布，以便您试用。谢谢你的耐心！

于 2019-10-12T00:23:55.717 回答
1

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

于 2019-09-16T13:25:51.233 回答
0

我不知道你是否解决了这个问题。你的朋友就是 Lifecycle API。

具体来说，你想要这个： https ://v2.docusaurus.io/docs/lifecycle-apis#injecthtmltags

构建一个插件并使用上述内容。D2 看起来很强大，我希望他们能尽快发布稳定的第 2 版！

于 2020-08-24T20:28:29.857 回答