[Docusaurus] 초기 구성

메인 페이지 수정

여길 참고하면 좋음

• https://docusaurus.io/docs/creating-pages#routing

src/pages 에서 메인 페이지 내용을 정의할 수 있다.

리액트 기반이면 js파일, md파일을 보여주고 싶으면 md파일로 써주면 된다.

# 리액트 페이지를 메인으로 보여줄 경우
src/
┗ pages/
  ┣ index.js
  ┣ index.module.css
  ┗ _index.md

# md 파일을 메인으로 보여줄 경우
src/
┗ pages/
  ┣ index.md
  ┣ index.module.css
  ┗ _index.js

검색 기능 추가

별도 엔진 연동 없이 검색 plugin을 쓸 수 있다.

• https://docusaurus.io/docs/search#using-local-search
• https://docusaurus.io/community/resources#search

docusaurus-lunr-search 를 쓴다.

적용 방법은 위의 gitHub의 README대로 하면 된다.

❯ npm i docusaurus-lunr-search  --save

❯ npm install


# docusaurus.config.js에 플러그인 추가
const config = {
  // ...
  # highlight-start
  plugins: [
    [require.resolve('docusaurus-lunr-search'), {
      languages: ['en', 'ko']
    }]
  ],
  # highlight-end
  // ...
}


❯ npm run swizzle docusaurus-lunr-search SearchBar -- --eject --danger

> docusaurus@0.0.0 swizzle
> docusaurus swizzle docusaurus-lunr-search SearchBar --eject --danger

[SUCCESS] 
- "/mnt/c/Users/user/Desktop/docusaurus/src/theme/SearchBar/algolia.css"
- "/mnt/c/Users/user/Desktop/docusaurus/src/theme/SearchBar/index.js"
- "/mnt/c/Users/user/Desktop/docusaurus/src/theme/SearchBar/lunar-search.js"
- "/mnt/c/Users/user/Desktop/docusaurus/src/theme/SearchBar/styles.css"
- "/mnt/c/Users/user/Desktop/docusaurus/src/theme/SearchBar/templates.js"
- "/mnt/c/Users/user/Desktop/docusaurus/src/theme/SearchBar/utils.js"


# 이후 실제 환경에 배포하면 검색 가능
❯ npm run build

로컬 테스트 환경에서는 실제 검색 기능이 활성안되는게 맞다.

swizzle까지 하고 실제 배포 후 잘 되는지 보면 됨.

Note
Docusaurus search information can only be generated from a production build.
Local development is currently not supported.

코드블럭 하이라이팅은 언어별로 주석처리하고 highlight-start, highlight-end 써주면 된다.