cutie is a responsive hexo theme heavily inspired by the clean and user friendly design of www.linpx.com.
Note: if you are using this theme and would like to add your website as a reference link in the end of the post, please send me a note through email or github.
Intro
Features
- Responsive design
- Single and dual column layout
- Bottom navigation menu
- Configurable
- Navigation menu (name, link and icon)
- Disqus comment section
- Google analytics
- Slogan
- Signature
- Versioned post and unread notification badge for post
- Extra
- Mathjax
- Instant click
- Search page template
- Lightgallery support
Demo
Visit my personal website for the demo.
Installation
For first time user who wants to have a demo site ready to go
- fork repository https://github.com/qutang/theme-cutie-demo
- clone to your local machine
- go into the
themes
subfolder - download v1.0.1
- unzip and rename folder name
hexo-theme-cutie
tocutie
- run
hexo serve
Normal installation
Download v1.0.1 into themes
folder of your hexo website and rename the folder to cutie
.
Recommended Hexo plugins
Cutie works better with these hexo plugins:
Changelog
2018-02-09
Version 1.0.1
- Fix disqus system (before it was using my own shortname, now you may config the shortname for your website)
- Add support for valine and gitment comment system.
2017-12-20
- Add theme version to footer
2017-12-18
- Support multiple categories and fix bugs when displaying category icons. #28
2017-12-17
- Add configuration setting for instantclick. To avoid compatibility issue with many third party js codes, by default it is turned off. To enable it, add this in
_config.yml
.
1 | cutie: |
2017-12-08
- Adjust heading, inline code, list typography
2017-12-05
- Remove bottom border for header (I know it’s ugly!). Redesign header.
- Add support for logo image (can be omitted). See
_config.yml
file field.
1 | cutie: |
- Add more padding to footer nav menu.
- Add zooming effect to logo image, post icon (index page), pagination button and nav menu (close issue #1)
2017-11-28
- Fix bug of badge notification for external link post.
- Fix bug causing conflict with hexo-prism-plugin when displaying line numbers on some themes.
2017-11-10
- Add front matter key word
meta_info: [string]
(e.g.meta_info: "<a>external link</a>"
) to page template, the page will show provided meta info at the upper right corner of the header.
2017-11-05
- Add front matter key word
version: [integer number]
(e.g.version: 2
), when updating this number, the index page will show unread red dot at the upper left corner of post card and dismiss when user clicks on the post link.
2017-11-04
- Change lightbox to light gallery to remove jquery dependency
Usage
Page meta info
Use meta_info: [string]
in page front matter to display meta info at the upper right corner of the page.
This feature is useful when you want to show an external link, last updated time, change log, navigation list and so on. The string supports html tags.
Examples:
meta_info: "Last updated: 2015-01-12"
meta_info: "<a href="">中文</a>"
meta_info: "<ul><li><a href="#heading1">Heading 1</a></li><li><a href="#heading1">Heading 2</a></li></ul>"
Versioned post and unread notification badge
You may add a new front matter keyword version
to post.
- If
version: -1
or absent, the unread dot is disabled until the version is updated to a larger number. This is useful if you don’t want to make your old posts all become unread. - If
version
is greater than previous push’sversion
number or ifversion
number is new presented, the unread dot will show up on the card corner of index page until the post is visited. - If
version
is smaller than previous push’sversion
number, the unread dot will not show up.
This feature is implemented with browser cookie.
Configure comment system
1 | cutie: |
- For valine parameters, refer to valine.
- For disqus shortname, refer to disqus shortname.
- For gitment parameters, refer to gitment.
A sample snippet about the theme in _config.yml
of the website
1 | # Be careful about the indent |
A set of default icons, referring using path(/images/icon_name.svg
)
Add search page
- Create a new page called
search
- Use layout
search
in the front matter ofsearch
page
1 |
|
It is recommended to use the hexo prism js plugin for code highlight.
Custom post icon
Use icon: path/to/your/icon
in post front matter to use custom icon when displaying in home page instead of default category icon.
Post gallery photos
You may add photos to a gallery display at the top of the post by adding the filenames of the images to the YAML front matter of a post.
1 |
|
Make sure to put these images in the source/images/[post-file-name]/
folder.
Contribution
Post feature request or bugs here, or send me pull request.
Acknowledge
Websites that use the theme
Let me know if you want your website appears here.
Comment