Starter 테마

이전 문서: Starter 테마 게시일: 2024-3-4 마지막 수정: 2025-7-11 원래 분류: ⭐ 테마 매개변수 요약: Starter 테마 사용 방법입니다.

테마 미리보기

Starter 테마 미리보기

새 테마 Starter

V4.3 버전에 추가된 무료 테마입니다. 회사, 창업자, 독립 개발자, 오픈 소스 기술 커뮤니티, 브랜드 홍보 담당자를 위해 설계되었습니다.

브랜드 소개, 블로그 뉴스, 제품과 서비스 홍보, 팀 소개, 뉴스레터 구독, 사용자 평가, FAQ, 가격표와 결제 링크, 문의 피드백, 회원 가입과 로그인, 개인정보 처리방침, 서비스 약관, 법적 고지까지 한 번에 구성할 수 있습니다.

이 사이트에서 제품을 소개하고 결제 링크를 바로 연결할 수 있습니다. 제품은 온라인 강의, 앱, 게임 등 무엇이든 될 수 있습니다.

Untitled

💡 이 문서는 Starter 테마 사용 방법을 소개합니다.

Starter 테마로 전환하는 방법

먼저 NotionNext를 최신 버전으로 업그레이드하세요. > V4.3 버전이 필요합니다.

그다음 테마 기능 설명 - 기본 테마 수정 방법을 참고해 기본 테마를 변경하면 됩니다.

설정 설명

페이지의 텍스트와 버튼 설정은 대부분 /themes/starter/config.js에서 찾을 수 있습니다. NotionConfig에 대응하는 설정을 추가해 페이지를 단계적으로 조정할 수 있습니다.

사이트가 지원하는 설정 범위는 홈 섹션 기준으로 대략 11개 모듈입니다.

LOGO, HERO, NAV, FEATURE, ABOUT, PRICING, TESTIMONIALS, TEAM, BLOG, CONTACT, FOOTERBRANDS

💡 Starter 테마는 직접 설정해야 할 내용이 많습니다. 코드 수정이나 환경 변수 설정만으로 작업하면 번거로울 수 있으므로 Notion_Config를 활용해 설정을 일괄 관리하는 방식을 권장합니다.

Notion_Config 지원

현재 버전에서는 모든 테마 설정을 Notion_Config에서 설정할 수 있습니다. 예를 들어 작성자 구성원을 수정하려면 Notion_Config에 대응하는 설정을 추가하면 됩니다.

Starter 테마 색상

테마 기본 색상은 파란색입니다. GLOBAL_CSS를 수정해 테마 색상을 조정할 수 있습니다.

색상 조정 예시

보라색으로 조정하려면 GLOBAL_CSS에 다음 세 줄을 추가합니다.

CSS

.bg-primary{background-color:purple !important;}
.text-primary{color:purple !important;}
.sticky .signUpBtn {background-color:purple !important;}

첫 번째 줄은 주 배경색, 두 번째 줄은 강조 텍스트 색상, 세 번째 줄은 오른쪽 위 Sign Up 버튼의 배경색입니다.

purple은 색상 이름입니다. 더 많은 CSS 색상 이름은 CSS 색상 참고 문서를 확인하세요.

색상 조정 예시 2

16진수 색상 값도 입력할 수 있습니다.

CSS

.bg-primary{background-color:#008080 !important;}
.text-primary{color:#008080 !important;}
.sticky .signUpBtn {background-color:#008080 !important;}

Logo

/themes/starter/config.js의 대응 설정입니다. 기본적으로는 이미지를 설정하지 않고 사이트 제목을 logo 텍스트로 사용합니다. 이미지 logo도 지원합니다. 어두운 배경용과 밝은 배경용 logo 두 개를 설정하는 것을 권장합니다.

JavaScript

// By default only logo text is shown. If logo image is set, icon appears on the left.
STARTER_LOGO: '', // Normal logo image, for example: /images/starter/logo/logo.svg
STARTER_LOGO_WHITE: '', // Light logo for transparent/dark background, for example: /images/starter/logo/logo-white.svg

Untitled

Hero

핵심 홍보 영역입니다.

Untitled

NAV 내비게이션 바

상단 중앙 메뉴는 Notion에서 Menu 메뉴를 설정해 구현합니다. 오른쪽 버튼은 여기에서 설정합니다.

JavaScript

// MENU is not configured here. Add MENU items in the Notion database.

STARTER_NAV_BUTTON_1_TEXT: 'Sign In',
STARTER_NAV_BUTTON_1_URL: '/signin',

STARTER_NAV_BUTTON_2_TEXT: 'Sign Up',
STARTER_NAV_BUTTON_2_URL: '/signup',

Untitled

Feature 기능 소개

고정 4개 기능을 지원합니다.

Untitled

JavaScript

// Feature section
STARTER_FEATURE_TITLE: 'Features',
STARTER_FEATURE_TEXT_1: 'Main features of NotionNext',
STARTER_FEATURE_TEXT_2: 'NotionNext helps you build a stable site simply and amplify your brand value.',

STARTER_FEATURE_1_TITLE_1: 'Free and open source',
STARTER_FEATURE_1_TEXT_1: 'The source code is fully shared on GitHub under the MIT license.',
STARTER_FEATURE_1_BUTTON_TEXT: 'Learn more',
STARTER_FEATURE_1_BUTTON_URL: 'https://github.com/tangly1024/NotionNext',

STARTER_FEATURE_2_TITLE_1: 'Multiple theme options',
STARTER_FEATURE_2_TEXT_1: 'Many themes fit different scenarios.',
STARTER_FEATURE_2_BUTTON_TEXT: 'Learn more',
STARTER_FEATURE_2_BUTTON_URL: '/user-guide/themes/overview',

STARTER_FEATURE_3_TITLE_1: 'Great performance',
STARTER_FEATURE_3_TEXT_1: 'Built on Next.js for faster response and better SEO.',
STARTER_FEATURE_3_BUTTON_TEXT: 'Learn more',
STARTER_FEATURE_3_BUTTON_URL: '/user-guide/development/nextjs',

STARTER_FEATURE_4_TITLE_1: 'Easy writing experience',
STARTER_FEATURE_4_TEXT_1: 'Edit in Notion and automatically sync to your website.',
STARTER_FEATURE_4_BUTTON_TEXT: 'Learn more',
STARTER_FEATURE_4_BUTTON_URL: '/user-guide/intro',

About 홈 소개

Untitled

JavaScript

// Home ABOUT section
STARTER_ABOUT_TITLE: 'A lightweight and practical website solution',
STARTER_ABOUT_TEXT: 'NotionNext helps non-technical users build their own websites with lower cost and faster setup. &lt;br /&gt; &lt;br /&gt; Powerful Notion notes and simple Vercel hosting form a lightweight website.',
STARTER_ABOUT_BUTTON_TEXT: 'Learn more',
STARTER_ABOUT_BUTTON_URL: '/user-guide/intro',
STARTER_ABOUT_IMAGE_1: '/images/starter/about/about-image-01.jpg',
STARTER_ABOUT_IMAGE_2: '/images/starter/about/about-image-02.jpg',
STARTER_ABOUT_TIPS_1: '7000+',
STARTER_ABOUT_TIPS_2: 'blog sites',
STARTER_ABOUT_TIPS_3: 'running online',

Pricing 가격

가격 플랜 영역입니다.

Untitled

⚠️

NotionNext는 전자상거래 구매 관련 서비스를 제공하지 않습니다. 이곳의 가격 링크는 Stripe, Lemonsqueezy, Qianxun, 기타 전자상거래 플랫폼 링크 같은 서드파티 결제 플랫폼을 사용할 수 있습니다.

JavaScript

// Home pricing section
STARTER_PRICING_TITLE: 'Pricing',
STARTER_PRICING_TEXT_1: 'Great pricing plans',
STARTER_PRICING_TEXT_2: 'Choose a flexible plan based on your needs. NotionNext is free and open source; this only demonstrates product subscription payment.',

STARTER_PRICING_1_TITLE: 'Starter',
STARTER_PRICING_1_PRICE: '19.9',
STARTER_PRICING_1_PRICE_CURRENCY: '$',
STARTER_PRICING_1_PRICE_PERIOD: 'per month',
STARTER_PRICING_1_HEADER: 'Features',
STARTER_PRICING_1_FEATURES: 'All themes,Free updates,Help docs',
STARTER_PRICING_1_BUTTON_TEXT: 'Buy now',

STARTER_PRICING_2_TAG: 'Recommended',
STARTER_PRICING_2_TITLE: 'Basic',
STARTER_PRICING_2_PRICE: '39.9',
STARTER_PRICING_2_PRICE_PERIOD: 'per month',
STARTER_PRICING_2_FEATURES: 'Includes Starter,Source code,Community,Tech consulting,SEO optimization',

STARTER_PRICING_3_TITLE: 'Pro',
STARTER_PRICING_3_PRICE: '59.9',
STARTER_PRICING_3_PRICE_PERIOD: 'per month',
STARTER_PRICING_3_FEATURES: 'Includes Basic,Custom feature development',

TESTIMONIALS 사용자 평가

무제한 추가를 지원합니다. 이 부분의 일부 설정은 NotionConfig를 지원하지 않으므로 설정 파일에서 직접 수정해야 합니다.

Untitled

JavaScript

STARTER_TESTIMONIALS_TITLE: 'User feedback',
STARTER_TESTIMONIALS_TEXT_1: 'What our users say',
STARTER_TESTIMONIALS_TEXT_2: 'Thousands of site owners have built websites with NotionNext using docs, community support, and consulting.',
STARTER_TESTIMONIALS_STAR_ICON: '/images/starter/testimonials/icon-star.svg',

// This section does not support CONFIG or environment variables. Edit code items directly.
STARTER_TESTIMONIALS_ITEMS: [
  {
    STARTER_TESTIMONIALS_ITEM_TEXT: 'This method works better than other third-party platforms I tried. The customization is much better.',
    STARTER_TESTIMONIALS_ITEM_NICKNAME: 'Ryan_G',
    STARTER_TESTIMONIALS_ITEM_DESCRIPTION: 'Ryan Log owner',
    STARTER_TESTIMONIALS_ITEM_URL: 'https://blog.gaoran.xyz/'
  }
]

FAQ 자주 묻는 질문

4개 항목을 지원합니다.

Untitled

JavaScript

// FAQ section
STARTER_FAQ_TITLE: 'FAQ',
STARTER_FAQ_TEXT_1: 'Have questions? Start here',
STARTER_FAQ_TEXT_2: 'We collected common user questions.',

STARTER_FAQ_1_QUESTION: 'Does NotionNext have help docs?',
STARTER_FAQ_1_ANSWER: 'NotionNext provides &lt;a href="/user-guide/intro" className="underline"&gt;help docs&lt;/a&gt;, demo videos, and community support to help you build and deploy your site.',

STARTER_FAQ_2_QUESTION: 'How do I write posts after deployment?',
STARTER_FAQ_2_ANSWER: 'Add or edit pages of type Post in Notion. Content syncs to the site automatically.',

STARTER_FAQ_3_QUESTION: 'What if deployment or update fails?',
STARTER_FAQ_3_ANSWER: 'It is usually caused by incorrect configuration. Check settings, retry steps, or inspect Vercel deployment logs.',

STARTER_FAQ_4_QUESTION: 'Why are posts not synced in real time?',
STARTER_FAQ_4_ANSWER: 'Check whether Notion_Page_ID is configured correctly. Each page has independent cache, so refresh the page if needed.',

TEAM 팀 구성원

무제한 추가를 지원합니다. 4개를 초과하면 자동으로 줄바꿈되고 가운데 정렬됩니다.

JavaScript

STARTER_TEAM_TITLE: 'Team members',
STARTER_TEAM_TEXT_1: 'Our developer team',
STARTER_TEAM_TEXT_2: 'NotionNext is built by many open-source contributors. Thanks to every contributor.',

// This section does not support CONFIG or environment variables. Edit code items directly.
STARTER_TEAM_ITEMS: [
  {
    STARTER_TEAM_ITEM_AVATAR: '/images/starter/team/team-01.png',
    STARTER_TEAM_ITEM_NICKNAME: 'Tangly',
    STARTER_TEAM_ITEM_DESCRIPTION: 'Developer'
  }
]

BLOG 글

이곳에는 최신 글 3개가 표시됩니다. 표시 개수도 설정할 수 있습니다.

Untitled

JavaScript

// Blog section
STARTER_BLOG_TITLE: 'Our blog',
STARTER_BLOG_COUNT: 3, // Show first three posts by default
STARTER_BLOG_TEXT_1: 'Latest news',
STARTER_BLOG_TEXT_2: 'This section publishes NotionNext updates, future plans, and new feature highlights.',

Contact 문의

문의 양식은 외부 링크인 NoteForms(https://noteforms.com/)를 사용합니다.

Untitled

JavaScript

// Contact section
STARTER_CONTACT_TITLE: 'Contact us',
STARTER_CONTACT_TEXT: 'Tell us about your issue',
STARTER_CONTACT_LOCATION_TITLE: 'Our location',
STARTER_CONTACT_LOCATION_TEXT: 'Fujian, China',
STARTER_CONTACT_EMAIL_TITLE: 'How can we help?',
STARTER_CONTACT_EMAIL_TEXT: 'mail@tangly1024.com',

// External form embed
STARTER_CONTACT_MSG_EXTERNAL_URL: 'https://noteforms.com/forms/yfctc7',

Brands 파트너

이미지와 링크를 넣습니다. 링크가 필요 없다면 비워 둘 수 있습니다.

Untitled

JavaScript

// Partner logos
STARTER_BRANDS: [
  {
    IMAGE: '/images/starter/brands/graygrids.svg',
    IMAGE_WHITE: '/images/starter/brands/graygrids-white.svg',
    URL: 'https://graygrids.com/',
    TITLE: 'graygrids'
  }
]

푸터 메뉴는 여기에서 설정합니다. 설정 파일을 수정해야 하며 NOTION_CONFIG는 지원하지 않습니다.

Untitled

JavaScript

STARTER_FOOTER_SLOGAN: 'We create digital experiences for brands and companies through technology.',

// Three-column footer menu groups
STARTER_FOOTER_LINK_GROUP: [
  {
    TITLE: 'About us',
    LINK_GROUP: [
      { TITLE: 'Home', URL: '/#home' },
      { TITLE: 'Docs', URL: '/user-guide/intro' },
      { TITLE: 'Support', URL: '/user-guide/help/community-rules' },
      { TITLE: 'Cooperation', URL: '/user-guide/help/support' }
    ]
  },
  {
    TITLE: 'Features',
    LINK_GROUP: [
      { TITLE: 'Deploy guide', URL: '/user-guide/deploy-vercel' },
      { TITLE: 'Upgrade guide', URL: '/user-guide/update' },
      { TITLE: 'Latest version', URL: '/user-guide/changelog/latest' }
    ]
  },
  {
    TITLE: 'Notion writing',
    LINK_GROUP: [
      { TITLE: 'Start writing with Notion', URL: '/user-guide/notion-database' },
      { TITLE: 'Shortcuts for efficiency', URL: '/user-guide/notion/short-keys' },
      { TITLE: 'Use Notion in restricted regions', URL: '/user-guide/notion/faster' }
    ]
  }
],

STARTER_FOOTER_BLOG_LATEST_TITLE: 'Latest posts',
STARTER_FOOTER_PRIVACY_POLICY_TEXT: 'Privacy policy',
STARTER_FOOTER_PRIVACY_POLICY_URL: '/privacy-policy',
STARTER_FOOTER_PRIVACY_LEGAL_NOTICE_TEXT: 'Legal notice',
STARTER_FOOTER_PRIVACY_LEGAL_NOTICE_URL: '/legacy-notice',
STARTER_FOOTER_PRIVACY_TERMS_OF_SERVICE_TEXT: 'Terms of service',
STARTER_FOOTER_PRIVACY_TERMS_OF_SERVICE_URL: '/terms-of-use',

기타 설정

404 페이지 개인화:

Untitled

푸터에는 최신 글이 2개에서 5개까지 표시됩니다. 기본값은 최대 2개입니다.

개수를 늘리려면 다음 설정을 추가할 수 있습니다.

JavaScript

const CONFIG = {
  // ...

  // 404 page text
  STARTER_404_TITLE: 'We cannot find the page you are looking for.',
  STARTER_404_TEXT: 'Sorry, the page does not exist. It may have been moved or deleted.',
  STARTER_404_BACK: 'Back to home',

  STARTER_POST_REDIRECT_ENABLE: true, // Enable redirect by default
  STARTER_POST_REDIRECT_URL: 'https://blog.tangly1024.com', // Redirect domain
  STARTER_NEWSLETTER: process.env.NEXT_PUBLIC_THEME_STARTER_NEWSLETTER || false // Enable newsletter after configuring Mailchimp
}
export default CONFIG

Lite 모드

2025-07-11 버전에서 업데이트된 기능입니다.

임베드에 적합한 웹페이지 모드가 추가되었습니다. URL에 ?lite=true를 붙이면 페이지 헤더, 푸터, 내비게이션 버튼, 기타 정보가 숨겨져 임베드하기 편한 화면으로 표시됩니다.

미리보기 효과는 다음과 같습니다. 첫 번째는 기본 페이지이고, 두 번째는 lite 버전입니다.

https://www.tangly1024.com/archive

https://www.tangly1024.com/archive?lite=true

다른 페이지도 모두 지원합니다.

https://www.tangly1024.com/tag/NotionNext

https://www.tangly1024.com/tag/NotionNext?lite=true

원문 링크

https://docs.tangly1024.com/article/notionnext-starter

Starter 테마 ​

테마 미리보기 ​

새 테마 Starter ​

Starter 테마로 전환하는 방법 ​

설정 설명 ​

Notion_Config 지원 ​

Starter 테마 색상 ​

색상 조정 예시 ​

색상 조정 예시 2 ​

Logo ​

Hero ​

NAV 내비게이션 바 ​

Feature 기능 소개 ​

About 홈 소개 ​

Pricing 가격 ​

TESTIMONIALS 사용자 평가 ​

FAQ 자주 묻는 질문 ​

TEAM 팀 구성원 ​

BLOG 글 ​

Contact 문의 ​

Brands 파트너 ​

Footer 푸터 ​

기타 설정 ​

Lite 모드 ​

원문 링크 ​

Starter 테마

테마 미리보기

새 테마 Starter

Starter 테마로 전환하는 방법

설정 설명

Notion_Config 지원

Starter 테마 색상

색상 조정 예시

색상 조정 예시 2

Logo

Hero

NAV 내비게이션 바

Feature 기능 소개

About 홈 소개

Pricing 가격

TESTIMONIALS 사용자 평가

FAQ 자주 묻는 질문

TEAM 팀 구성원

BLOG 글

Contact 문의

Brands 파트너

Footer 푸터

기타 설정

Lite 모드

원문 링크