How to Customize Hexo’s Next Theme: A Complete Step‑by‑Step Guide

Introduction

The author has been running a personal Hexo blog for over three years using the jacman theme, but decided to switch to a more modern theme called Next. This guide walks through downloading the theme and configuring a wide range of visual and functional customizations.

How to Download

The Next theme source is hosted on GitHub. Clone or download it from https://github.com/theme-next/hexo-theme-next.git and extract the files into the themes directory of your Hexo site, e.g., G:\hexo\themes\next.

Configuration File Categories

Hexo uses two YAML configuration files: the site configuration _config.yml in the root directory and the theme configuration _config.yml inside the theme folder.

Basic Site Information

title: Title
subtitle: Subtitle
description: Description
author: Author
language: zh-Hans
timezone:

Example for the author’s site:

# Site
title: 不才陈某技术博客
subtitle: 微信公众号：码猿技术专栏
description: 本站是不才陈某的技术分享博客。内容涵盖 Java 后端技术、Spring Boot、微服务架构、系统安全、前端、系统监控等相关的研究与知识分享。
author: 不才陈某
language: zh-Hans
timezone:

Switching the Theme

# Switch to Next theme
theme: next

Next Theme Style Scheme

The theme offers four schemes: Muse, Mist, Pisces, and Gemini. The author uses Gemini. Set the desired scheme in the theme configuration:

# Choose a scheme
scheme: Gemini

Adding a Dynamic Background

Enable a canvas background by setting canvas_nest: true in the theme configuration.

# Enable dynamic background
canvas_nest: true

Modifying Link Styles

Edit themes/next/source/css/_common/components/post/post.styl and add the following CSS to change link colors and hover effects:

// Article link style
.post-body p a {
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

Adding a Search Function

Install the search plugin:

npm install hexo-generator-searchdb --save

Then add the following configuration to the site _config.yml under search:

# Search configuration
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

Note: The first load may be slow because the site is static.

Changing Tag Symbol to an Icon

Replace the # symbol in tag links with a Font Awesome tag icon by editing themes/next/layout/_macro/post.swig and swapping # for <i class="fa fa-tag"></i>.

Custom Avatar and Rotation

Place a custom avatar image in themes/next/source/images and set its path in the theme configuration:

# Set custom avatar
avatar: /images/header.jpg

To make the avatar rotate on hover, add the following Stylus code to

themes/next/source/css/_common/components/sidebar/sidebar-author.styl

:

.site-author-image {
  display: block;
  margin: 0 auto;
  /* other size settings */
  border-radius: 80px;
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}
img:hover {
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
@-webkit-keyframes play { 0% { -webkit-transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(-360deg); } }
@-moz-keyframes play { 0% { -moz-transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(-360deg); } }
@keyframes play { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-360deg); } }

Custom CSS for Code Blocks and Highlighting

Add the following to themes/next/source/css/_custom/custom.styl to change code colors and block styling:

// Custom styles
code {
  color: #ff7600;
  background: #fbf7f8;
  margin: 2px;
}
.highlight, pre {
  margin: 5px 0;
  padding: 5px;
  border-radius: 3px;
}
.highlight, code, pre {
  border: 1px solid #d6d6d6;
}

The colors shown are the author’s personal preference.

Adding a “Read More” Button

Two methods:

Insert <!--more--> in the markdown file where you want the content to collapse; the “Read Full Article” button will appear.

Set auto_excerpt in the theme configuration to automatically truncate articles, e.g.:

auto_excerpt:
  enable: true
  length: 300

Visitor Counter

Use the “busuanzi” service. Add the following script to themes/next/layout/_partial/footer.swig:

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv" style='display:none'>本站总访问量 <span id="busuanzi_value_site_pv"></span> 次 | <span class="post-meta-divider">|</span></span>
<span id="busuanzi_container_site_uv" style='display:none'>有 <span id="busuanzi_value_site_uv"></span> 人看过我的博客啦</span>

To show per‑article views, add an is_pv field to themes/next/layout/_macro/post.swig and insert the following where you want the count:

{% if is_pv %}
  <span class="post-meta-divider">|</span>
  <span id="busuanzi_value_page_pv"></span>次阅读
{% endif %}

Removing Automatic TOC Numbering

In the theme configuration, set toc.number: false:

toc:
  enable: true
  number: false
  wrap: false

Adding Shadow Card Effect to Home Posts

Append the following CSS to themes/next/source/css/_custom/custom.styl:

// Shadow card for home posts
.post {
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 25px;
  -webkit-box-shadow: 0 0 5px rgba(202,203,203,.5);
  -moz-box-shadow: 0 0 5px rgba(202,203,204,.5);
}

Footer Word Count

Install the word‑count plugin:

npm install hexo-wordcount --save

Then add the following snippet to /themes/next/layout/_partials/footer.swig:

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

Setting a Favicon

Place a favicon.ico file in /themes/next/source/images and set its path in the theme configuration:

# Favicon path
favicon: /favicon.ico

Adding Per‑Article Word Count and Reading Time

Install hexo-wordcount (same as the footer word count) and configure:

# Post wordcount display settings
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

Top Loading Bar

Enable the loading bar by setting pace: true in the theme configuration:

pace: true

Pinning Articles to the Top

Modify the hexo-generator-index plugin ( node_modules/hexo-generator-index/lib/generator.js) to sort posts by a custom top field. Then add top: 100 (or any number) in a post’s front‑matter; larger numbers appear earlier.

---
title: Spring Boot 与多数据源的那点事儿~
date: 2020-05-22 22:45:48
tags: Spring Boot进阶
categories: Spring Boot
top: 100
---

Password‑Protected Articles

Insert the following script after the <meta> tags in themes/next/layout/_partials/head.swig to prompt for a password defined in the post’s front‑matter:

<script>
(function(){
  if ('{{ page.password }}') {
    if (prompt('请输入文章密码') !== '{{ page.password }}') {
      alert('密码错误！');
      if (history.length === 1) {
        location.replace('https://chenjiabing666.github.io/');
      } else {
        history.back();
      }
    }
  }
})();
</script>

Then add a password field in the markdown front‑matter:

---
title: Spring Boot 与多数据源的那点事儿~
date: 2020-05-22 22:45:48
tags: Spring Boot进阶
categories: Spring Boot
top: 100
password: 123456
---

Conclusion

The guide demonstrates numerous ways to beautify and extend the Hexo Next theme, from visual tweaks to functional enhancements. While many Hexo tutorials exist online, this consolidated reference helps users apply a polished, personalized look without needing a custom domain.