Custom Pages · Docusaurus

여러분의 사이트에 기본 문서나 블로그 마크다운 파일이 아닌 페이지를 추가할 수 있습니다. website/pages 디렉토리에 .js 파일을 추가하기만 하면 됩니다. 추가된 파일은 React 컴포넌트입니다. render() 함수가 호출되면 CSS 클래스 등과 결합되어 페이지를 만들어줍니다.

홈페이지 꾸미기

홈페이지를 꾸미는 가장 쉬운 방법은 도큐사우르스 설치 스크립트를 실행할 때 생성되는 예제 사이트를 활용하는 것입니다.

로컬 서버를 시작하고 http://localhost:3000 Url로 접근하면 예제 홈페이지를 볼 수 있습니다. website/pages/en/index.js 파일을 수정해서 프로젝트를 설명하기 위한 다양한 컴포넌트와 이미지를 추가합니다.

다른 커스텀 페이지 추가하기

Docusaurus provides some helpful example pages in the website/pages/en directory, including index.js, users.js, and help.js. 각 파일은 도큐사우르스 커스텀 페이지를 어떻게 만드는지 잘 보여주고 있습니다.

root-directory
├── docs
└── website
    ├── blog
    ├── core
    │   └── Footer.js
    ├── package.json
    ├── pages
    │   └── en
    │       ├── help.js
    │       ├── index.js
    │       └── users.js
    ├── sidebars.json
    ├── siteConfig.js
    └── static

You are also free to write your own pages. 인덱스 페이지를 만드는 것은 권장합니다. 하지만 어떤 페이지도 여러분의 사이트에 포함해서 제공하는 것이 필수는 아닙니다. 어떻게 제공된 컴포넌트를 사용할 수 있고 페이지에 추가하는지에 대한 정보는 여기를 참고하세요. 헤더 네비게이션 바에서 다른 페이지를 링크하는 방법에 대한 정보는 여기를 참고하세요.

네비게이션 헤더에 페이지가 보여지길 원한다면 siteConfig.js 파일에 headerLinks 항목을 다음과 같이 추가합니다. { page: 'about-slash', label: 'About/' },

정적인 페이지 추가하기

정적인 .html 파일을 사용할 수 있습니다. 하지만 도큐사우르스의 헤더, 푸터, 스타일에는 기본적으로 포함되지 않습니다. 정적인 페이지는 다른 정적인 리소스 파일과 마찬가지로 static 디렉토리에 추가해야 합니다. pages 디렉토리에 정적인 페이지를 생성하는 경우에는 리액트에서 생성된 페이지 대신에 서비스를 제공하게 됩니다.

도큐사우르스의 스타일시트를 사용하고자 한다면 다음 경로를 사용할 수 있습니다. ${baseUrl}css/main.css. If you wish to use separate CSS for these static pages, you can exclude them from being concatenated to Docusaurus' styles by adding them into the siteConfig.separateCss field in siteConfig.js.

도큐사우르스 사이트의 스타일, 헤더, 푸터를 HTML 조각으로 감싸기 위해 $wrapPagesHTML 사이트 설정 옵션을 지정할 수 있습니다.

사이트 푸터 수정하기

예제로 제공되는 core/Footer.js 파일을 활용할 수 있습니다. 예제 파일은 도큐사우르스 설치 스크립트가 실행될 때 만들어집니다. 푸터에서는 여러분이 만든 사이트 또는 다른 외부 사이트로의 링크를 추가하거나 편집할 수 있습니다.

문서, API, 트위터, 디스코드, 페이스북 그룹, 스택오버플로, 깃허브 등의 링크를 추가하는 것을 권장합니다.

여러분의 푸터는 자동으로 문서와 블로그 포스트를 포함한 사이트 내 모든 페이지에 적용됩니다. 단, 정적인 HTML 페이지를 추가한 경우는 예외입니다.

사이트에 푸터를 적용하고 싶지 않다면 core/Footer.js 파일에 있는 render 함수에서 반환되는 값을 null로 수정합니다. 아래와 같이 적용할 수 있습니다.

const React = require('react');

class Footer extends React.Component {
  render() {
    return null;
  }
}

module.exports = Footer;