Magzine 테마
이전 문서: Magzine 테마 게시일: 2024-9-14 마지막 수정: 2024-9-14 원래 분류: ⭐ 테마 매개변수
테마 미리보기
💡
새 테마이므로 V4.7.1 이후 버전으로 업그레이드해야 사용할 수 있습니다.
홈 설명
이 테마는 더 단순하고 평면적이며 전문적인 스타일에 가깝습니다. 홈에서는 글을 카테고리별 섹션으로 배치해 표시 흐름이 더 명확합니다.
첫 화면에서 핵심 강조
Notion의 첫 번째 글은 pinned 글처럼 처리되어 왼쪽 위의 가장 눈에 띄는 위치에 크게 표시됩니다.
오른쪽 위는 홍보 영역입니다. 문구와 이동 버튼을 설정할 수 있으며,
config.js에서 대응하는 설정 이름을 찾고NOTION_CONFIG로 Notion에서 설정할 수 있습니다.오른쪽 아래에는 Notion에서 두 번째와 세 번째 순서의 글이 표시됩니다.
다음은 최신 글 섹션
Notion에서 앞쪽에 있는 글 중 첫 화면에 표시된 글을 제외한 나머지가 이곳에 순서대로 배치됩니다. 최대 4개까지 표시되며, 전체 보기를 클릭하면 아카이브 페이지로 이동해 발행 시간 기준으로 모든 글을 볼 수 있습니다.
다음은 카테고리 섹션
모든 글을 카테고리별로 그룹화해 순서대로 표시합니다. 한 줄이 하나의 카테고리 글 그룹입니다. 전체 보기를 클릭하면 해당 카테고리의 모든 글을 볼 수 있습니다.
다음은 추천 글
기본 제목은 추천 글입니다. 기본적으로 recommended 태그가 포함된 글을 가져오도록 설정할 수 있습니다. 제목과 태그는 config.js에서 직접 설정할 수 있습니다.
예를 들어 제목을 Hot Posts로 바꾸고, Notion에서 hot 태그가 포함된 글을 읽도록 설정할 수 있습니다.
다음은 공지
공지는 Notion에서 Notice로 작성합니다. 공지 배경색은 기본적으로 초록색이며, 현재 설정으로는 바꿀 수 없습니다. CSS 스타일 방식으로 직접 미세 조정할 수 있습니다.
다음은 푸터
검은 배경의 푸터입니다. 왼쪽에는 작성자 정보와 사이트 제목이 표시되고, 오른쪽에는 사용자 정의 내비게이션 메뉴가 표시됩니다. 예를 들어 링크 모음 등을 이곳에 둘 수 있습니다. 메뉴는 그룹화되어 있으며, 위에는 그룹 이름, 아래에는 메뉴 이름이 표시됩니다. 클릭하면 이동합니다. 이 링크들은 config.js에서 설정해야 하며, 아래에서 설정 방법을 설명합니다.
글 상세 페이지 설명
글 상세 페이지의 첫 화면에는 위에서 아래 순서로 카테고리 태그, 제목, 요약, 커버 이미지가 표시됩니다.
글 페이지를 아래로 스크롤하면 두 번째 화면 가운데에 글 내용이 표시됩니다. 왼쪽에는 목차가, 오른쪽 위에는 발행 시간이, 오른쪽 가운데에는 최근 업데이트 글이 표시됩니다. 이 글들은 생성 시간이 아니라 수정 시간 기준으로 정렬됩니다.
더 아래로 스크롤하면 카테고리 내비게이션과 커뮤니티 카드가 표시됩니다. 커뮤니티 카드의 텍스트와 링크는 config.js에서 설정할 수 있습니다.
더 아래에는 홍보 영역이 표시됩니다. 왼쪽에는 사이트 커버 이미지가, 오른쪽에는 홈 오른쪽 위 광고 영역과 같은 내용이 표시됩니다.
설정 부분
/themes/magzine/config.js에서 이 테마가 지원하는 모든 설정을 찾을 수 있습니다. 주요 내용과 설명은 다음과 같습니다.
테마 지원 설정 관련 코드 펼치기
const CONFIG = {
// First screen banner button text
MAGZINE_HOME_BANNER_ENABLE: true, // Enable the top-right promo block
MAGZINE_HOME_BUTTON: true,
MAGZINE_HOME_BUTTON_URL: '/about',
MAGZINE_HOME_BUTTON_TEXT: 'Learn more',
MAGZINE_HOME_TITLE: 'Start your online business today. Completely free.',
MAGZINE_HOME_DESCRIPTION:
'Use NotionNext to get the tools and help you need to start, run, and grow your business.',
MAGZINE_HOME_TIPS: 'The AI era is here. This is the moment for independent creators.',
// Home category sections. Set categories to hide here.
MAGZINE_HOME_HIDDEN_CATEGORY: 'essay', // Categories hidden from home, separated by commas
// Recommended posts tag on home. Up to six posts. Empty string means latest updated posts.
MAGZINE_RECOMMEND_POST_TAG: 'recommended',
MAGZINE_RECOMMEND_POST_COUNT: 6,
MAGZINE_RECOMMEND_POST_TITLE: 'Recommended posts',
MAGZINE_RECOMMEND_POST_SORT_BY_UPDATE_TIME: false, // Sort by last edited time when true
// Style
MAGZINE_RIGHT_PANEL_DARK: process.env.NEXT_PUBLIC_MAGZINE_RIGHT_DARK || false, // Dark right panel
MAGZINE_POST_LIST_COVER: true, // Show cover image in post list
MAGZINE_POST_LIST_PREVIEW: true, // Show post preview in list
MAGZINE_POST_LIST_CATEGORY: true, // Show post category in list
MAGZINE_POST_LIST_TAG: true, // Show post tags in list
MAGZINE_POST_DETAIL_CATEGORY: true, // Show category on post page
MAGZINE_POST_DETAIL_TAG: true, // Show tags on post page
// Post page social card
MAGZINE_SOCIAL_CARD: true, // Show join community button on the right
MAGZINE_SOCIAL_CARD_TITLE_1: 'Discussion channel',
MAGZINE_SOCIAL_CARD_TITLE_2: 'Join the community to discuss and share',
MAGZINE_SOCIAL_CARD_TITLE_3: 'Join community',
MAGZINE_SOCIAL_CARD_URL: '/user-guide/help/community',
// Footer links. Structure: [group, group, group].
MAGZINE_FOOTER_LINKS: [
{
name: 'Friends',
menus: [
{ title: 'Tangly Blog', href: 'https://blog.tangly1024.com' },
{ title: 'Chenge', href: 'https://chenge.ink' },
{ title: 'LUCEN', href: 'https://www.lucenczz.top/' }
]
},
{
name: 'Developer',
menus: [
{ title: 'GitHub', href: 'https://github.com/tangly1024/NotionNext' },
{ title: 'About author', href: '/about' }
]
},
{
name: 'Support',
menus: [
{
title: 'Site owner community',
href: '/user-guide/help/community'
}
]
},
{
name: 'Solutions',
menus: [
{ title: 'Site builder', href: 'https://www.tangly1024.com/' },
{ title: 'NotionNext', href: '/user-guide/intro' }
]
}
]
}
export default CONFIG푸터 메뉴 상세
푸터 메뉴 구조는 [group, group, group, ...]이며 그룹 수에는 제한이 없습니다.
그룹 객체는 { name:'Group title', menus:[link, link, ...] } 형식입니다. name은 그룹 이름이고 menus는 해당 그룹 아래의 링크 목록입니다.
링크 객체는 { title:'Link title', href:'/user-guide/intro' } 형식입니다. 링크 제목과 이동 위치를 설정할 수 있습니다.
// Footer links. Structure: [group, group, group].
MAGZINE_FOOTER_LINKS: [
{
name: 'Friends',
menus: [
{ title: 'Tangly Blog', href: 'https://blog.tangly1024.com' },
{ title: 'Chenge', href: 'https://chenge.ink' },
{ title: 'LUCEN', href: 'https://www.lucenczz.top/' }
]
},
{
name: 'Developer',
menus: [
{ title: 'GitHub', href: 'https://github.com/tangly1024/NotionNext' },
{ title: 'About author', href: '/about' }
]
},
{
name: 'Support',
menus: [
{
title: 'Site owner community',
href: '/user-guide/help/community'
}
]
},
{
name: 'Solutions',
menus: [
{ title: 'Site builder', href: 'https://www.tangly1024.com/' },
{ title: 'NotionNext', href: '/user-guide/intro' }
]
}
]Notion_Config에서 설정
이 메뉴는 Notion_Config에서 설정할 수 있습니다. 사실 대부분의 설정은 Notion_Config에서 설정할 수 있습니다. 다만 이 매개변수는 배열 객체이므로 JSON 형식으로 설정해야 합니다.
설정 예시는 다음과 같습니다. Notion_Config에 MAGZINE_FOOTER_LINKS를 추가하면 됩니다.
바로 복사해 사용할 수 있는 템플릿 설정 펼치기
아래 내용을 복사해 NOTION_CONFIG의 MAGZINE_FOOTER_LINKS 뒤에 붙여 넣으면 됩니다.
[
{
"name": "Friends",
"menus": [
{
"title": "Tangly Blog",
"href": "https://blog.tangly1024.com"
},
{
"title": "NotionNext",
"href": "https://tangly1024.com/"
}
]
},
{
"name": "Developer",
"menus": [
{
"title": "GitHub",
"href": "https://github.com/tangly1024/NotionNext"
},
{
"title": "Development help",
"href": "/user-guide/development/getting-started"
},
{
"title": "Feature feedback",
"href": "https://github.com/tangly1024/NotionNext/issues/new/choose"
},
{
"title": "Technical discussion",
"href": "https://github.com/tangly1024/NotionNext/discussions"
},
{
"title": "About author",
"href": "https://blog.tangly1024.com/about"
}
]
},
{
"name": "Support",
"menus": [
{
"title": "Site owner community",
"href": "/user-guide/help/community"
},
{
"title": "Consulting and customization",
"href": "/user-guide/help/support"
},
{
"title": "Upgrade manual",
"href": "/user-guide/help/support"
},
{
"title": "Installation guide",
"href": "/user-guide/update"
},
{
"title": "SEO promotion",
"href": "https://seo.tangly1024.com/"
}
]
},
{
"name": "Solutions",
"menus": [
{
"title": "Site builder",
"href": "https://www.tangly1024.com/"
},
{
"title": "NotionNext",
"href": "/user-guide/intro"
}
]
}
]효과는 다음과 같습니다.
마지막
코드의 config.js 안에 있는 복잡한 객체 설정을 JSON으로 바꾸는 방법을 덧붙입니다. AI를 활용하거나 코드에 직접 큰따옴표를 추가해 수동으로 변환할 수 있습니다.
이 방식을 사용하면 NotionNext의 거의 모든 설정을 NOTION_CONFIG로 설정할 수 있습니다.