Hexo Theme Cutie v1.x Tutorial

  1. 1. Intro
  2. 2. Installation
  3. 3. Changelog
  4. 4. Usage
  5. 5. Contribution
  6. 6. Acknowledge
  7. 7. Websites that use the theme

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

  1. fork repository https://github.com/qutang/theme-cutie-demo
  2. clone to your local machine
  3. go into the themes subfolder
  4. download v1.0.1
  5. unzip and rename folder name hexo-theme-cutie to cutie
  6. run hexo serve

Normal installation

Download v1.0.1 into themes folder of your hexo website and rename the folder to cutie.

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
2
cutie:
  instantclick: true

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
2
cutie:
  logo: /your/path/to/logo/image
  • 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

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

Badge illustration

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’s version number or if version 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’s version number, the unread dot will not show up.

This feature is implemented with browser cookie.

Configure comment system

comment system configuration
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
cutie:
  global:
    comment_system: valine # disqus, valine, gitment
  
  valine:
    appId: 
    appKey: 
    placeholder: 
  
  disqus:
    shortname: 
  
  gitment:
    owner: 
    repo: 
    client_id: 
    client_secret:

A sample snippet about the theme in _config.yml of the website

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
# Be careful about the indent
theme: cutie

google-analytics: UA-xxxxxxxx-1

author_link: http://link/to/your/personal/website

cutie:
  logo: /your/path/to/logo/image
  slogan: This is a slogan.
  signature: SIGNATURE

# Configure navigation menu, provide a relative link and a path to icon (icon should better be square)
# If menu is absent, only "archive" and "search" menu items will be preserved
# Configurable menu items should not exeed 4, otherwise the last ones will be ignored

  menu:
    Resume: 
      link: /resume/
      icon: /images/resume.svg
    Projects: 
      link: /categories/projects/
      icon: /images/projects.svg
    Notes: 
      link: /categories/notes/
      icon: /images/notes.svg
    Fun: 
      link: /categories/fun/
      icon: /images/fun.svg

# As long as the name matches the font awesome icon name, you can add even more social links
# Tip: the social link can be a QRCODE link
  social:
    medium: 
    skype: 
    slack: 
    steam: 
    tumblr: 
    whatsapp: 
    youtube: 
    snapchat: 
    instagram: 
    qq: 
    google-plus: 
    twitter: 
    facebook: 
    weibo: 
    weixin: 
    github: https://your/github/profile/link
    linkedin: https://your/linkedin/profile/link

# Enable/disable instant click, if absent, it means disabled.
  instantclick: false # or you can set it to be "true" to enable

  # configure comment system
  global:
    comment_system: valine # disqus, valine, gitment
  
  valine:
    appId: 
    appKey: 
    placeholder: 
  
  disqus:
    shortname: 
  
  gitment:
    owner: 
    repo: 
    client_id: 
    client_secret:

A set of default icons, referring using path(/images/icon_name.svg)

Add search page

  1. Create a new page called search
  2. Use layout search in the front matter of search page
1
2
3
---
layout: search
---

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
2
3
4
5
---
photos:
  - image1.png
  - image2.png
---

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

  1. www.linpx.com
  2. Flaticon
  3. InstantClick
  4. Lightgallery
  5. Cookie.js

Websites that use the theme

Let me know if you want your website appears here.

Comment