Hexo Next Theme Customization

Posted on Edited on In ,

Preface

Please refer to next theme documentation page for more settings. Settings discussed in this blog post are the one used for this site only.

Change favicon

After changing to next theme, the Hexo site uses the default next favicon, you could change to your preferred favicon for your blog.

For me, I choose the reading icon from here and use Favicon Generator to generate icons and stored them under source/images folder as shown below.

1
2
3
4
5
6
7
8
9
.
├── source
│   ├── _posts
│   ├── images
│       ├── apple-touch-icon-reading.png
│       ├── favicon-16x16-reading.png
│       ├── favicon-32x32-reading.png
│       └── logo.svg
│

Remember to change _config.next.yml as well:

_config.next.yml
1
2
3
4
5
6
7
8
favicon:
-  small: /images/favicon-16x16-next.png
-  medium: /images/favicon-32x32-next.png
-  apple_touch_icon: /images/apple-touch-icon-next.png
+  small: /images/favicon-16x16-reading.png
+  medium: /images/favicon-32x32-reading.png
+  apple_touch_icon: /images/apple-touch-icon-reading.png
  safari_pinned_tab: /images/logo.svg

Display Categories and Tags Page

I prefer to use categories and tags pages for a better organization.

To make some buttons like Categories and Tags appear in the Menu Settings section, I first change next theme configuration file.

_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-sensitive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:
-  #home: / || fa fa-home
+  home: / || fa fa-home
  #about: /about/ || fa fa-user
-  #tags: /tags/ || fa fa-tags
-  #categories: /categories/ || fa fa-th
-  #archives: /archives/ || fa fa-archive
+  tags: /tags/ || fa fa-tags
+  categories: /categories/ || fa fa-th
+  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

Besides changing next theme configuration file, source/categories/index.md and source/tags/index.md also need to be created with following contents.

source/categories/index.md
1
2
3
4
5
---
title: Categories
date: 2022-01-23 18:08:00
type: "categories"
---
source/tags/index.md
1
2
3
4
5
---
title: Tags
date: 2022-01-23 18:08:00
type: "tags"
---

Read More Button

By default, I realised the whole post is displayed on the home page, which means lots of scrolling is required to view the next post. By adding this line <!-- more --> in a markdown file, a Read more >> button will be generated to minimize the post height in the home page.

After adding <!-- more --> in the markdown files, run following commands:

1
2
3
4
# generate static files locally
hexo g
# if above command do not work, run clean command before generating static files locally command
hexo clean

Faster Animation

The default next theme’s animation is quite slow, however, I found out changing enable: false under motion section, the sidebar (red box in the screenshot below) with author name and number of posts disappeared completely.

sidebar of Pisces and Gemini schemes

After some research online, I decided to go for this configuration.

  • async: true allows all elements to load together
  • post_block: none allows no css animation to be applied when loading an element
_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# ---------------------------------------------------------------
# Animation Settings
# ---------------------------------------------------------------

# Use Animate.css to animate everything.
# For more information: https://animate.style
motion:
  enable: true
-  async: false
+  async: true
  transition:
    # All available transition variants: https://theme-next.js.org/animate/
-    post_block: fadeIn
-    post_header: fadeInDown
-    post_body: fadeInDown
-    coll_header: fadeInLeft
+    post_block: none
+    post_header: none
+    post_body: none
+    coll_header: none
    # Only for Pisces | Gemini.
-    sidebar: fadeInUp
+    sidebar: none

However, the menu area above sidebar (blue box in the screenshot above) still has some css animation effects applied, I am not sure how to change it though, but in general I am quite happy with the loading time now!

Social Icons

Add a GitHub social icons in the blog.

_config.next.yml
1
2
3
4
5
6
7
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
-  GitHub: https://github.com/yourname || fab fa-github
+  GitHub: https://github.com/comilao || fab fa-github

To display social icons only without descriptions.

_config.next.yml
1
2
3
4
5
social_icons:
  enable: true
-  icons_only: false
+  icons_only: true
  transition: false

RSS Feed

Install hexo-generator-feed:

1
npm install hexo-generator-feed --save

Add RSS Feed icon at social icons section:

_config.next.yml
1
2
3
social:
  GitHub: https://github.com/comilao || fab fa-github
+  RSS: /atom.xml || fa fa-rss

Install hexo-generator-searchdb:

1
npm install hexo-generator-searchdb

Change settings at:

_config.next.yml
1
2
3
4
5
# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
-  enable: false
+  enable: true

If some strange icons appeared in the menu area after hexo generate command, remember to do a hexo clean before hexo generate.

Codeblock Copy Button

Enable copy button on codeblock

1
2
3
4
  # Add copy button on codeblock
  copy_button:
-    enable: false
+    enable: true