English | 简体中文
Frame is a minimal hexo theme. Inspired by traditional paintings and their frames, Frame is designed to showcase personal blogs, profiles, or portfolios in a concise and elegant way.
If this is your first time using hexo, please go to the official hexo website to install and initialize your hexo project. Then, clone the theme in your hexo project:
# go to your hexo theme folder
Go to the hexo configuration file
config.yml, and change the following theme settings:
Now that Frame is all set up 👌. You can test the theme through:
Frame provides 3 color modes: default, classic and dark.
To change the color mode, go to the
config.yml file under the
frame theme folder, and modify the following settings:
# color mode: default / classic / dark
Frame provides a gallery view, where blog posts are presented with their featured images and tags. Simply add a category “gallery” to your post, then it would be listed in the gallery view.
The featured image of the post can also be added to the Front-matter of the post:
The profile page, or the home page, is the very first page of your site. By default, there is a title, some body text, several links and a profile image on this page. You can customize the content of your profile at the
config.yml file of the theme:
In case you prefer to customize your profile page, go to
frame/layout/pages/profile.ejs and modify the layout and style of your own page, have fun 🙌
Frame provides a tag cloud on the
/tag/ page, which contains all possible tags in your blog. In order to set up the tag cloud, you need to create a hexo page named
hexo new page tag
source/tag/index.html file, type the following:
The header is simply consist of a site logo and a navigation menu, you can change those content at the
config.yml file under the theme folder. You can upload an image as the site logo, otherwise it would be your site name.
You can also customize the content of your footer at the
Add your own favicon of the website at the
frame/source/ folder, then configure it at the
In case you would like to use math equations in your blog, go to the
config.yml file and turn on the MathJax tool:
# mathjax setting
Note: if you haven’t install the hexo math plugin, you need to install it first:
npm i hexo-math --save
This project is released under MIT License.
All the images used in the demo site are the works from Claude Monet (1840 - 1926), which is considered to be in the public domain in its country of origin and other countries and areas.