Carpediem

Carpediem is fully customizable and component-based Hexo theme.

한국어

live demo

Requirements

Node v16.16.0+
Hexo v6.3.0+

Support Browsers

modern browsers
not support IE

Features

Component-based

Inspired by atomic design system, so made component-based using pug mixins.

You can find all the components used in this theme in ./components/. Each component consists of pug, scss and optionally js for UI function implementation.

By following the BEM CSS methodology, each component can completely avoid cascading problems and maintain its own style.

More accessible

Tried to meet as many items as possible in WCAG 2.1 Level AA. Checked for compliance for WCAG using the Axe tool.

Auto toggle light/dark mode

Support automatic light/dark mode based on system settings. It is also possible to fix it in a certain mode.

SEO friendly

Support JSON-LD
Support link relation types
Support site verification meta element

Post-specific style

Support post-specific style. You can write style in SCSS and use predefined SCSS functions and mixins.

Comments

Support various comments platforms.

commento
disqus
giscus
livere
remark
utterance

If you want to do not use comments only in certain posts, you can disable comments in front-matter.

External links

Support external links in navigation

Search

Support algolia search

Need to install hexo-algoliasearch. You can activate the search page just creating an empty page that uses the search layout.

Internationalization

Support i18n based on languages configuration. Currently supported languages are

English
Korean

Easy customizable

If you only modify the component's files, it is automatically reflected everywhere that uses this component.

Many style properties, such as color, font, and borders, are managed as CSS variables in source/css/modules/_root.scss and SCSS variables in source/css/modules/_variables.scss

Sourcemaps are provided for js and css in development mode for easy debugging.

Syntax highlight

Support only Prism.js

footnotes

Support footnotes, need to install hexo-renderer-markdown-it and active markdown-it-footnote plugin

Installation

First, clone this repository

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

Then, install dependencies

$ cd themes/carpediem
$ npm install

Front matter

The default settings can be found in the hexo document.

The following are extra entries beyond the basic ones that are all optional.

# post's subtitle
subtitle: This is example.

# post' description used in og:description and meta description
description: You can use this item to customize the og:description

# The path or URL of the image to be used as the hero
hero: https://my.imag.es/hero.webp

# The path or ULR of the image to be displayed in post list.
# If not specified, hero is displayed instead.
thumbnail: https://my.imag.es/hero.thumb.webp

# post-specific style
# You can code in SCSS or CSS and use provided (S)CSS variables, mixins and
# functions.
style:

Customization

Helpers

See Helpers Document

Components

See Components Document

Styles (SCSS)

For Details of mixins and functions, see Components Document

Below is a brief description of the SCSS file.

path	file name	description
	`index.css`	entrypoint
`helpers`	`_functions.scss`	SCSS functions
`helpers`	`_mixins.scss`	SCSS mixins
`modules`	`_animations.scss`	Declarations for CSS animation keyframe
`modules`	`_base.scss`	Default Stylesheet
`modules`	`_root.scss`	CSS variables at `:root`
`modules`	`_typography.scss`	Declarations for Fonts
`modules`	`_variables.scss`	Declarations for SCSS variables