메뉴 관리 - 2단계 메뉴
이전 문서: 메뉴 관리 - 2단계 메뉴 게시일: 2023-3-23 마지막 수정: 2024-7-2 원래 분류: 🛠 사이트 설정 태그: NotionNext 요약: NotionNext 3.13.0에서 더 유연한 메뉴 설정을 지원합니다.
메뉴 기능
NotionNext 3.12 이전의 구버전에서는 사이트 메뉴 바가 Page로 제어되었습니다.
유형이
Page인 글은 블로그 글 목록에 표시되지 않고, 내비게이션 바에 메뉴 진입점으로 나타납니다.
이전 방식에는 두 가지 단점이 있었습니다. 첫째, 분류, 아카이브, 검색 같은 기본 메뉴를 끄려면 설정 파일을 수정해야 해서 불편했습니다. 둘째, 이 방식으로 2단계 드롭다운 메뉴를 구현하기에는 부족했습니다. 그래서 이 글의 사용자 정의 메뉴 Menu 방식이 나오게 되었습니다.
새 메뉴 효과
모든 메뉴는 Notion에서 직접 정의합니다. 기존 Page 메뉴는 완전히 덮어써집니다. 동시에 시스템이 기본 제공하던 홈, 분류, 아카이브, 검색 등의 버튼도 직접 설정해야 합니다.
시작하기
먼저 NotionNext를 3.13.0 이상 버전으로 업데이트하세요. 업그레이드 가이드를 읽거나 커뮤니티에서 도움을 받을 수 있습니다.
NotionNext 업그레이드 가이드 | TANGLY's BLOG
NotionNext 새 버전이 출시된 뒤 프로젝트를 업데이트하는 방법입니다.
다음으로 blog.config.js에서 완전 사용자 정의 메뉴를 활성화합니다.
CUSTOM_MENU: process.env.NEXT_PUBLIC_CUSTOM_MENU || true, // Support Menu type이 값이 true이면 기존에 Page를 읽어 메뉴를 만들던 기능이 사용자 정의 메뉴로 대체됩니다.
💡 구버전에서는 환경 변수로 설정하는 것을 권장합니다. 4.0 이후 버전에서는 Notion_Config에서 설정할 수 있습니다.
일반 메뉴 추가 - Menu
Notion에서 유형이 Menu인 페이지를 추가합니다. 다음 필드를 포함해야 합니다.
설정 예시:
하위 메뉴 추가 - SubMenu
하위 메뉴 연결 방법: 목록에서 SubMenu가 Menu 바로 뒤에 오면 해당 Menu의 하위 메뉴가 됩니다.
하위 메뉴 주의 사항 세 가지:
⚠️
Menu뒤에SubMenu가 연결되면 이Menu는 클릭해 이동할 수 없고 펼침 메뉴로만 사용할 수 있습니다. ⚠️일반 메뉴
Menu뒤에만 하위 메뉴SubMenu를 연결할 수 있습니다.Menu뒤에Menu를 연결할 수 없고,SubMenu뒤에SubMenu를 연결할 수 없습니다.SubMenu가Menu바로 뒤에 오지 않으면 고립된 메뉴가 되어 표시되지 않습니다.
💡 팁: 메뉴 경로에는 상대 경로와 절대 경로가 있습니다. 절대 경로를 사용하세요.
/about은 절대 경로입니다. 왼쪽 슬래시 /로 시작하므로 블로그의 어느 페이지에서 이 메뉴를 클릭해도 http://domain/about 경로로 이동합니다.
about은 상대 경로입니다. 왼쪽 슬래시 /로 시작하지 않습니다. 블로그 홈에서 클릭하면 http://domain/about으로 이동하지만, 다른 페이지 예를 들어 http://domain/tag/tag-name에서 클릭하면 http://domain/tag/tag-name/about으로 이동해 페이지 접근 오류가 발생할 수 있습니다.
참고 설정
제 Notion 템플릿 설정을 참고할 수 있습니다.
특별 주의
💡
Menu,SubMenu두 유형은 본질적으로 메뉴일 뿐입니다. 유일한 기능은slug가 지정한 페이지로 이동하는 것입니다. 지정 페이지는 임의의 page, post, 외부 링크일 수 있습니다. 하지만Menu와SubMenu자체에는 글 내용을 넣지 않는 것이 좋습니다.
💡 특별 알림: V3.13 버전에서는 데이터베이스에 여러 뷰를 추가하지 마세요. 메뉴 순서가 흐트러질 수 있습니다. 글을 분류하고 정리하기 위해 뷰를 추가해야 한다면 별도의 단일 뷰 페이지를 새로 만드는 것을 권장합니다. 다음 이슈를 참고하세요: https://github.com/tangly1024/NotionNext/issues/1056
V4.0 이후 새 버전에서는 이 문제를 무시해도 됩니다.
메뉴 사용 방식 예시
📖 Notion에
Menu유형 데이터를 추가하면 이동 기능으로만 사용됩니다.menu의slug필드는 이동 경로를 지정하며, 이menu데이터의 페이지 내용은 실제로 아무 역할도 하지 않습니다.
Menu의 다섯 가지 사용 예시
Menu 메뉴에는 총 다섯 가지 사용 방식이 있습니다. 아래는 각 사용 방식의 예시입니다. 표의 첫 번째 열은 사용 방식 이름이고, 오른쪽 두 열은 각각 title, slug 값 예시이며, 가장 오른쪽 열은 설명입니다.
메뉴 캐시
NotionNext는 각 페이지마다 별도의 캐시를 만듭니다. 메뉴를 수정한 뒤 홈을 새로고침하면 새 메뉴가 적용될 수 있지만, 다른 글 페이지의 메뉴는 여전히 이전 버전일 수 있습니다. 사용자가 다른 페이지에 한 번 접속하면 캐시 갱신이 트리거되고, 다시 접속할 때 새 메뉴가 보입니다.
각 페이지를 새로고침하는 것이 번거롭다면 Vercel 관리 화면에서 직접 redeploy해 모든 캐시를 완전히 지울 수 있습니다.
원문 링크
https://docs.tangly1024.com/article/notion-next-secondary-menu