Carpediem is fully customizable and component-based Hexo theme.
- Node v16.16.0+
- Hexo v6.3.0+
- modern browsers
- not support IE
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
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/carpediemThen, install dependencies
$ cd themes/carpediem
$ npm installThe 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:See Helpers Document
See Tags Document
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 |
Main page
Menu - closed
Menu - opened all
Archive Page
Search Page
Main page
Menu - closed
Menu - opened all
Archive Page
Search Page
Main page
Menu - closed
Menu - opened all
Archive Page
Search Page
Main page
Menu - closed
Menu - opened all
Archive Page
Search Page
scroll bar (all screen size)
You can submit a bug or feature suggestion at issue.