24

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?

Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
SoftTimur
  • 5,630
  • 38
  • 140
  • 292

4 Answers4

13

Easier way:

Create a file /static/js/loadtags.js. Put your tags in there, like:

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

Now update the scripts section in docusaurus.config.js

  scripts: [
    
    {
      src:
        '/js/loadtags.js',
      async: false,
    },
    {
      src:
        'https://improve.attrace.com/server/ust.min.js?v=4.3.2',
      async: true,
    },
  ],
Roeland Werring
  • 730
  • 6
  • 7
  • 4
    Just a tip in case you add this and it doesn't work. In my environment, it was required that I stop and restart yarn to get the new scripts item to take effect. If that doesnt work, try `yarn clear` – dmcknight Jun 10 '22 at 19:54
12

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!

Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
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'],

Naveen Jain
  • 1,042
  • 7
  • 26
0

I have no idea if you solved this. Your friend is the Lifecycle API.

Specifically you want this: https://v2.docusaurus.io/docs/lifecycle-apis#injecthtmltags

Build a plugin and use the above. D2 is looking pretty strong, I wish they'd release a stable version 2 soon!

Kurtis Rogers
  • 19
  • 4