如何在 Docusaurus V2 的 index.html 的頭部添加自定義腳本？

Question

我們正在使用 Docusaurus V2 制作網站。

在 Docusaurus V1 中，siteConfig.js 中有一個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 Helmet 更改 HTML 元數據。 基於社區的主題也是很有可能的。 大多數靜態站點生成器都采用這種允許用戶負責布局和樣式的方法。

我嘗試在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>
  );
}

}

但是腳本https://appsforoffice.microsoft.com/lib/1/hosted/office.js沒有出現在<head></head>

有沒有人遇到過類似的問題，誰能提供一些幫助？

Answer 1

使用'@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添加此docusaurus.config.js 。 您可以按照此 PR 跟蹤進度： https : //github.com/facebook/docusaurus/pull/1831 。

我們將很快發布v2.0.0-alpha.27以便您可以試用。 謝謝你的耐心！

Answer 2

我也在開發一個基於 docusaurus 的博客。
它提供了在 head 標簽中添加腳本的功能。
請按照以下步驟操作：
1.打開siteConfig.js
2. // 在此處添加將放置在標簽中的自定義腳本。
腳本：[' https://buttons.github.io/buttons.js ']，

Answer 3

我不知道你是否解決了這個問題。 您的朋友是 Lifecycle API。

具體你想要這個： https : //v2.docusaurus.io/docs/lifecycle-apis#injecthtmltags

構建一個插件並使用上面的。 D2 看起來很強大，我希望他們盡快發布穩定版 2！

如何在 Docusaurus V2 的 index.html 的頭部添加自定義腳本？

問題描述

3 個解決方案

解決方案1
3 2019-10-12 00:23:55

解決方案2
1 2019-09-16 13:25:51

解決方案3
0

如何在 Docusaurus V2 的 index.html 的頭部添加自定義腳本？

問題描述

3 個解決方案

解決方案1 3 2019-10-12 00:23:55

解決方案2 1 2019-09-16 13:25:51

解決方案3 0

解決方案1
3 2019-10-12 00:23:55

解決方案2
1 2019-09-16 13:25:51

解決方案3
0