-
|
I have tried to use But this code will execute in some seconds. first it show like this👇 after seconds, then change to my expected Is there a better way to give homepage special style when the very initial? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hi Using One solution to apply a className to the html/body tags on a per-page basis is to use the import React from 'react';
import Head from '@docusaurus/Head';
export default function HomePage() {
return (
<>
<Head>
<body className="homepage" />
</Head>
<Layout>
<h1>My HomePage</h1>
</Layout>
</>
);
}The homepage class would then be applied reliably on both the client + server, avoiding FOUC issues:
Another possibility is to swizzle the Navbar component, so that you can add logic to avoid rendering it for certain URL paths. https://docusaurus.io/docs/using-themes#for-site-owners Something like this could work (didn't try): import React from 'react';
import {useLocation} from '@docusaurus/router';
import OriginalNavbar from '@theme-original/Navbar';
export default function Navbar(props) {
const {pathname} = useLocation();
if (pathname === "/") {
return null;
}
return (
<OriginalNavbar {...props} />
);
} |
Beta Was this translation helpful? Give feedback.
-
|
hi, slorber I have use the first solution. It works well!! Many thx. XD |
Beta Was this translation helpful? Give feedback.
Hi
Using
useEffect, the static HTML is already rendered to the user when your homepage class is inserted by the effect.It is not a good fit because it will create some fouc / layout shift issues as the navbar will be first visible and then disappear after React hydration.
One solution to apply a className to the html/body tags on a per-page basis is to use the
Headcomponent (behind the scene it's using https://github.com/nfl/react-helmet)