HEO 테마
이전 문서: HEO 테마 게시일: 2023-7-18 마지막 편집: 2024-9-12 원래 분류: ⭐ 테마 매개변수
테마 미리보기
💡 디자인 참고: https://blog.zhheo.com/
테마 설명
이 테마는 Acrylic-Promote 테마의 디자인을 참고해 개발되었습니다. 전체적인 유사도는 높지만 세부 요소까지 100% 복제한 것은 아니며, 부족한 부분은 이후 계속 개선될 예정입니다.
테마 사용
코드 버전을 4.0 이상으로 업데이트하세요.
기본 테마를 HEO로 설정합니다. 관련 설정은 모두 /themes/heo/config.js에서 확인할 수 있습니다. 아래에서는 이 테마의 주요 기능 영역을 설명합니다.
이미지에는 위에서 아래로 6개 영역이 표시되어 있으며, 각 영역의 기능과 설정은 다음과 같습니다.
1. 상단 배너
현재 알림 내용을 스크롤로 표시하고, 클릭하면 지정한 링크로 이동할 수 있습니다. 설정 위치는 themes/heo/config.js입니다.
// Home page top notification bar. Leave it empty [] if not needed.
NOTICE_BAR: [
{ title: '블로그에 오신 것을 환영합니다', url: 'https://blog.example.com' },
{ title: '문서 센터에서 도움말 더 보기', url: '/user-guide/intro' }
],2. 히어로 영역
히어로 영역 왼쪽
- 왼쪽 위 카드를 클릭하면 임의의 글로 이동합니다. 이 기능은 설정으로 바꿀 수 없지만, 소스 코드 themes/heo/components/Hero.js에서 확인할 수 있습니다.
// Navigate to a random article
function handleClickBanner() {
const randomIndex = Math.floor(Math.random() * latestPosts.length)
const randomPost = latestPosts[randomIndex]
router.push(randomPost.slug) // Navigate to this link
}- 왼쪽 위 카드의 큰 제목은 themes/heo/config.js에서 설정합니다.
// Hero area, large card at the top of the home page
HERO_TITLE_1: '개발 이야기',
HERO_TITLE_2: '생각과 기록',
HERO_TITLE_3: 'EXAMPLE.COM',- 왼쪽 위 카드 배경의 스크롤 이미지는 여러 기술 아이콘을 반복해서 보여줍니다. themes/heo/config.js에서 설정할 수 있습니다.
관련 코드 펼치기
// User skill icons; grouped in pairs
GROUP_ICONS: [
{
title_1: 'AfterEffect',
img_1: '/images/heo/20239df3f66615b532ce571eac6d14ff21cf072602.webp',
color_1: '#989bf8',
title_2: 'Sketch',
img_2: '/images/heo/2023e0ded7b724a39f12d59c3dc8fbdc7cbe074202.webp',
color_2: '#ffffff'
},
{
title_1: 'Docker',
img_1: '/images/heo/20231108a540b2862d26f8850172e4ea58ed075102.webp',
color_1: '#57b6e6',
title_2: 'Photoshop',
img_2: '/images/heo/2023e4058a91608ea41751c4f102b131f267075902.webp',
color_2: '#4082c3'
},
{
title_1: 'FinalCutPro',
img_1: '/images/heo/20233e777652412247dd57fd9b48cf997c01070702.webp',
color_1: '#ffffff',
title_2: 'Python',
img_2: '/images/heo/20235c0731cd4c0c95fc136a8db961fdf963071502.webp',
color_2: '#ffffff'
}
],
- 왼쪽 아래의 세 내비게이션 태그는 특정 페이지로 이동합니다. themes/heo/configs.js에서 설정합니다.
// Show three pinned categories in the hero area
HERO_CATEGORY_1: { title: '추천 콘텐츠', url: '/tag/추천' },
HERO_CATEGORY_2: { title: '인기 글', url: '/tag/인기' },
HERO_CATEGORY_3: { title: '실용 가이드', url: '/tag/가이드' },현재 이 세 카드는 기본적으로 세 개의 태그 아카이브 페이지로 이동합니다.
태그 아카이브란 특정 태그가 포함된 모든 글을 보여주는 페이지입니다. 예를 들어 /tag/추천 링크는 추천 태그를 가진 모든 글을 표시합니다.
한 글에는 여러 태그를 붙일 수 있으며, /tag/[태그] 형식으로 같은 태그를 가진 글 묶음을 빠르게 탐색할 수 있습니다. 예를 들어 어떤 글을 /tag/추천 아래에 표시하고 싶다면 그 글에 추천 태그를 추가하면 됩니다.
히어로 영역 오른쪽
오른쪽 영역은 고정 글의 제목 텍스트와 이동 링크를 표시합니다. themes/heo/config.js에서 설정합니다.
HERO_TITLE_4: '새 버전 공개',
HERO_TITLE_5: 'NotionNext 4.0 테마를 쉽게 커스터마이징하기',
HERO_TITLE_LINK: 'https://example.com',추천 고정 글
더 많은 추천을 클릭하면 추천으로 지정된 글 6개를 볼 수 있습니다. 추천 태그가 붙은 글만 이 영역에 고정됩니다.
관련 설정은 themes/heo/config.js를 참고하세요.
// Recommended article tag on the right side of the hero area.
// Example: [추천]. Up to six articles are shown.
// If left empty '', recently updated articles are recommended directly.
HERO_RECOMMEND_POST_TAG: '추천',
3. 글 목록 영역
- 글 분류 배너
이 영역에는 Notion의 모든 글 분류가 표시됩니다. 각 글에는 여러 태그를 붙일 수 있지만, 분류는 하나만 지정할 수 있습니다.
분류 칸에 분류 이름을 직접 입력하고 Enter 키를 누르면 새 분류를 만들 수 있습니다.
- 개인 프로필 카드의 환영 문구
이 위치의 텍스트는 클릭할 때마다 바뀝니다. themes/heo/config.js에서 설정합니다.
INFOCARD_GREETINGS: [
'안녕하세요! 저는',
'기록과 공유를 좋아합니다',
'인터랙션과 디자인을 다룹니다',
'꾸준히 실행하는 사람입니다',
'스마트홈을 즐겨 만듭니다',
'디지털 기술을 좋아합니다',
'팀을 움직이는 엔진입니다'
],아래의 작성자 이름은 blog.config.js에서 설정합니다.
- 공지 영역
카드 가운데의 텍스트는 공지 내용입니다.
공지 내용은 Notion 템플릿에서 타입이 Notice인 글의 내용입니다.
모바일 히어로 영역
모바일에서는 히어로 영역이 간소화되어 기본적으로 아래처럼 표시됩니다.
왼쪽에는 두 개의 태그가 표시됩니다. 기본값은 추천 콘텐츠와 인기 글이며, 세 번째 태그는 숨겨집니다.
오른쪽에는 기본적으로 추천 태그가 붙은 글 6개가 표시됩니다.
