[Next.js] Nextra에서 파일 및 페이지 구성
Nextra는 먼저 페이지 디렉토리에서 모든 Markdown 파일 및 구성을 수집한 다음 전체 사이트의 "페이지 맵 정보"를 생성하여 아래의 탐색 모음 및 사이드바와 같은 항목을 렌더링한다.
기본 동작
기본적으로 페이지 맵에는 모든 .md 및 .mdx 파일 이름과 디렉토리 구조가 알파벳 순으로 정렬되어 있다.
그런 다음 Nextra는 제목 패키지를 사용하여 파일 이름에서 형식이 지정된 페이지 이름을 가져온다.
예를 들어 다음과 같은 구조를 가진 경우
pages/
contact.md
index.mdx
about/
legal.md
index.mdx
페이지 맵은 다음과 같다. (모든 이름이 알파벳 순으로 정렬된다.)
[
{
"name": "About",
"children": [{ "name": "Index" }, { "name": "Legal" }]
},
{ "name": "Contact" },
{ "name": "Index" }
]
글로벌 페이지 맵은 Nextra에 의해 각 페이지에 번들로 제공돤다.
이후, 구성된 테마는 해당 페이지 맵으로 실제 UI를 렌더링한다.
_meta.json
파일 이름을 사용하는 대신 각 페이지의 제목을 사용자 정의하는 것이 매우 일반적이다.
예를 들어, "Index"라는 제목의 페이지가 있는 대신 "Home"이라는 제목의 페이지가 있는 것은 의미가 없다.
여기서 _meta.json이 등장한다.
Nextra에서 사이트와 페이지 구조는 함께 위치한 _meta.json 파일을 통해 구성할 수 있다.
각 디렉토리에 _meta.json 파일을 둘 수 있으며, 이 파일은 아래와 같이 각 페이지의 기본 구성을 재정의하는 데 사용된다.
pages/
_meta.json
contact.md
index.mdx
about/
_meta.json
legal.md
index.mdx
{
"index": "My Homepage",
"contact": "Contact Us",
"about": "About Us"
}
위 파일은 Nextra에게 각 페이지의 순서와 올바른 제목을 알려준다.
추가로 제목을 사용하여 이 작업을 수행하고 다른 구성도 포함할 수 있다.
{
"index": "My Homepage",
"contact": "Contact Us",
"about": {
"title": "About Us",
"...extra configurations...": "..."
}
}
추가 구성은 추가 정보로 테마에 전달된다.
추가 구성에 대한 자세한 내용은 아래 링크에서 확인이 가능하다.
https://nextra.site/docs/docs-theme/page-configuration
'문서 정리 프레임워크 > Nextra' 카테고리의 다른 글
[Nextra] 구문 강조 사용하기 (0) | 2023.06.24 |
---|---|
[Nextra] Next.js 링크 사용하기 (0) | 2023.06.23 |
[Nextra] FileTree, Steps, Mermaid사용 (0) | 2023.06.22 |
[Nextra] Callout 컴포넌트 (0) | 2023.06.21 |
[Next.js] Nextra를 사용한 문서화 (0) | 2023.06.19 |
댓글