Clover is a card-style theme for the Hexo static site generator that adds a filterable home page, tag and category archive pages, and GitHub-style code highlighting to a Hexo blog.
What is Clover?
Clover is a Hexo theme that transforms a default Hexo blog into a card-based layout with configurable home page filtering. It takes a Hexo project with the standard directory structure (containing _config.yml, source, themes, etc.) and replaces the default theme with custom card layouts for posts and projects. The theme is maintained on GitHub by the user esappear and is installed by cloning the repository into the themes directory.
What makes Clover stand out?
- Home page filtering — Configure the home page to display only posts from selected categories or tags, with optional exclusion lists, through the home block in the theme config.
- Front-matter excerpt and photos — Add excerpt and photos fields to a post's front-matter to show a summary and image gallery without needing separate plugins.
- Dedicated tags page — Create a tags archive page by running the command
hexo new page "tags"and setting the page layout totagin its front-matter. - Dedicated categories page — Build a categories archive page with the
categorylayout, following the same workflow as the tags page. - Custom menu — Define a navigation menu in the config with custom labels and URLs, including links to projects, archives, tags, and about pages.
- Social media links — Add links to GitHub, Dribbble, Behance, Lofter, and Instagram through the social config block.
- Two card styles — Switch between
project-cardandarticle-cardstyles independently for home, archive, tag, and category pages using the card_style config. - GitHub-style code highlighting — Disable Hexo's default highlight setting and the theme enables highlight.js with a GitHub style; custom language tags require declaring the language in each code block.
Who is Clover for?
Clover is for Hexo bloggers who want a visual card-based layout for their posts and projects. It is especially suited for developers who maintain a personal blog or portfolio and want to curate the home page to show only specific categories, such as JavaScript or CSS projects. The theme's tag and category pages serve bloggers who need organized archives, and the custom menu and social links help personal brands present their online presence consistently.
What can you do with Clover?
- Personal bloggers: use the home page filter to show only posts from selected categories, keeping featured content at the top of the blog.
- Portfolio builders: create project cards for a projects category and use the project-card style to present work samples with photos and excerpts.
- Technical writers: publish code-heavy posts with GitHub-style highlighting and tag pages for easy topic navigation.
How do I install Clover?
Installation requires cloning the repository into the themes/clover directory, setting theme: clover in the root _config.yml, and running npm install hexo-renderer-sass --save. After that, the theme's default layout is active.
FAQ
How do I set the home page to show only certain posts?
In the theme's config, use the home block to specify category, tag, except_category, and except_tag. Posts that match the included categories or tags and do not match the excluded ones will appear on the home page.
Can I use Clover without installing hexo-renderer-sass?
No, Clover requires the hexo-renderer-sass package to compile its SCSS styles. Without it, the theme will not render correctly.
Does Clover support code syntax highlighting?
Yes, but you must disable Hexo's default highlighter by setting highlight.enable: false and then declare the language in each code block so highlight.js can apply the correct style.
Is Clover open source?
Clover is hosted as a public GitHub repository, so you can clone it directly and use it in your own Hexo project, modifying it to fit your needs.
