How can I add custom scripts in index.html's head part in Docusaurus V2?

问题

We are making a website with Docusaurus V2.

In Docusaurus V1, there is a scripts setting in siteConfig.js to cusutimize html's head content. But, I cannot find the corresponding setting in Docusaurus V2.

According to https://docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2#layout, it seems possible to customize html's <head> part in V2.

Layout

The current state of Docusaurus is that it is in charge of the entire layout and styling, unintentionally making it very hard for users to customize their site's appearance to their wishes.

For Docusaurus 2, layout and styling should be controlled by the user. Docusaurus will handle the content generation, routing, translation, and versioning. Inspired by create-react-app and VuePress, Docusaurus will still provide a default theme, which the user can eject from, for further layout and styling customization. This means that it is very possible for the user to even change the HTML meta by using React Helmet. Community-based themes are also very possible. This approach of allowing users to be in charge of layout and styling is taken by most static site generators.

I tried to use react-helmet in src/pages/index.js, with the following code:

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

}

But the script https://appsforoffice.microsoft.com/lib/1/hosted/office.js did not show up inside <head></head>

Has anyone encountered similar problem and could anyone give some help?

回答1:

i am also developing a blog which is based on docusaurus.
and it provides the functionality to add script in head tag.
follow below steps :
1. Open siteConfig.js
2. // Add custom scripts here that would be placed in tags.
scripts: ['https://buttons.github.io/buttons.js'],

回答2:

Instead of React Helmet, use '@docusaurus/Head' instead.

import Head from '@docusaurus/Head';

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

We're working on this feature so you can add this via docusaurus.config.js. You can follow this PR to track the progress: https://github.com/facebook/docusaurus/pull/1831.

We'll release v2.0.0-alpha.27 soon so that you can try it out. Thanks for your patience!

来源：https://stackoverflow.com/questions/57859350/how-can-i-add-custom-scripts-in-index-htmls-head-part-in-docusaurus-v2

标签

javascript

react-helmet

docusaurus