NotionNext 문서

Appearance

기본 정보 ​

이전 원문: 기본 정보 게시일: 2023-2-10 마지막 편집: 2024-10-30 원래 분류: 🛠 사이트 설정 태그: NotionNext 요약: NotionNext의 주요 기능과 자주 묻는 질문을 소개합니다.

들어가기 전에 ​

💡 이 문서에서는 작성자 이름, 웹사이트 URL 같은 기본 사이트 정보를 설정하는 방법을 설명합니다.

💡 이 문서를 읽기 전에 NotionNext 사이트 배포가 완료되어 있어야 합니다. 아직 사이트가 없다면 배포 튜토리얼을 참고해 먼저 사이트를 만들어 주세요: /user-guide/intro

설정 설명 ​

1. 사이트 정보 ​

웹사이트의 소셜 주소, 사이트 도메인, 작성자 정보, 기본 테마는 사이트 설정 파일 blog.config.js에서 확인할 수 있으며, 이 파일에서 설정을 수정할 수 있습니다.

JavaScript
AUTHOR: process.env.NEXT_PUBLIC_AUTHOR || 'NotionNext', // 닉네임 예: tangly1024
BIO: process.env.NEXT_PUBLIC_BIO || '평범한 밥심 블로거🍚', // 작성자 소개
LINK: process.env.NEXT_PUBLIC_LINK || '/user-guide/intro', // 웹사이트 주소
KEYWORDS: process.env.NEXT_PUBLIC_KEYWORD || 'Notion, 블로그', // 웹사이트 키워드. 영문 쉼표로 구분합니다.
SINCE: process.env.NEXT_SINCE || 2021, // 사이트 개설 연도

💡 설정을 수정하는 자세한 방법은 이전 문서인 설정 입문을 참고하세요.

설정 파일에 소셜 링크 주소를 추가하면 Hexo, Next 테마에서 연락처 버튼이 한 줄로 표시됩니다.

JavaScript
// 소셜 링크입니다. 필요 없다면 CONTACT_WEIBO:''처럼 비워 둘 수 있습니다.
CONTACT_EMAIL: process.env.NEXT_PUBLIC_CONTACT_EMAIL || '', // 이메일 주소 예: mail@tangly1024.com
CONTACT_WEIBO: process.env.NEXT_PUBLIC_CONTACT_WEIBO || '', // Weibo 개인 페이지
CONTACT_TWITTER: process.env.NEXT_PUBLIC_CONTACT_TWITTER || '', // Twitter 개인 페이지
CONTACT_GITHUB: process.env.NEXT_PUBLIC_CONTACT_GITHUB || '', // GitHub 개인 페이지 예: https://github.com/tangly1024
CONTACT_TELEGRAM: process.env.NEXT_PUBLIC_CONTACT_TELEGRAM || '', // Telegram 주소 예: https://t.me/tangly_1024
CONTACT_LINKEDIN: process.env.NEXT_PUBLIC_CONTACT_LINKEDIN || '', // LinkedIn 페이지
CONTACT_INSTAGRAM: process.env.NEXT_PUBLIC_CONTACT_INSTAGRAM || '', // Instagram 주소
CONTACT_BILIBILI: process.env.NEXT_PUBLIC_CONTACT_BILIBILI || '', // Bilibili 페이지
CONTACT_YOUTUBE: process.env.NEXT_PUBLIC_CONTACT_YOUTUBE || '', // YouTube 페이지

아래 예시에서는 GitHub, Telegram, 이메일 세 가지 연락처를 추가했습니다. 마지막 아이콘은 RSS 구독 아이콘입니다. CONTACT_BILIBILI를 설정하면 여기에 Bilibili 아이콘 링크가 추가됩니다.

Untitled

공유 기능 ​

글 하단의 공유 바를 제대로 사용하려면 사이트 주소를 설정해야 합니다. 그렇지 않으면 공유 경로가 기본 주소로 표시됩니다. 또한 LINK 설정은 feed 구독과 sitemap 생성에도 사용됩니다.

JavaScript
LINK: process.env.NEXT_PUBLIC_LINK || '/user-guide/intro', // 웹사이트 주소

Untitled

소셜 아이콘 버튼 사용자 지정 ​

Hexo 테마의 아이콘 버튼은 이 파일에서 수정할 수 있습니다.

예를 들어 GitHub 아이콘은 fab fa-github입니다. 다른 아이콘은 Font Awesome에서 찾을 수 있습니다.

JavaScript
return <div className='w-full justify-center flex-wrap flex'>
    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-300 '>
      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
        <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600'/>
      </a>}
      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
        <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600'/>
      </a>}
      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
        <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600'/>
      </a>}
      {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkIn'} >
        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
      </a>}
      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
        <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600'/>
      </a>}
      {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
        <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600'/>
      </a>}
      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
        <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
      </a>}
      {BLOG.ENABLE_RSS && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
        <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600'/>
      </a>}
    </div>
  </div>

사이트 다국어 ​

blog.config.js의 LANG을 수정하면 사이트 기본 언어를 전환할 수 있습니다.

JavaScript
LANG: 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.

💡 현재 지원 언어는 en-US, zh-CN, zh-HK, zh-TW, fr-FR, tr-TR, ja-JP입니다. 프로젝트에 PR을 보내 더 많은 언어 번역을 추가하거나 개선할 수도 있습니다. 사이트 링크 뒤에 언어 매개변수를 붙이면 다국어 동작을 바로 확인할 수 있습니다. 예: https://preview.tangly1024.com/?lang=en-US

브라우저 사이트 아이콘 ​

브라우저에 표시되는 사이트 아이콘을 수정하려면 /public 폴더의 favicon.ico 파일을 교체하면 됩니다.

UntitledUntitled

❓ 아이콘 만드는 방법 보기

favicon 제작

위 온라인 도구에서 이미지를 업로드하면 ICO 파일을 생성할 수 있습니다. 원하는 해상도를 선택하면 되며, 예시에서는 48x48을 선택했습니다. Untitled 다운로드한 뒤 파일 이름을 favicon.ico로 변경하세요.

❓ GitHub에서 파일 교체하기
  1. 프로젝트에서 public 디렉터리를 클릭합니다. Untitled
  2. public 디렉터리 오른쪽 위의 Add file을 클릭한 뒤 드롭다운에서 Upload files를 선택합니다. Untitled
  3. 업로드 페이지에서 choose your files를 클릭해 아이콘 파일을 업로드합니다. Untitled

⚠️ 파일 이름을 먼저 favicon.ico로 변경해야 합니다. Untitled✅ 마지막으로 Commit changes를 클릭해 업로드를 커밋합니다.

4. 사용자 지정 스타일과 스크립트 ​

사이트 스타일과 실행할 스크립트는 직접 결정할 수 있습니다. NotionNext는 CSS와 JS를 불러오는 두 가지 방법을 지원합니다.

  • 방법 1: 외부 파일 불러오기 blog.config.js에 CUSTOM_EXTERNAL_JS와 CUSTOM_EXTERNAL_CSS를 설정합니다.
Bash
// 사용자 지정 외부 스크립트와 외부 스타일
CUSTOM_EXTERNAL_JS: [''], // e.g. ['http://xx.com/script.js','http://xx.com/script.js']
CUSTOM_EXTERNAL_CSS: [''], // e.g. ['http://xx.com/style.css','http://xx.com/style.css']
  • 방법 2: 내부 파일로 사용자 지정
    • /public/css/custom.css 파일에서 스타일을 직접 작성할 수 있습니다.
    • /public/js/custom.js 파일에 작성한 스크립트는 페이지에 자동으로 포함됩니다.
    • 각 테마별 사용자 지정 CSS 파일도 사용할 수 있습니다. 예: /public/css/theme-hexo.css

❓ JS와 CSS를 불러오는 것만으로 요구사항을 충족하기 어렵다면 NotionNext 2차 개발 가이드를 참고해 사용자 지정 개발을 진행할 수 있습니다.

5. 글 경로 ​

Notion에서는 Post와 Page 두 가지 타입의 글을 추가할 수 있습니다. 이 중 Post 타입의 글은 블로그 목록에 표시됩니다.

글의 기본 접근 주소는 http://[도메인]/article/[slug]입니다. slug 값은 기본적으로 페이지 ID이며, Notion에서 수동으로 지정할 수 있습니다.

글 주소 중간에 article이 들어가는 것을 원하지 않는다면 설정 파일에서 POST_URL_PREFIX 값을 수정하세요.

JavaScript
POST_URL_PREFIX: process.env.NEXT_PUBLIC_POST_URL_PREFIX || 'article', // POST 타입 글의 기본 경로 접두사입니다. 기본 POST 경로는 /article/[slug]입니다.

💡 예시:

  • 값이 빈 문자열이면 글 경로는 http://[도메인]/[slug]입니다.
JavaScript
POST_URL_PREFIX: '',
  • 값이 post이면 글 경로는 http://[도메인]/post/[slug]입니다.
JavaScript
POST_URL_PREFIX: 'post',

6. Notion 필드명 사용자 지정 ​

Notion 템플릿의 표 머리글과 선택 옵션 이름을 원하는 언어로 바꿀 수 있습니다.

JavaScript
// Notion 데이터베이스 필드명 사용자 지정
NOTION_PROPERTY_NAME: {
  password: process.env.NEXT_PUBLIC_NOTION_PROPERTY_PASSWORD || 'password',
  type: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE || 'type', // 글 타입
  type_post: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_POST || 'Post', // type 글 타입이 이 값과 같으면 블로그 글입니다.
  type_page: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_PAGE || 'Page', // type 글 타입이 이 값과 같으면 단일 페이지입니다.
  type_notice: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_NOTICE || 'Notice', // type 글 타입이 이 값과 같으면 공지입니다.
  title: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TITLE || 'title', // 글 제목
  status: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS || 'status',
  status_publish: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_PUBLISH || 'Published', // status 상태 값이 이 값과 같으면 게시 상태입니다. 원하는 언어 값을 사용할 수 있습니다.
  status_invisible: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_INVISIBLE || 'Invisible', // status 상태 값이 이 값과 같으면 숨김 게시 상태입니다. 원하는 언어 값을 사용할 수 있으며, 그 외 상태의 페이지는 블로그에 표시되지 않습니다.
  summary: process.env.NEXT_PUBLIC_NOTION_PROPERTY_SUMMARY || 'summary',
  slug: process.env.NEXT_PUBLIC_NOTION_PROPERTY_SLUG || 'slug',
  category: process.env.NEXT_PUBLIC_NOTION_PROPERTY_CATEGORY || 'category',
  date: process.env.NEXT_PUBLIC_NOTION_PROPERTY_DATE || 'date',
  tags: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TAGS || 'tags',
  icon: process.env.NEXT_PUBLIC_NOTION_PROPERTY_ICON || 'icon'
},

7. 사용자 지정 메뉴, 2단계 메뉴 ​

V3.13.0부터 모든 버전에서 사용자 지정 메뉴를 지원합니다. 예시는 다음과 같습니다.

UntitledUntitled

설정 도움말은 아래 링크를 참고하세요.

NotionNext 2단계 메뉴 사용 설명 | TANGLY's BLOG

NotionNext 3.13.0에서는 더 유연한 메뉴 설정을 지원합니다.

8. 의사 정적 경로 ​

💡 웹사이트는 NextJS로 개발되어 있으며, 사용자가 접근하는 페이지는 그 자체로 정적 페이지입니다.

NotionNext는 페이지를 일정 시간 동안 캐시합니다. 이 시간이 지나면 NotionNext가 Notion에서 최신 글 내용을 다시 동기화합니다. 캐시 시간은 NEXT_REVALIDATE_SECOND 설정으로 조정합니다.

또한 PSEUDO_STATIC 값을 true로 바꾸면 페이지 주소 끝이 .html로 끝나 더 정적인 페이지처럼 보입니다.

JavaScript
PSEUDO_STATIC: false, // 의사 정적 경로입니다. 활성화하면 모든 글 URL이 .html로 끝납니다.
NEXT_REVALIDATE_SECOND: process.env.NEXT_PUBLIC_REVALIDATE_SECOND || 5, // 콘텐츠 캐시 갱신 간격입니다. 단위는 초입니다. 각 페이지는 5초 동안 순수 정적 상태가 되며, 이 기간에는 방문 횟수와 관계없이 Notion 데이터를 다시 가져오지 않습니다. 값을 늘리면 Vercel 리소스를 절약하고 방문 속도를 높일 수 있지만, 글 업데이트 반영이 늦어질 수 있습니다.

9. 기타 스타일 ​

등록 정보: 도메인 등록 번호와 공안 등록

Notion_Config에 다음 설정을 추가하는 방식을 권장합니다.

YAML
BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 등록 번호 예: ICPXXXXXXX
BEI_AN_GONGAN: '' , // 공안 등록 추가 예: gongan-beian xxxxx

공안 등록 스타일은 다음과 같습니다. image.png

블로그 목록 표시 방식

버튼 페이지네이션을 사용할지, 마우스 스크롤로 무한 로딩 페이지네이션을 사용할지 선택할 수 있습니다. 페이지마다 표시할 글 수를 설정할 수 있습니다. 목록 페이지에서 글 본문 미리보기를 표시할지, 제목과 요약만 표시할지도 설정할 수 있습니다.

JavaScript
POST_LIST_STYLE: 'page', // ['page','scroll] 글 목록 스타일: 페이지 번호 방식 또는 단일 페이지 스크롤 로딩
POST_LIST_PREVIEW: process.env.NEXT_PUBLIC_POST_PREVIEW || 'false', // 목록에서 글 미리보기를 불러올지 여부
POSTS_PER_PAGE: 12, // 페이지당 글 수
블로그 목록 정렬
JavaScript
POSTS_SORT_BY: 'notion', // 정렬 방식: 'date'는 시간순, 'notion'은 Notion에서 제어
코드 렌더링 스타일
JavaScript
// PrismJs 코드 관련 설정
PRISM_JS_AUTO_LOADER: 'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js',
PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/',
PRISM_THEME_PATH: 'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 코드 스타일 테마입니다. 자세한 내용은 https://github.com/PrismJS/prism-themes 참고
CODE_MAC_BAR: true, // 코드 블록 왼쪽 위에 mac 스타일의 빨강, 노랑, 초록 아이콘을 표시합니다.
CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 줄 번호 표시 여부

PRISM_THEME_PATH 매개변수를 수정하면 테마 스타일을 변경할 수 있습니다. 사용할 수 있는 테마는 prism-themes 페이지에서 확인하세요. CODE_MAC_BAR 매개변수로 코드 블록 왼쪽 위에 mac 스타일의 빨강, 노랑, 초록 아이콘을 표시할지 제어할 수 있습니다. CODE_LINE_NUMBERS 값을 true로 바꾸면 코드 왼쪽에 줄 번호가 표시됩니다. 줄 번호를 표시하면 코드의 가로 스크롤이 비활성화됩니다. Untitled

좌우 레이아웃 반전

Hexo 테마의 기본 레이아웃은 글이 왼쪽, 사이트 정보가 오른쪽에 표시됩니다. LAYOUT_SIDEBAR_REVERSE를 true로 바꾸면 글이 오른쪽, 사이트 정보가 왼쪽에 표시되도록 레이아웃이 반전됩니다.

JavaScript
// 사이드바 레이아웃 반전 여부입니다. 지원 테마: hexo next medium fukasawa example
LAYOUT_SIDEBAR_REVERSE: false,
마우스 클릭 효과
JavaScript
// 마우스 클릭 불꽃 효과
FIREWORKS: process.env.NEXT_PUBLIC_FIREWORKS || false, // 스위치
// 불꽃 색상입니다. 색상을 제공해 준 https://github.com/Vixcity 에 감사드립니다.
FIREWORKS_COLOR: ['255, 20, 97', '24, 255, 146', '90, 135, 255', '251, 243, 140'],
동적 배경 효과
JavaScript
// 벚꽃 낙하 효과
SAKURA: process.env.NEXT_PUBLIC_SAKURA || false, // 스위치

// 떠다니는 선 효과
NEST: process.env.NEXT_PUBLIC_NEST || false, // 스위치

// 동적 리본 효과
FLUTTERINGRIBBON: process.env.NEXT_PUBLIC_FLUTTERINGRIBBON || false, // 스위치
// 정적 리본 효과
RIBBON: process.env.NEXT_PUBLIC_RIBBON || false, // 스위치

// 별빛 비 효과입니다. 다크 모드에서만 적용됩니다.
STARRY_SKY: process.env.NEXT_PUBLIC_STARRY_SKY || false, // 스위치

Notion 개인정보 보호와 보안 ​

공유한 Notion 페이지는 다른 사람에게 보기 권한만 제공됩니다. 직접 편집 권한이나 댓글 권한을 열지 않는 한 다른 사람이 편집할 수 없습니다.

또한 원본 Notion 페이지에 다른 사람이 접근하는 것을 원하지 않는다면 Notion 페이지 공유를 끄고, Notion access_token을 통해 데이터를 가져오는 방식을 사용할 수 있습니다.

Untitled

원문 링크 ​

https://docs.tangly1024.com/article/notion-next-guide