Next Theme Customization (Version 7.10)

Posted on Edited on In Views: Word count in article: 9k Reading time ≈ 33 mins.

The blog theme has been changed to Next. This blog post is only applicable to the Next 7.10 theme.
201904121

To save github storge space, I won’t include images in this post (it’s definitely not because I’m lazy).

Contents:

  • Installation of the Next theme
  • Configuration of the Next theme
  • Advanced customization of the Next theme

Note: This method is not applicable to newer versions of the Next theme.

This post was translated from my Chinese blog post with the aid of ChatGpt.

Installing the Next Theme

Installing the Next theme is similar to the Flash theme. Simply clone it into your blog’s folder using the following command:

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

Since the Next theme is relatively lightweight, it should install quickly. However, because the Next theme is frequently updated, it’s a good idea to add an update command as well:

1
2
cd themes/next
git pull

After the installation, go to the _config.yml file in the root directory and add next after theme: to activate the Next theme.

Configuring the Next Theme

After the installation, further configuration is required for the theme.

Configuration in the Root _config.yml

Site Settings

1
2
3
4
5
6
7
# Site
title: Siriusq
subtitle: Hello World!
description: xxxxxxxx
keywords:
author: Sirius
language: en

URL Bar Settings

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://Siriusq.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

url: should be filled with the second-level domain of your blog on Github, such as https://Siriusq.github.io.

permalink: is the path name used when generating blog pages, usually :year/:month/:day/:title/.

Pagination Settings

There are two places where you can control the number of blog posts displayed on each page.

1
2
3
4
5
6
7
8
9
10
11
12
13
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 12
  order_by: -date
  
# Pagination
## Set per_page to 0 to disable pagination
per_page: 12
pagination_dir: page

Set the desired number of blog posts after per_page:. Setting it to 0 means displaying all posts on a single page without pagination.

Deployment Settings

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: master

After branch:, enter master.

Replace the username after repo: with your own username.

Configuration in the _config.yml file located in the theme directory

Many configurations in the file start with #. Remove the # to activate the option.

Website Logo Settings

1
2
3
4
5
6
7
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  #safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

Place the chosen logo in the \themes\next\source\images directory and rename it to the specified file name. Pay attention to the image dimensions.

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
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2019

  # Icon between year and copyright info.
  icon:
    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/
    # `heart` is recommended with animation in red (#ff0000).
    name: heart
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#f08080"

  # If not defined, `author` from Hexo main config will be used.
  copyright: Siriusq

  powered:
    # Hexo link (Powered by Hexo).
    enable: false
    # Version info of Hexo after Hexo link (vX.X.X).
    version: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false

since: represents the year when the website was established. If not set, it defaults to the current year and displays as “© 2019.”

icon: allows you to set the icon after the year. By default, it’s a heart shape. If you want to change it, go to Fontawesome, choose an icon, and modify the name field.

animated: is used to control whether the heart icon beats.

color: is used to set the color of the icon. You can find color references online.

copyright: is the copyright owner or author’s name to be displayed after the icon. If not set, it defaults to the author name in the root configuration file.

powered: The section afterward is used to determine whether to display “Powered by Hexo” and the current theme’s version information. Set it to true to display.

theme: The section afterward is used to determine whether to display the current theme’s version information. Set it to true to display.

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language: en

license: is used to set the copyright standard. You can check Creative Commons for specific licensing types and examples.

sidebar: is used to determine whether to display the copyright standard in the sidebar.

post: is used to determine whether to display copyright information at the bottom of articles.

GitHub Banner

1
2
3
4
5
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/Siriusq
  title: Follow me on GitHub

After permalink:, fill in your GitHub address.

title: is used to set the text displayed when you hover the mouse over the Banner.

1
2
3
4
5
6
7
8
9
10
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  switch_lang: /en || language
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

|| before represents the page’s address, and after represents the displayed icon name.

about: is used to set the “About” page. If it doesn’t exist, you can create it using hexo new page "about" in Git Bash, and then open \source\about\index.md to write the content.

tags: is used to enable the “Tags” functionality. Similarly, use the command hexo new page "tags" to create it, then open source\tags\index.md and add a line type: "tags" below the date. When writing a blog post, you can set tags at the top by adding tags: [], separated by commas for multiple tags.

archives: is used to set up the archive page.

categories: is used to set up the categories page. When editing a blog post, you can specify the category by adding categories: at the top.

Theme Selection

Next offers four themes to choose from. To use your preferred theme, remove the # before it.

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
  GitHub: https://github.com/Siriusq || github
  E-Mail: mailto:siriuskevin@foxmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

In the || section, enter the links to your social media profiles, and use the space after them to set the corresponding icons.

For the E-mail: section, the format is mailto:emailaddress. On Windows 10, this will invoke the system’s email service and automatically populate the recipient field.

1
2
3
4
5
6
7
8
9
10
11
12
# Sidebar Avatar
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.gif
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: true

After url:, enter the path to your profile picture. By default, this picture should be in the \themes\next\source\images directory.

  • rounded: controls whether to display a rounded avatar.
  • opacity: sets the opacity of the avatar, with 1 being completely opaque.
  • rotated: determines whether the avatar rotates when the mouse hovers over it.

Table Of Contents in the Sidebar

1
2
3
4
5
6
7
8
9
10
11
# Table Of Contents in the Sidebar
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front Matter.
  max_depth: 6

enable: determines whether to enable the sidebar table of contents.

number: controls whether automatic numbering is enabled.

wrap: determines if titles should wrap to the next line when they exceed the width of the sidebar.

expand_all: specifies whether to expand all sections of the table of contents. If set to false, it will only expand the section you are currently viewing.

max_depth: sets the maximum depth of the automatically generated table of contents, indicating how many levels of headings to include in the table of contents.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
sidebar:
  # Sidebar Position, available values: left | right (only for Pisces | Gemini).
  #position: left
  position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  width: 320

  # Sidebar Display, available values (only for Muse | Mist):
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: post

  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false
  # Click any blank part of the page to close sidebar (only for Muse | Mist).
  dimmer: false

position: is used to set whether the sidebar is on the left or right side. Remove the # before your desired position and add # before the other one. This option only affects the Pisces and Gemini themes.

width: specifies the width of the sidebar. The default is 320 for Muse and Mist, and 240 for Pisces and Gemini.

display: determines the display style of the sidebar. This option only affects the Muse and Mist themes. You can try each one to see which works best for you.

offset: sets the distance between the top introduction section and the sidebar. This option only affects the Pisces and Gemini themes.

onmobile: controls whether the sidebar is displayed on smaller devices like smartphones. This option only affects the Muse and Mist themes.

dimmer: determines whether clicking on the blank area of the screen closes the sidebar. This option also only affects the Muse and Mist themes.

Back to Top Button

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

sidebar: is used to determine whether to place the buttons in the sidebar.

scrollpercent: is used to determine whether to display the reading progress percentage.

Read More Button

Find the following section and set read_more_btn: to true to enable the “Read More” button.

1
2
3
# Read more button
# If true, the read more button would be displayed in the excerpt section.
read_more_btn: true

The next section is used to set up automatic generation of the “Read More” option:

1
2
3
4
5
# Automatically Excerpt (Not recommend).
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

The length property indicates the character length up to which the text will be excerpted.

This section is for automatically scrolling the page to the section located under the <!-- more --> marker:

1
2
# Automatically scroll page to the section which is under <!-- more --> mark.
scroll_to_more: true

Once these settings are configured, you can add <!--more--> in your post to hide the remaining text on the homepage and display the “Read More” button.

Code Block Copy Button

1
2
3
4
5
6
7
8
9
10
codeblock:
  # Manual define the border radius in codeblock, leave it blank for the default value: 1
  border_radius:
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result
    show_result: true
    # Style: only 'flat' is currently available, leave it blank if you prefer default theme
    style:

show_result: is used to determine whether to display a success message after copying.

Reward

1
2
3
4
5
6
7
8
9
10
11
12
# Reward (Donate)
reward_settings:
  # If true, reward would be displayed in every article by default.
  # You can show or hide reward in a specific article throuth `reward: true | false` in Front Matter.
  enable: false
  animation: false
  #comment: Donate comment here

reward:
  #wechatpay: /images/wechatpay.png
  #alipay: /images/alipay.png
  #bitcoin: /images/bitcoin.png

enable: is used to determine whether to display a reward button at the end of the article.

animation: is used to determine whether the reward button should have animation.

To enable a specific reward option, remove the # at the beginning of the line. Make sure to replace it with your own image, and the path to the image can be found in \themes\next\source\images.

Code Highlight Theme

The Next theme comes with built-in Tomorrow code highlight themes, totaling five in number. You can preview them at Tomorrow. To select the one you prefer, modify it in the highlight_theme: section below.

1
2
3
4
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night

Bookmark

Display a bookmark button in the upper left corner to jump to the last bookmarked location. First, run the command git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark to install the bookmark plugin. Then, in the options below, set enable: to true.

1
2
3
4
5
6
7
# Bookmark Support
# Dependencies: https://github.com/theme-next/theme-next-bookmark
bookmark:
  enable: true
  # If auto, save the reading position when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: auto

Enable RSS

Well, it seems like not many people use RSS anymore…

Installation

Execute the following command in your blog’s root directory to install the RSS plugin:

1
npm install hexo-generator-feed --save

Configuration

Open the configuration file _config.yml in your blog’s root directory and add the following code at the end:

1
2
3
4
5
6
7
8
9
# RSS Subscription Support
plugin:
- hexo-generator-feed

# Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

Enabling local search functionality for quick and easy navigation.

Installation

Execute the following command to install the plugin:

1
npm install hexo-generator-searchdb --save

Configuration

Open the configuration file _config.yml in the Next theme’s directory and search for local_search. Modify it as follows:

1
2
3
4
5
6
7
8
9
10
11
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing the enter key or search button.
  trigger: auto
  # Show the top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape HTML strings to the readable one.
  unescape: false

In-Depth Beautification of the Next Theme

I can’t continue writing, take your time to fill it out, it’s all just for fun.

Top Reading Progress Bar

Add a Reading Progress bar at the top of the blog post pages to indicate the reading progress. The Next theme comes with built-in configuration files.

Installation

Navigate to the Next theme folder:

1
cd themes/next

Install the module into the source/lib folder:

1
git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

Modify the Configuration File

Open the configuration file _config.yml in the Next theme directory. Search for reading_progress and locate the following code. Set enable: to true:

1
2
3
4
5
6
# Reading progress bar
# Dependencies: https://github.com/theme-next/theme-next-reading-progress
reading_progress:
  enable: true
  color: "#ffc0cb" # Adjust the line color
  height: 2px # Adjust the line height

You can find the color code by using ATOOL and directly modify it. The default color is cyan, and I changed it to pink. If the top reading progress bar overlaps with the loading bar, you can adjust the line height to ensure it covers the loading bar. I set my line height to 3px.

Upgrading

Loading Bar

This feature displays the loading progress during website loading. The Next theme already supports the PACE functionality, and it offers multiple loading animations to choose from.

  • pace-theme-big-counter
  • pace-theme-bounce
  • pace-theme-barber-shop
  • pace-theme-center-atom
  • pace-theme-center-circle
  • pace-theme-center-radar
  • pace-theme-center-simple
  • pace-theme-corner-indicator
  • pace-theme-fill-left
  • pace-theme-flash
  • pace-theme-loading-bar
  • pace-theme-mac-osx
  • pace-theme-minimal

Installation

Navigate to the Next theme folder.

1
cd themes/next

Install the module into the source/lib folder.

1
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

Modify Configuration File

Open the configuration file _config.yml located in the Next theme folder. Search for pace to locate the following code:

1
2
3
4
5
6
7
8
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
pace: true
# Themes list:
# pace-theme-big-counter | pace-theme-bounce | pace-theme-barber-shop | pace-theme-center-atom
# pace-theme-center-circle | pace-theme-center-radar | pace-theme-center-simple | pace-theme-corner-indicator
# pace-theme-fill-left | pace-theme-flash | pace-theme-loading-bar | pace-theme-mac-osx | pace-theme-minimal
pace_theme: pace-theme-flash

Set pace: to true.
Set pace_theme: to one of the themes listed under Themes list:. You can check the available theme styles on the PACE documentation.

Adjusting Colors

To match the progress bar with the theme’s background, you can find the corresponding theme’s CSS file in ./themes/next/source/lib/pace and modify the color settings accordingly.

The following code is an example of pace-theme-flash.min.css.

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
72
73
74
75
76
77
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #ffc0cb;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #ffc0cb, 0 0 5px #ffc0cb;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #ffc0cb;
  border-left-color: #ffc0cb;
  border-radius: 10px;
  -webkit-animation: pace-spinner 400ms linear infinite;
  -moz-animation: pace-spinner 400ms linear infinite;
  -ms-animation: pace-spinner 400ms linear infinite;
  -o-animation: pace-spinner 400ms linear infinite;
  animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}

To modify the colors, search for # within the code. There are a total of 5 instances where you can replace colors. Here are three methods to change the colors:

  1. Use ATOOL to look up color codes and directly replace the colors in the code.
  2. If you’re using Visual Studio Code, install a CSS plugin and click on the # to modify the color directly.
  3. Visit PACE documentation, select your desired color, and copy the code to replace the original code in the file.

The default color is blue. After modifying the code, it will be pink.

Upgrade

Navigate to the installation directory:

1
cd themes/next/source/lib/pace

Update the module:

1
git pull

Dynamic Background

Next theme provides three default dynamic background options:

Canvas-nest

I chose this background as it’s fun.

Installation

Navigate to the Next theme folder:

1
cd themes/next

Install the module:

1
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

Modify Configuration

Open the _config.yml file in the Next theme directory and modify the following code:

1
2
3
4
5
6
7
8
9
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
  enable: true
  onmobile: true # Display on mobile devices
  color: "255,51,51" # RGB color setting
  opacity: 0.5 # Line opacity
  zIndex: -1 # Display level
  count: 160 # Number of lines, more lines may affect performance

If you want to use CDN acceleration, set the following:

1
2
3
4
vendors:
  ...
  canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest.min.js
  canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest-nomobile.min.js

Upgrade

Navigate to the installation directory:

1
cd themes/next/source/lib/canvas-nest

Update:

1
git pull

JavaScript 3D library

Installation

Navigate to the Next theme folder:

1
cd themes/next

Install the module:

1
git clone https://github.com/theme-next/theme-next-three source/lib/three

Modify Configuration

Open the _config.yml file in the Next theme directory and modify the following code. There are three styles to choose from; set one to true to enable it:

1
2
3
4
5
6
7
8
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: true
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

Upgrade

Navigate to the installation directory:

1
cd themes/next/source/lib/three

Update:

1
git pull

Canvas-ribbon

Installation

Navigate to the Next theme folder:

1
cd themes/next

Install the module:

1
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

Modify Configuration

Open the _config.yml file in the Next theme directory and modify the following code:

1
2
3
4
5
6
7
8
9
10
# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:
  enable: true # Enable or not
  size: 300 # Width
  alpha: 0.6 # Opacity
  zIndex: -1 # Display level

Upgrade

Navigate to the installation directory:

1
cd themes/next/source/lib/canvas-ribbon

Update:

1
git pull

Mouse Click Effects

Add mouse click effects to your web page. Currently, there are two types of effects: heart and explosion. These effects can be combined, but be cautious, as they are not very friendly to devices with low performance, especially the explosion effect, which can make tablets as slow as a PowerPoint presentation. Use them sparingly.

Heart Effect

Create JS File

Create a new clicklove.js in . /themes/next/source/js and paste the following code.

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

Modify the Layout File

Open ./themes/next/layout/_layout.swig and add the following code at the end:

1
2
<!-- Heart-shaped click effect -->
<script type="text/javascript" src="/js/clicklove.js"></script>

Explosion Effect

Create a JavaScript File

Create a new firework.js in . /themes/next/source/js and paste the following code into it.

1
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};

Modify the Layout File

Open ./themes/next/layout/_layout.swig and add the following code in the middle of the <head> section:

1
2
3
4
  <!-- Explosion effect -->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/firework.js"></script>

Configure the Theme File

Open the _config.yml file in the ./themes/next directory and add the following code at the end:

1
2
# Fireworks
fireworks: true

Live2D Virtual Assistant

Add a virtual assistant similar to Bilibili’s “22/33” in the corner of your website. It can follow the mouse cursor and interact with users. You can check out the official documentation by xiazeyu on GitHub.

(Put your favorite character on there)

Installation

  • Execute the command npm install --save hexo-helper-live2d to install the Live2D module.

  • Choose your preferred model style and execute the command npm install packagename to install the model. Replace packagename with the name of the model you want to use. Here are some available models:

    • live2d-widget-model-chitose
    • live2d-widget-model-epsilon2_1
    • live2d-widget-model-gf
    • live2d-widget-model-haru/01 (Install using npm install --save live2d-widget-model-haru)
    • live2d-widget-model-haru/02 (Install using npm install --save live2d-widget-model-haru)
    • live2d-widget-model-haruto
    • live2d-widget-model-hibiki
    • live2d-widget-model-hijiki
    • live2d-widget-model-izumi
    • live2d-widget-model-koharu
    • live2d-widget-model-miku
    • live2d-widget-model-ni-j
    • live2d-widget-model-nico
    • live2d-widget-model-nietzsche
    • live2d-widget-model-nipsilon
    • live2d-widget-model-nito
    • live2d-widget-model-shizuku
    • live2d-widget-model-tororo
    • live2d-widget-model-tsumiki
    • live2d-widget-model-unitychan
    • live2d-widget-model-wanko
    • live2d-widget-model-z16

  • You can see some previews here.

Configuration

Basic Configuration

  • Open the configuration file _config.yml in your blog’s root directory.
  • Add the following code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
  enable: true                         # Enable Live2D
  scriptFrom: local                    # Plugin source
  pluginRootPath: live2dw/             # Plugin root directory (relative path)
  pluginJsPath: lib/                   # Script file path (relative to the plugin root directory)
  pluginModelPath: assets/             # Model file path (relative to the plugin root directory)
  tagMode: false                       # Enable tag mode
  debug: false                         # Enable debug mode
  model:
    use: live2d-widget-model-wanko     # Choose a model
  display:
    position: right                    # Model position on the page
    width: 150                         # Model width
    height: 300                        # Model height
  mobile:
    show: true                         # Show on mobile devices
  react:
    opacity: 1                         # Set model opacity

About Tag Mode

To insert the Live2D model on specific pages, insert {{ live2d() }} (Swig) before </body> in the desired page. Set tagMode to true. The plugin will then only appear on pages with the live2d tag.
(I didn’t enable this option; of course, I want my virtual assistant on all pages)

Advanced Configuration

If you want to use a custom-made model package, you can follow these steps:

  1. Create a new directory and run npm init in your Node environment. It’s recommended to use a package name like live2d-widget-model-xxx.
  2. Create an assets subdirectory inside the newly created directory and place your model files inside it.
  3. Publish the package using npm publish.
  4. Then, install it using npm install --save live2d-widget-model-xxx.
  5. Adjust the model name in the configuration file, and you can use it.

Netease Cloud Music Widget

Add background music to your blog, supporting Netease Cloud Music playlists. Follow these steps:

  1. First, log in to the Netease Cloud Music web version.
  2. Select the playlist you want to add.
  3. Share the playlist.
  4. Click on your profile picture in the upper right corner and go to “My Homepage.”
  5. Click on “Activity.”
  6. Find the playlist you just shared.
  7. Click on “Generate External Player.”
  8. Choose the “iframe” interface and adjust the player’s style and size.
  9. It’s recommended not to enable “Auto Play” under “Play Mode.”
  10. Copy the HTML code provided.
  11. Open sidebar.swig in the path Hexo root directory\themes\next\layout\_macro.
  12. Insert the following code at an appropriate location, adjusting the placement as needed. The iframe is the code you just copied.
    1
    2
    3
    <div id="music163player">
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=450 src="//music.163.com/outchain/player?type=0&id=908252389&auto=1&height=430"></iframe>
    </div>
  13. The player may not display correctly due to insufficient sidebar width. You need to adjust the sidebar width in the theme configuration file.
  14. Open the _config.yml file under the Next theme.
  15. Search for “width” and uncomment the last line by removing the “#” sign before “width” to make it effective.
    1
    2
    3
    4
    # Manual define the sidebar width. If commented, will be default for:
    # Muse | Mist: 320
    # Pisces | Gemini: 240
    # width: 300
  16. Adjust the sidebar width according to your needs.

Code Folding Feature

Example

As of May 13, 2022, this feature is deprecated in Next 8.

You can use two folding blocks to hide large sections of text and reduce page space usage. Here’s an example for the Next theme:

1
2
3
4
5
6
7
8
9
10
11
12
13
{% fold Folded Content %}
Something you want to fold, including a code block.

System.out.println("QAQ!");
console.log("QAQ!");
print("QAQ!");
printf("QAQ!\n");
cout << "QAQ!" << endl;
Console.WriteLine("QAQ!");
Response.Write("QAQ!");
alert("QAQ!");
echo "QAQ!";
{% endfold %}

Edit main.js

Open .\themes\next\source\js\post-details.js and insert the following code under a code block similar to $(document).ready(function() {:

1
2
3
4
5
6
7
8
$(document).ready(function(){
    $(document).on('click', '.fold_hider', function(){
        $('>.fold', this.parentNode).slideToggle();
        $('>:first', this).toggleClass('open');
    });
    // Fold by default
    $("div.fold").css("display","none");
});

Create tag.js

Open the . \themes\next\scripts path and create a new tag.js file, the code is as follows.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const rEscapeContent = /<escape(?:[^>]*)>([\s\S]*?)<\/escape>/g;
const placeholder = '\uFFFD';
const rPlaceholder = /(?:<|&lt;)\!--\uFFFD(\d+)--(?:>|&gt;)/g;
const cache = [];
function escapeContent(str) {
  return '<!--' + placeholder + (cache.push(str) - 1) + '-->';
}
hexo.extend.filter.register('before_post_render', function(data) {
  data.content = data.content.replace(rEscapeContent, function(match, content) {
    return escapeContent(content);
  });
  return data;
});
hexo.extend.filter.register('after_post_render', function(data) {
  data.content = data.content.replace(rPlaceholder, function() {
    return cache[arguments[1]];
  });
  return data;
});

Create fold.js

Create a new fold.js file in the same path with the following code.

1
2
3
4
5
6
function fold (args, content) {
    var text = args[0];
    if(!text) text = "折叠";
    return '<div><div class="fold_hider"><div class="close hider_title">' + text + '</div></div><div class="fold">\n' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '\n</div></div>';
}
hexo.extend.tag.register('fold', fold, {ends: true});

Configure custom.styl

Open .\themes\next\source\css\_custom\custom.styl, and insert the following code at the end:

1
2
3
4
5
6
7
8
9
10
11
12
.hider_title {
    font-family: "Microsoft Yahei";
    cursor: pointer;
}

.close:after {
    content: "▼";
}

.open:after {
    content: "▲";
}

Usage

To fold a paragraph, simply add the tags before and after the content you want to fold, like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% fold Folded Content %}
Something you want to fold, including a code block.
&#39;&#39;&#39;
System.out.println("QAQ!");
console.log("QAQ!");
print("QAQ!");
printf("QAQ!\n");
cout << "QAQ!" << endl;
Console.WriteLine("QAQ!");
Response.Write("QAQ!");
alert("QAQ!");
echo "QAQ!";
&#39;&#39;&#39;
{% endfold %}

This code will achieve the same effect as the example above.

Reference: @Ryan Miao

Website Title Crash Deception

Add a title crash deception effect to the webpage title. When you leave the page, the title will change, and when you switch back, it will return to normal. It’s a fun way to deceive people.

Create a New File

In your_blog_root\themes\next\source\js, create a new file called crash_cheat.js, and copy the following code into it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--Title Crash Deception-->
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/img/TEP.ico");
        document.title = '╭(°A°`)╮ The page has crashed ~';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="icon"]').attr('href', "/favicon.ico");
        document.title = '(ฅ>ω<*ฅ) Oops, it\'s back ~' + OriginTitle;
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});

You can customize the content after document.title. The first one is the text displayed in the title when the page is switched out, the second is the text briefly displayed when switching back, and the third is the original webpage title. Additionally, make sure to change the /favicon.ico in the else block to the path of your own logo in the public directory. Otherwise, it will still display the symbol shown when the page crashes upon return.

Add Reference

Add the following code at the end of your_blog_root\themes\next\layout\_layout.swig:

1
2
<!--Title Crash Deception-->
<script type="text/javascript" src="/js/crash_cheat.js"></script>

Background and Semi-transparent Effect

Emmm… I feel like the background is too plain, let’s add something to it.

Steps

  1. Place your chosen background image in your_blog_root/themes/next/source/images.
  2. Open the custom.styl file in your_blog_root/themes/next/source/css/_custom.
  3. Add the following code:
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
body {
    background: url(/images/background.jpg); // Image path
    background-repeat: no-repeat; // Repeat or not
    background-attachment: fixed; // Scroll with the page or not (fixed for fixed)
    background-position: 50% 50%; // Image position
    background-size: cover; // Image display size
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;

    #footer > div > div {
        color: #000000; // Footer text color
    }
}

.header-inner {
    background: #ffffffe8; // Set sidebar transparency
    opacity: 1; // Set to 1, otherwise the search bar will disappear
}

.main-inner {
    background: #fff;
    opacity: 0.9; // Set article body opacity
}

Note

Don’t use a background image that’s too large, it will significantly slow down your website’s loading speed.
Don’t make the transparency too low, as it may affect readability.

Open themes/next/source/css/_common/components/post/post.styl and add the following code above the series of @import statements at the end:

1
2
3
4
5
6
7
8
9
10
11
// Styles for links within the post content
.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;
  }
}

Modify Article Footer Tags Style

Open the file /themes/next/layout/_macro/post.swig.
Search for rel="tag"># and replace # with <i class="fa fa-tag"></i>.

Add End-of-Article Marker

Create passage-end-tag.swig

In the \themes\next\layout\_macro directory, create a file named passage-end-tag.swig and copy the following code into it:

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------End of Article<i class="fa fa-paw"></i>Thank You for Reading-------------</div>
    {% endif %}
</div>

Modify post.swig

Open the \themes\next\layout\_macro\post.swig file, and add the following code after post-body and before post-footer:

1
2
3
4
5
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

Modify the Theme Configuration File

Open the theme configuration file _config.yml and add the following at the end:

1
2
3
# Add "End of Article" marker at the end of articles
passage_end_tag:
  enabled: true

Blog Post Compression

After converting Markdown files to HTML, there may be many spaces, and there can also be numerous spaces in JS and CSS files. Spaces in JS can affect performance.

Installation

Execute the following command to install the hexo-neat plugin:

1
npm install hexo-neat --save

Configuration

Open the configuration file _config.yml in the root directory of your blog, and add the following code to the end:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# hexo-neat
# Blog Post Compression
neat_enable: true
# Compress HTML
neat_html:
  enable: true
  exclude:
# Compress CSS
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# Compress JS
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'
    - '**/clicklove.js'
    - '**/firework.js'

Notes

Some plugins may report errors after compression. You can exclude the corresponding files by adding them to the exclude section to disable compression for those files.

Modify Code Block Colors

Open the .\themes\next\source\css\_custom\custom.styl file and add the following code. You can customize the color according to your preference:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Single-line code block color
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}

// Custom style for large code blocks
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}

.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

Website Uptime

Open .\themes\next\layout\_partials\footer.swig and add the following code:

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
<div>
    <span id="timeDate">Loading days...</span>
    <span id="times">Loading hours, minutes, and seconds...</span>
    <script>
        var now = new Date();
        function createtime() {
            var grt = new Date("03/31/2019 00:00:00");
            now.setTime(now.getTime() + 250);
            days = (now - grt) / 1000 / 60 / 60 / 24;
            dnum = Math.floor(days);
            hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
            hnum = Math.floor(hours);
            if (String(hnum).length == 1) {
                hnum = "0" + hnum;
            }
            minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
            mnum = Math.floor(minutes);
            if (String(mnum).length == 1) {
                mnum = "0" + mnum;
            }
            seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
            snum = Math.round(seconds);
            if (String(snum).length == 1) {
                snum = "0" + snum;
            }
            document.getElementById("timeDate").innerHTML = "This site has been running safely for " + dnum + " days ";
            document.getElementById("times").innerHTML = hnum + " hours " + mnum + " minutes " + snum + " seconds";
        }
        setInterval("createtime()", 250);
    </script>
</div>

This code adds a display to your website’s footer that shows how many days, hours, minutes, and seconds your site has been running. It calculates the uptime based on a specified start date and time (in this case, March 31, 2019).

Visitor Statistics

The Next theme has built-in support for Busuanzi statistics. In the Next theme’s configuration file _config.yml, search for busuanzi_count, and set enable to true. You can also customize the icon settings. Below is an example configuration:

1
2
3
4
5
6
7
8
9
10
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true # Total visitors count, displayed in the footer.
  total_visitors_icon: user
  total_views: true # Total views count, displayed in the footer.
  total_views_icon: eye
  post_views: true # Individual post views count, displayed below the post title.
  post_views_icon: eye

Word and Reading Time Statistics

Installation

To install the statistics plugin, run the following command in your blog’s root directory:

1
npm install hexo-symbols-count-time --save

Configuration

Add the following code to your blog’s root configuration file _config.yaml:

1
2
3
4
5
symbols_count_time:
  symbols: true # Article word count
  time: true # Reading time
  total_symbols: true # Total word count for all articles
  total_time: true # Total reading time for all articles

In the Next theme’s configuration file _config.yaml, search for symbol_count and modify it to:

1
2
3
4
5
6
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

Password-Protected Articles

Please note that the article encryption plugin may conflict with word count and table of contents generation. For example, a 9,000-word article may show as 43,000 words in word count statistics, and there may be issues with generating a table of contents. Please use this plugin with caution.

Installation

To install the plugin, run the following command in your blog’s root directory:

1
npm install --save hexo-blog-encrypt

Configuration

In your blog’s root configuration file _config.yml, enable the plugin using the following code:

1
2
3
# Security
encrypt:
    enable: true

Usage

To use the encryption feature, add the following fields to the front-matter of your article’s Markdown file, like this:

1
2
3
4
5
6
7
8
---
title: hexo
date: 2019-05-02 19:00:00
categories: Blog
password: 123456
abstract: This article is password-protected.
message: Please enter the password.
---

Replace password with the desired password, abstract with the summary to display on the homepage, and message with the information to show in the password input box.

Pinning Articles to the Top

Installation

To install the plugin, run the following commands in your blog’s root directory:

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

Configuration

Open .\themes\next\layout\_macro\post.swig and search for <div class="post-meta">. Add the following code within it to enable the pinning feature:

1
2
3
4
5
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=7D26CD>Pinned</font>
    <span class="post-meta-divider">|</span>
{% endif %}

Usage

To pin an article to the top, add top: true to the front-matter of the article, like this:

1
2
3
4
5
6
---
title: hexo
date: 2019-05-02 19:00:00
categories: Blog
top: true
---

Modifying the Default Font Size

The default font size in the Next theme is 14px. You can adjust it by opening .\themes\next\source\css\_variables\base.styl and searching for $font-size-base. Change the value following it to adjust the font size.

Customizing the Mouse Cursor Style

To customize the mouse cursor style, open .\themes\next\source\css\_custom\custom.styl and add the following code:

1
2
3
4
5
6
7
/* Mouse cursor style */
* {
    cursor: url("image-link"), auto !important;
}
:active {
    cursor: url("image-link"), auto !important;
}

Replace "image-link" with the URL of your desired cursor image. The image file must be in the ico format.

Reference: Blog

Image Lazy Loading

Image lazy loading allows images to load only when needed, rather than all at once, which can speed up your website’s performance. This is especially useful for blogs with many images.

Installation

To install the lazy loading plugin, execute the following command in your blog’s root directory:

1
npm install hexo-lazyload --save

Configuration

Add the following code to your blog’s root _config.yml file to configure lazy loading:

1
2
3
4
5
lazyload:
  enable: true
  onlypost: false # Enable lazy loading only in posts
  # className: # Optional, e.g., .J-lazyload-img
  # loadingImg: # Optional, e.g., ./images/loading.png, as the alternative image while the image is not loaded

Adding a Comment System

2020 New Year Update: Gitment is no longer actively maintained, so we will use Gitalk instead.
The comment system we will use is Gitalk, which is similar to the old Gitment.

Installation

The latest version of the Next theme comes with Gitalk built-in, so we only need to enable it. You can ignore the installation process below:

To install the Gitment plugin, execute the following command:

1
npm i --save gitment

Register OAuth Application

Click here to register a new OAuth application:

  • For “Application name,” you can enter anything.
  • For “Homepage URL” and “Authorization callback URL,” enter the URL of your website’s homepage.
  • “Application description” is optional; you can describe the purpose of this application.

After filling in the information, click “Register application.” The page will display “Client ID” and “Client Secret” for later login.

Configuration

Open the Next theme’s configuration file .\themes\next\_config.yml and search for gitalk. Set enable to true and configure the relevant options:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Gitalk
# Demo: https://gitalk.github.io
gitalk:
  enable: true
  github_id: YourGitHubUsername # GitHub repo owner
  repo: YourBlogRepositoryName # Repository name to store issues
  client_id: YourGeneratedID # GitHub Application Client ID
  client_secret: YourGeneratedSecret # GitHub Application Client Secret
  admin_user: YourGitHubUsername # GitHub repo owner and collaborators; only they can initialize GitHub issues
  distraction_free_mode: true # Facebook-like distraction-free mode
  # Gitalk's display language depends on the user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en, es-ES, fr, ru, zh-CN, zh-TW
  language:

Initialization

After deploying to GitHub Pages, go to the bottom of the article where you want to enable comments. Initialize Gitalk and log in with your GitHub account to start commenting.

Note

Some articles may encounter an error like Error: Validation Failed when initializing comments (it’s strange, but using a VPN sometimes solves the issue). This error is caused by label length overflow in the issue. Chinese characters are encoded, which can exceed the allowed limit. However, GitHub issues do support Chinese labels. To solve this issue, open C:\Users\oo\OneDrive\Hexo\themes\next\layout\_third-party\comments\gitment.swig and search for id. Modify the value after it to decodeURI(window.location.pathname).

Please note that Gitalk should work seamlessly without needing this modification.

Customizing the 404 Page

Since your website is hosted on GitHub, the default 404 page is provided by GitHub. It may not match your theme, and it lacks any guidance for visitors. To address this, you can create a custom 404 page that matches your theme. Here’s how to do it:

Create the Page

You can create a custom 404 page by writing HTML code yourself, but for simplicity, you can use an existing template. While searching on the internet, I found a few nice 404 templates on 404.life. I chose the acg-moe template. Download the template’s source code and extract it.

Configuration

Add Front Matter

First, copy the index.html file from the extracted template to the .\source folder at the root of your blog directory. Rename it to 404.html. Then, open the 404.html file and add the following front matter at the top:

1
2
3
layout: false
title: "404"
---

Head Section

Next, let’s configure the <head> section of the HTML content. Here’s an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=11" id="mixia_vpid">

  <title>Page Eaten by Chewie ╭( `∀´ )╯</title>
  <meta name=keywords content="404">
  <meta name=description content="An architectural dog who wants to become a programmer">
  <link rel="icon" href="https://siriusq.top/images/favicon.png">  
  <link rel="stylesheet" href="https://siriusq.top/lib/font-awesome/css/font-awesome.min.css?v=4.6.2">
  <link rel="stylesheet" href="https://siriusq.top/404/404.css">
  <script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>
</head>
  • In <title>Page Eaten by Chewie ╭( ∀´ )╯</title>, you can set the title of the web page, which will be displayed in the browser’s title bar.
  • In <link rel="icon" href="https://siriusq.top/images/favicon.png">, you can set the URL of your website’s icon.

JavaScript and CSS Files

In the <head> section of your custom 404 page (404.html), several <link rel tags need to be customized. The original source code points to the author’s website, but for consistency, it’s better to host these files on your own website. Here’s what you need to do:

First, create a directory named 404 inside the .\source directory. In this new directory, create two files: 404.css and 404.js. Copy and paste the following code into each file and save them. Then, replace the href= links with your own website links. Only replace the part before /404/:

CSS (404.css):

1
2
/* Your custom CSS styles for the 404 page */
/* ... */

JavaScript (404.js):

1
2
// Your custom JavaScript code for the 404 page
// ...

After making these changes, your custom 404 page will reference the CSS and JavaScript files hosted on your own website, ensuring consistency and improving performance.

Body Section

Here is my configuration.

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
<body>

    <span class="mobile btn-mobile-menu">
        <i class="fa fa-list btn-mobile-menu__icon"></i>
        <i class="fa fa-angle-up btn-mobile-close__icon hidden"></i>
    </span>
	</script><header class="panel-cover" style="background-image:url(https://siriusq.top/images/background.jpg)">
	
  <div class="panel-main">

    <div class="panel-main__inner panel-inverted">
    <div class="panel-main__content">
	    
        <a href="https://siriusq.top/" title="Back to Siriusq"><img src="https://siriusq.top/images/avatar.gif" width="150" alt="Noisky logo" class="panel-cover__logo logo"></a>
            
     
        <hr class="panel-cover__divider">
        <p class="panel-cover__description">Sorry, the page you're looking for has been eaten by Chewie.╭( `∀´ )╯</p>
        <hr class="panel-cover__divider panel-cover__divider--secondary">
        
        <p class="panel-cover__description">Maybe you can find something on the home page.</p>


	<p class="footer">Siriusq © 2019 </p> 
		
        <div class="navigation-wrapper">
          <div>
            <nav class="cover-navigation cover-navigation--primary">
              <ul class="navigation">
                <li class="navigation__item"><a href="https://siriusq.top/" title="Visit the blog">Homepage</a></li>
                
                <li class="navigation__item"><a href="https://siriusq.top/tags/" title="Tags">Tags</a></li>
                  
                <li class="navigation__item"><a href="https://siriusq.top/categories/" title="Categories">Categories</a></li>

                <li class="navigation__item"><a href="https://siriusq.top/archives/" title="Archives">Archives</a></li>

                <li class="navigation__item"><a href="https://siriusq.top/about/" title="About">About</a></li>
              </ul>
            </nav>
          </div>
          
<div><nav class="cover-navigation navigation--social">
  <ul class="navigation">
  <!-- Github -->
  <li class="navigation__item">
    <a href="https://github.com/Siriusq" title="Github" target="_blank">
      <i class="social fa fa-github"></i>
    </a>
  </li>
  
  <!-- Email -->
  <li class="navigation__item">
    <a href="mailto:siriuskevin@foxmail.com" title="Email me">
      <i class="social fa fa-envelope"></i>
    </a>
  </li>
  </ul>
</nav>
</div>
        </div>
      </div>
    </div>    
  </div>
</header>
<script type="text/javascript" src="https://siriusq.top/404/404.js"></script>
<script type="text/javascript" src="https://siriusq.top/lib/jquery/index.js?v=2.1.3"></script>
</body>

  • In the <a href="https://siriusq.top/" title="Back to Siriusq"><img src="https://siriusq.top/images/avatar.gif" width="150" alt="Noisky logo" class="panel-cover__logo logo"></a> section, set your own avatar’s URL and the link to your website. You can also customize the avatar’s rotation if desired.

  • In the </script><header class="panel-cover" style="background-image:url(https://siriusq.top/images/background.jpg)"> section, you can set the background image of your webpage. The path to the image can be found by inspecting the webpage with F12 in your browser.

  • In the <p class="panel-cover__description">Sorry, the page you're looking for has been eaten by Chewie.</p> section, you can customize the two lines of text that appear.

  • In the <p class="footer">Siriusq © 2019 </p> section, you can customize the website’s footer.

  • The following <li class="navigation__item"><a href="https://siriusq.top/" title="Visit the blog">Homepage</a></li> items can be customized to create your navigation links. Set the label for the link between </a> tags, and set the link’s URL after href. The text displayed when hovering over the link can be set in the title attribute.

  • After <!-- Github -->, you can set your own GitHub link. Similarly, after <!-- Email -->, you can set your email link. Set the website URL after href, add a tooltip description in the title attribute, and customize the icon using <i class="social fa fa-github"></i> with the desired icon class.

Ending Section

In the ending section, you also need to replace the two JavaScript files with links from your own website. One is the earlier mentioned 404.js, and the other is the jQuery file from the theme. You should check your website for the correct link addresses. In my case, it’s https://siriusq.top/lib/jquery/index.js?v=2.1.3.

1
2
<script type="text/javascript" src="https://siriusq.top/404/404.js"></script>
<script type="text/javascript" src="https://siriusq.top/lib/jquery/index.js?v=2.1.3"></script>

Conclusion

That’s pretty much it. Beautifying your website can indeed be a big project.
201904121