Блог

Использование Docusaurus 2.0.0-бета.4

 import React, { useEffect, useState } from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css';
import HomepageFeatures from '../components/HomepageFeatures';
import Slideshow from '../components/ReactSlider/ReactSlider';
import Footer from '@theme/Footer';
import Navbar from '@theme/Navbar';


function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--transparent', styles.heroBanner)}
    style={{background: "transparent", position:"absolute", top:"20px", marginLeft:"5px", textAlign:"center", cursor:"default"}}
    >
      <div className="container" >
        <h1 className="hero_"
        style={{color:"#505050", cursor:"default"}} // top badge color
        >{siteConfig.title}</h1>
        <p className="hero__subtitle"
        style={{color:"#505050"}} // top badge tagline color
        >{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
          style={{backgroundColor:"skyblue", color:"#505050"}}
            className="button button--secondary button--lg btncolor"
            to="/docs/intro">
            Products Page
          </Link>
        </div>
      </div>
    </header>
  );
}

export default function Home() {

  const [loading, setLoading] = useState(true);

useEffect(() => {
  setTimeout(() => {
    setLoading(false);
  }, 0.0000001);
}, []);


  const {siteConfig} = useDocusaurusContext();
  

  return (
    
    <div>
      
    <Navbar/>

  {loading ?  console.log('loading...') :  
    
    <>
     
    <Slideshow />  
    <HomepageHeader />

    <main>
      <HomepageFeatures />
    </main>
    
   <Footer/>
    </>
    }  
  </div>  
);
};
 

Однако нижний колонтитул работает нормально, если я визуализирую навигационную панель, она выдает ошибку при сборке и пустой белый экран на локальном хосте.
Однако, если я использую макет для переноса навигационной панели, он работает, но реализует двойную навигационную панель и нижний колонтитул, как это включено в код макета, который приведен ниже

 import React, { useEffect, useState } from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css';
import HomepageFeatures from '../components/HomepageFeatures';
import Slideshow from '../components/ReactSlider/ReactSlider';
import Footer from '@theme/Footer';
import Navbar from '@theme/Navbar';


function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--transparent', styles.heroBanner)}
    style={{background: "transparent", position:"absolute", top:"20px", marginLeft:"5px", textAlign:"center", cursor:"default"}}
    >
      <div className="container" >
        <h1 className="hero_"
        style={{color:"#505050", cursor:"default"}} // top badge color
        >{siteConfig.title}</h1>
        <p className="hero__subtitle"
        style={{color:"#505050"}} // top badge tagline color
        >{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
          style={{backgroundColor:"skyblue", color:"#505050"}}
            className="button button--secondary button--lg btncolor"
            to="/docs/intro">
            Products Page
          </Link>
        </div>
      </div>
    </header>
  );
}

export default function Home() {

  const [loading, setLoading] = useState(true);

useEffect(() => {
  setTimeout(() => {
    setLoading(false);
  }, 0.0000001);
}, []);


  const {siteConfig} = useDocusaurusContext();
  

  return (
    
    <div>
    <Layout>  
    <Navbar/>
    </Layout> 

  {loading ?  console.log('loading...') :  
    
    <>
     
    <Slideshow />  
    <HomepageHeader />

    <main>
      <HomepageFeatures />
    </main>
    
   <Footer/>
    </>
    }  
  </div>  
);
};
 

Пожалуйста, помогите и заранее спасибо