NotionNext 문서

Appearance

NotionNext에서 직접 테마 만들기 ​

이전 문서: NotionNext에서 직접 테마 만들기 게시일: 2023-7-6 마지막 수정: 2024-9-12 원래 분류: ⌨ 개발 튜토리얼 요약: 몇 단계만으로 나만의 테마를 만들 수 있습니다.

💡 이 문서는 NotionNext에서 폴더를 복사해 새 테마를 간단히 만드는 방법과, 각 테마에 반드시 포함되어야 하는 네 가지 파일의 역할을 설명합니다.

새로 출시된 NotionNext 4.0에서는 전체 코드 구조가 정리되어 사용자가 직접 테마를 만드는 과정이 크게 단순해졌습니다. 저는 모든 사용자가 자신만의 개성 있는 테마를 만들고 직접 이름을 붙여 보기를 권장합니다.

테마 관리 ​

NotionNext는 themes 디렉터리 아래의 모든 폴더를 자동으로 스캔합니다. 예를 들어 themes 디렉터리 아래에 example 폴더가 있다면, blog.config.js 또는 환경 변수에서 현재 테마 theme 값을 해당 폴더 이름으로 바꾸면 바로 전환할 수 있습니다.

Untitled

테마 추가와 삭제 ​

테마를 삭제하려면 특정 테마 디렉터리 전체를 삭제하면 됩니다. 예를 들어 example 폴더 전체를 삭제해도 사이트 사용에는 영향을 주지 않습니다.

테마를 추가하려면 다른 사람이 만든 테마 폴더를 themes 디렉터리 아래에 직접 넣거나, 기존 폴더 형식을 참고해 자신만의 테마 폴더를 만들면 됩니다.

테마를 만드는 방법 ​

💡 가장 좋은 학습 방법은 모방하고 복사하는 것입니다. 어느 정도 익숙해진 뒤 기술 문서를 참고하며 2차 창작을 시도하세요. NotionNext 4.0은 디렉터리 구조를 다시 정리해, 폴더 하나를 복사하고 이름만 바꾸면 자신만의 테마를 시작할 수 있게 했습니다.

💡 처음부터 새 폴더를 직접 만드는 것은 권장하지 않습니다. 현재 있는 테마 프레임워크를 복사하고 이름을 바꾼 뒤 조정하는 편이 좋습니다.

마음에 드는 테마를 하나 고르고, 해당 테마의 전체 폴더를 복사하세요. 예를 들어 example 폴더를 복사하고, 테마 이름을 adam처럼 원하는 이름으로 바꿉니다.

현재 테마를 전환하려면 설정의 theme 값을 adam으로 수정하면 바로 적용됩니다.

예시: example 테마를 복사하고 이름을 adam으로 바꾸면, 테마 전환 버튼에 adam 테마가 추가되어 선택할 수 있습니다.

UntitledUntitled

테마 디렉터리 설명 ​

각 테마 폴더는 네 부분으로 구성됩니다.

1. components ​

이 폴더는 테마에서 사용하는 컴포넌트를 보관합니다. 예를 들어 카드, 선택 상자, 내비게이션 바, 버튼 같은 기본 컴포넌트가 들어갑니다. 이렇게 하면 중복 개발을 피할 수 있습니다.

각 테마는 자신만의 컴포넌트 세트를 갖는 것이 좋습니다. 다른 테마의 컴포넌트를 직접 참조하지 마세요. 예를 들어 fukasawa의 블로그 카드 컴포넌트가 마음에 든다면 새 테마 아래로 복사해서 사용하는 편이 좋습니다.

UntitledUntitled

2. config.js ​

테마에서 자주 사용하는 스위치, 매개변수, 색상 등의 설정은 이곳의 설정 파일로 추출해 둘 수 있습니다. 이렇게 하면 통합 관리와 수정이 쉽습니다. 예를 들어 fukasawa 테마의 config.js에서는 사이드바 사용 여부를 설정할 수 있습니다. 사용자가 개인화할 수 있는 설정은 이곳에 모아 두는 것을 권장합니다.

Untitled

3. index.js 레이아웃 ​

테마의 진입 파일이자 레이아웃 파일입니다. 여러 작은 컴포넌트를 어떤 방식으로 조합하고 배치해 하나의 페이지로 만들지 결정합니다.

프론트엔드 개발의 기본 핵심은 두 가지입니다. 하나는 레이아웃이고, 다른 하나는 컴포넌트입니다.

  • 레이아웃: 각 요소가 어디에 나타나고 얼마나 큰 공간을 차지할지 결정합니다.

  • 컴포넌트: 각 요소의 색상, 테두리, 그림자, 글꼴, 이미지 배경 등을 결정합니다.

NotionNext는 테마 진입 파일로 해당 테마 디렉터리의 index.js 파일을 찾아 레이아웃을 읽습니다. example 테마를 예로 들면, example/index.js 파일 하단에서 다음 레이아웃을 export합니다.

export {
  Layout404,
  LayoutArchive,
  LayoutBase,
  LayoutCategoryIndex,
  LayoutIndex,
  LayoutPostList,
  LayoutSearch,
  LayoutSlug,
  CONFIG as THEME_CONFIG
}
**레이아웃 상세 설명**을 펼쳐 읽기

이 객체들을 export하는 역할은 다음과 같습니다. 필수 항목이 아닌 컴포넌트라도 빈 페이지 요소를 반환하거나 기본 빈 레이아웃을 반환해야 합니다. 예를 들면 다음과 같습니다.

Python
const LayoutSearch = ()⇒ <></>

const LayoutArchive = ()⇒ <LayoutBase>Blank page</LayoutBase>

💡 임의의 테마 index.js 파일을 읽어 보면 작동 방식을 이해할 수 있습니다. 예를 들어 /themes/fukasawa/index.js에는 이 테마의 모든 레이아웃이 포함되어 있습니다. 또한 라우트에 어떤 레이아웃을 표시할지는 blog.config.js 파일의 설정으로 결정됩니다. 직접 라우트를 추가하고, 테마에서 해당 라우트에 대응하는 레이아웃 이름을 export할 수 있습니다.

JavaScript
// path and component mapping: which theme component each path displays
  LAYOUT_MAPPINGS: {
    '-1': 'LayoutBase',
    '/': 'LayoutIndex',
    '/archive': 'LayoutArchive',
    '/page/[page]': 'LayoutPostList',
    '/category/[category]': 'LayoutPostList',
    '/category/[category]/page/[page]': 'LayoutPostList',
    '/tag/[tag]': 'LayoutPostList',
    '/tag/[tag]/page/[page]': 'LayoutPostList',
    '/search': 'LayoutSearch',
    '/search/[keyword]': 'LayoutSearch',
    '/search/[keyword]/page/[page]': 'LayoutSearch',
    '/404': 'Layout404',
    '/tag': 'LayoutTagIndex',
    '/category': 'LayoutCategoryIndex',
    '/[prefix]': 'LayoutSlug',
    '/[prefix]/[slug]': 'LayoutSlug',
    '/[prefix]/[slug]/[...suffix]': 'LayoutSlug',
    '/signin': 'LayoutSignIn',
    '/signup': 'LayoutSignUp'
  },

4. style.js 스타일 ​

여기에는 CSS를 직접 작성할 수 있으며, 현재 테마에만 적용됩니다.

Untitled

프론트엔드 지식에 대해 ​

프론트엔드 기술은 방대하고 복잡합니다. 하지만 보기 좋은 테마 스타일을 렌더링하는 것이 목적이고 애니메이션 세부 사항이나 성능까지 깊게 추구하지 않는다면, 가장 기본적인 레이아웃과 컴포넌트 지식만으로도 충분합니다.

또한 이 프로젝트는 일반적인 순수 HTML 프로젝트와 조금 다릅니다. 주로 세 가지 내용을 알아야 합니다.

  1. React-JSX: 매우 큰 규모의 프론트엔드 페이지 개발에 적합한 기반 프레임워크입니다.

  2. Next.js: 핵심 프레임워크입니다. 빠른 라우팅과 빠른 렌더링을 담당합니다.

  3. Tailwind CSS: 전통적인 style과 .css 파일 대신 의미 있는 클래스명을 사용해 유지보수와 확장을 쉽게 합니다.

이 세 가지 프론트엔드 지식은 뒤의 세 글에서 소개합니다.

원문 링크 ​

https://docs.tangly1024.com/article/your-own-theme