Skip to content

Latest commit

 

History

History
359 lines (229 loc) · 10.4 KB

README.md

File metadata and controls

359 lines (229 loc) · 10.4 KB
Raw

Carpediem

Carpediem은 완전히 커스텀 할 수 있는 컴포넌트 기반의 Hexo 테마입니다.

영어

목업

라이브 데모

요구사항

  • Node v16.16.0+
  • Hexo v6.3.0+

지원 브라우저

  • 최신 브라우저
  • IE 미지원

특징

컴포넌트 기반

아토믹 디자인 시스템에서 영감을 받아, pug mixins를 이용하여 컴포넌트 기반으로 제작되었습니다.

이 테마에 사용 된 모든 컴포넌트는 ./components/에 있습니다. 각 컴포넌트는 pug, scss 및 UI 기능을 위해 선택적으로 js로 구성됩니다.

BEM CSS 방법론에 따라, 각 컴포넌트는 캐스캐이딩 문제를 완전히 방지하고 자체 스타일을 유지할 수 있습니다.

접근성

가능한 WCAG 2.1 AA 레벨의 많은 항목을 준수하도록 노력하였습니다. Axe 도구를 이용하여 WCAG에 대한 적합성이 검사되었습니다.

자동 라이트/다크 모드 전환

시스템 설정에 따른 자동 라이드/다크 모드를 지원합니다. 물론 특정 모드로 고정도 가능합니다.

SEO 친화적
  • JSON-LD를 지원합니다.
  • link relation types을 지원합니다.
  • 서치 콘솔 등록을 위한 site verification meta 요소를 지원합니다.
포트스별 스타일

포스트별 스타일을 지원합니다. SCSS로 스타일을 작성할 수 있고 사전 정의된 SCSS function 및 mixin을 사용할 수 있습니다.

댓글

다양한 댓글 플랫폼을 지원합니다.

  • commento
  • disqus
  • giscus
  • livere
  • remark
  • utterance

특정 포스트에서만 댓글을 사용하지 않기 원한다면, front-matter에서 댓글을 비활성화 할 수 있습니다.

외부 링크

내비게이션에 외부 링크를 지원합니다.

검색

alogila 검색을 지원합니다.

hexo-algoliasearch 설치가 필요합니다. search layout을 사용하는 빈 페이지를 생성하는 것만으로 검색 페이지를 활성화 할 수 있습니다.

다국어

languages 구성을 기반으로 i18n을 지원합니다. 현재 지원되는 언어는 다음과 같습니다.

  • 영어
  • 한국어
쉬운 커스터마이징

컴포넌트의 파일을 수정하기만 하면, 이 컴포넌트를 사용하는 모든 곳에 자동으로 반영됩니다.

컬러, 글자, 테두리 같은 많은 스타일 속성들이 source/css/modules/_root.scss의 CSS 변수 및 source/css/modules/_variables.scss의 SCSS 변수로 관리됩니다.

쉬운 디버깅을 위해 개발 모드에서 js 및 css에 대한 소스맵이 제공됩니다.

문법 강조

Prism.js 만 지원됩니다.

footnotes

각주를 지원합니다. hexo-renderer-markdown-it의 설치와 markdown-it-footnote 플러그인 활성화가 필요합니다.

설치

먼저, 이 저장소를 클론합니다.

$ cd your/hexo/directory
$ git clone -b main --single-branch --depth=1 https://github.com/mulder21c/hexo-theme-carpediem.git themes/carpediem

이후, 의존성 패키지를 설치합니다.

$ cd themes/carpediem
$ npm install

Front matter

기본 설정은 hexo 문서에서 찾을 수 있습니다.

다음은 기본 설정외 추가 항목들로 모두 선택사항입니다.

# 포스트 부제목
subtitle: This is example.

# og:description 및 meta description에 사용되는 포스트 설명
description: You can use this item to customize the og:description

# hero로 사용되는 이미지 경로 또는 URL
hero: https://my.imag.es/hero.webp

# 포스트 목록에 표시할 이미지 경로 또는 URL
# 지정되지 않으면 hero가 대신 표시됩니다.
thumbnail: https://my.imag.es/hero.thumb.webp

# 포트스 별 스타일
# SCSS나 CSS로 작성할 수 있고, 제공 된 (s)css 변수, 믹스인, 함수를 사용할 수 있습니다.
style:

커스터마이징

헬퍼

헬퍼 문서 참고

태그

태그 문서 참고

컴포넌트

컴포넌트 문서 참고

스타일 (SCSS)

믹스인 및 함수에 대한 자세한 내용은 SCSS 문서 참고

다음은 SCSS 파일에 대한 간략한 설명입니다.

경로 파일명 설명
index.css 진입점
helpers _functions.scss SCSS 함수
helpers _mixins.scss SCSS 믹스인
modules _animations.scss 애니메이션 키프레임 선언
modules _base.scss 기본 스타일시트
modules _root.scss :root로 적용된 CSS 변수
modules _typography.scss 글꼴 선언
modules _variables.scss SCSS 변수 선언

스크린샷

모바일 ＜ 768px

메인 페이지
메뉴 - 닫힘 상태
메뉴 - 모두 열림 상태
아카이브 페이지
검색 페이지

태블릿 ＜ 1024px

메인 페이지
메뉴 - 닫힘 상태
메뉴 - 모두 열림 상태
아카이브 페이지
검색 페이지

PC ＜ 1280px

메인 페이지
메뉴 - 닫힘 상태
메뉴 - 모두 열림 상태
아카이브 페이지
검색 페이지

대화면 ≥ 1280px

메인 페이지
메뉴 - 닫힘 상태
메뉴 - 모두 열림 상태
아카이브 페이지
검색 페이지
스크롤바 (모든 스크린사이즈에 동일)

피드백

issue에서 버그 및 기능 요청을 제출할 수 있습니다.