The next theme is currently used the most, so why is it used so much? Of course it is in line with most people's aesthetics. I am using next (v7.8.0), download address: theme-next/hexo-theme-next
1 Basic settings
1.1 Theme settings
Open the Blog folder in the blog root directory, right-click Git Bash, enter the following code to download the next theme to the directory Blog/themes:
git clone https://github.com/theme-next/hexo-theme-next themes/next
Open _config.yml in the root directory (called the site configuration file), modify the theme (note that there must be a space after the colon):
# Site
title: CarpeDiem's Blog # 标题
subtitle: '虽不能至，心向往之'
description: '不闻不若闻之，闻之不若见之，见之不若知之，知之不若行之。' # 简介或格言
keywords: "Python, Linux, Java, 算法, 人工智能"
author: Carpe Diem # 作者
language: zh-CN # 主题语言 en/zh-CN
timezone: Asia/Shanghai # 中国的时区
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-bamboo # 主体修改为 next
The theme language mainly depends on whether the simplified Chinese in your themes/next/language is zh-CN or zh-Hans:
There are four types of Next theme, as shown in the figure below are MUSE, Mist, PISCES, Gemini (you can set it once every settings, determine one of the favorite), you choose Gemini here, open the directory Blog/themes/next/
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini # 选择的主题
Warm reminder: Pay attention to distinguish between _config.yml under the root directory Blog and _config.yml under Blog/themes/next/. If you get confused, you will not be able to find the corresponding configuration
Return to the root directory to open Git Bash and enter the following three commands:
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
1.2 Setting menu
Open the theme configuration file, which is _config.yml under themes/next, search for menu, and delete the # in front of it:
menu:
home: / || home #首页
archives: /archives/ || archive #归档
categories: /categories/ || th #分类
tags: /tags/ || tags #标签
about: /about/ || user #关于
resources: /resources/ || download #资源
# schedule: /schedule/ || calendar #日历
# sitemap: /sitemap.xml || sitemap #站点地图，供搜索引擎爬取
# commonweal: /404/ || heartbeat #腾讯公益404
“||” is preceded by the target link, followed by the icon name, and all icons used in next areIcon library - Font Awesome Chinese website For this website, if you have an icon you want to use, just look for the name of the icon on fontawesome. resources were added by myself.
The newly added menu needs to be translated into Chinese. Open theme/next/languages/zh-CN.yml and set it under menu:
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
resources: 资源
search: 搜索
Open Git Bash in the root directory and enter the following code:
hexo new page "categories"
hexo new page "tags"
hexo new page "about"
hexo new page "resources"
At this time, four files, categories, tags, about, and resources, will be generated in the sources folder of the root directory. Each file has one index.md file. The modification contents are as follows:
---
title: 分类
date: 2020-02-10 22:07:08
type: "categories"
comments: false
---
---
title: 标签
date: 2020-02-10 22:07:08
type: "tags"
comments: false
---
---
title: 关于
date: 2020-02-10 22:07:08
type: "about"
comments: false
---
---
title: 资源
date: 2020-02-10 22:07:08
type: "resources"
comments: false
---
Note: If comments are enabled, the default page will have comments. If it needs to be turned off, add the field comments and set the value to false.
1.3 Set the website building time
Open the theme configuration file, which is _config.yml under themes/next, and search for since:
footer:
# Specify the date when the site was setup. If not defined, current year will be used.
since: 2023-06 # 建站时间
1.4 Set avatar
Open the theme configuration file, that is, under themes/next, search for avatar, and after the url is the link address of the image: _config.yml
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /images/avatar.gif #图片的位置，也可以是http://xxx.com/avatar.png
# If true, the avatar will be dispalyed in circle.
rounded: true #头像展示在圈里
# If true, the avatar will be rotated with the cursor.
rotated: false #头像随光标旋转
1.5 Website icon setting
I found the icon on this website, a free icon material website:Easyicon
After downloading the 16x16 and 32x32 icons, open the theme configuration file, find the favicon, and just modify small and medium to your icon paths:
favicon:
small: /images/favicon-16x16.png
medium: /images/favicon-32x32.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
1.6 Set dynamic background
1. canvas nest style
Open Git Bash in the themes/next directory and enter:
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
Open the theme configuration file, which is _config.yml under themes/next, find canvas-nest, and change enable：false to true: (If canvas-nest cannot be found, it may be The file has been modified, try copying and pasting the following code into themes/next)
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
enable: true
onmobile: true # Display on mobile or not
color: "0,0,255" # RGB values, use `,` to separate
opacity: 0.5 # The opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # The number of lines
2. JavaScript 3D library style
Open Git Bash in the themes/next directory and enter:
git clone https://github.com/theme-next/theme-next-three source/lib/three
Open the theme configuration file, which is _config.yml under themes/next, and find three. There are three styles here. You can try it to see which style you like. Just change false to true. I have selected canvas-nest. I didn’t choose this style:
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
enable: true
three_waves: false
canvas_lines: false
canvas_sphere: false
1.7 Add top loading bar
Open Git Bash in the themes/next directory and enter:
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
Open the theme configuration file, which is _config.yml under themes/next, find pace, change enable: false to true, you can also select the type (theme):
pace:
enable: true
# Themes list:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
theme: minimal
1.8 Set the sidebar display effect
Open the theme configuration file, which is _config.yml under themes/next, find Sidebar Settings, and set:
sidebar:
# Sidebar Position. #设置侧边栏位置
position: left
#position: right
# - post 默认显示模式
# - always 一直显示
# - hide 初始隐藏
# - remove 移除侧边栏
display: post
1.9 Recommended reading in the sidebar
Open the theme configuration file, which is _config.yml under themes/next, and search for links (write the link you want in it):
# Blog rolls
links_settings:
icon: fa fa-link
title: 推荐网站 # 修改名称
# Available values: block | inline
layout: block
links:
#Title: http://yoursite.com
菜鸟教程: https://www.runoob.com/
C语言中文网: http://c.biancheng.net/sitemap/
CS自学指南: https://csdiy.wiki/
Road To Coding: https://www.r2coding.com/#/
计算机专业学习路线: https://hackway.org/docs/cs/intro
鱼C论坛: https://fishc.com.cn
1.10 Add social links
Open the theme configuration file, which is _config.yml under themes/next, and search for social:
# 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/molimi || fab fa-github
E-Mail: mailto:[email protected] || fa fa-envelope
CSDN: https://blog.csdn.net/xq151750111 || fa fa-codiepie
"||" is preceded by the link, and followed by the FontAwesome icon name.
1.11 Set the link in the blog post to be blue
Open the themes/next/source/css/_common/components/post/post.styl file and copy the following code to the end of the file:
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}
1.12 Display article word count and reading time
Open Git Bash from the root directory of Blog, execute the following command to install the plug-in:
npm install hexo-wordcount --save
Then open the site configuration file and add the following code at the end of the file:
symbols_count_time:
symbols: true # 文章字数统计
time: true # 文章阅读时长
total_symbols: true # 站点总字数统计
total_time: true # 站点总阅读时长
exclude_codeblock: false # 排除代码字数统计
1.13 Add a copyright statement at the end of the article
Find creative_commons in the theme configuration file themes/next/_config.yml:
creative_commons:
license: by-nc-sa
sidebar: false
post: true # 将false改为true即可显示版权信息
language:
1.14 Add a comment
The nexT theme for Hexo static blog inherits a variety of comment systems. Here are two relatively easy-to-use comment systems: Valine, Gitment and Utterances.
1. Valine comment system
Valine comment system, this system does not require login, no backend, and the latest nextT theme also supports installation.
Because Valine is based on the LeanCloud system, you must first register an account in LeanCloud. LeanCloud official website:https://console.leancloud.cn/login, after registering and logging in, access the console, create an application, select the development version, and confirm creation, as shown below
The creation is successful, AppID and AppKey are generated, view them in the console - Application Credentials, as shown below
In the theme’s configuration file _config.yml, modify the configuration about valine, as shown below
The above settings are for reference only! Finally, just redeploy.
2. Gitment comment system
The Gitment comment system is developed based on Github and relies on the comment system of GitHub Issues. The latest Next theme also supports installation.
Installation prerequisite: Update Next theme (5.1.2 theme and above)
1. Register OAuth application
- Register in github and enter https://github.com/settings/profile
- Click on Developer settings on the left
- Click Oauth Apps on the left
- Click Register a new application
After registration is completed, you will get: Client ID and Client Secret
2. Create a new warehouse for storing blog comments
Create a project in github specifically to store your blog comments
3. Configure nextT theme file
Edit the theme configuration file:themes\ next主题 \ _config.yml and find the settings related to gitment, as follows
gitment:
enable: true
mint: true
count: true
lazy: false #评论懒加载，如果true，则默认不展示评论，点击按钮查看评论
cleanly: false
language:
github_user: #github名称
github_repo: BlogComments #上一步新建存放评论的仓库名
client_id: b8bad0exxxx #上面注册 OAuth Application 的 Client ID
client_secret: bcee560xxxxxx #上面注册 OAuth Application 申请的 Client Secret
proxy_gateway:
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint
4. Initialization
After the setup is complete, Hexo redeploys. Click the Initialize Comments button for each article.
5. Management
Comments are displayed in the issue in the newly created repository where the comments are stored.
6. Close
You can turn off comments on a page individually by adding the comments field to the Front-matter of the page and setting it to false. For example, if the tag page does not want comments, then make the following settings in the tag page
---
title: xxxxxxxxx
date: 2023-06-06 17:05:24
type: "tags"
comments: false
---
3. Utterances comment system
Here we mainly introduce Utterances, a lightweight blog comment system based on Github Issues. Mainly introduces the configuration and use of Utterances
Utterances is a lightweight comment system based on Github Issues, which can be used for blogs, wikis, etc. It has the following advantages:
- Open source
- No tracking, no ads, always free
- All data is stored in Github Issues
- Styles based on Github’s Primer design language
- Night mode
- Lightweight; native TypeScript; uses no web fonts, JavaScript frameworks or polyfills on "evergreen" browsers.
Get started quickly
- Create a new public repository (Repository) on GitHub and install Utterances GitHub App to the repository.
- Paste the following code where you want to insert Utterances comments on your web page (change username and reponame to your GitHub username and warehouse name respectively).
<script src="https://utteranc.es/client.js"
repo="username/reponame"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>
- Refresh the web page and you will see the Utterances comment box.
For more configuration, please go to——Self-hosted Utterances tutorial: lightweight blog comment system based on Github Issues
1.15 Modify the default format of permanent links
If your article name is in Chinese, the permanent link generated by Hexo by default will also be in Chinese, which is not conducive to SEO, and gitment comments do not support Chinese links.
The _config.yml file in the Hexo root directory adopts the initial settings. Because using "year, month, day" here will make the article link too deep, I use "article" instead:
# permalink: :year/:month/:day/:title/
permalink: article/:title.html
permalink_defaults:
The generated article link is (titled "My Personal Blog"):https://[你的网站域名]/article/我的个人博客.html
It is obviously not good to have Chinese characters in the link, so here are three alternative methods.
1. Install plug-in method one (recommended)
Use git bash in the Hexo root directory to execute the command:
npm install hexo-abbrlink --save
_config.yml file in the Hexo root directory, modify it to the following configuration:
# permalink: :year/:month/:day/:title/
# permalink: article/:title/
permalink: article/:abbrlink.html
abbrlink:
alg: crc32 # 算法：crc16(default) and crc32
rep: hex # 进制：dec(default) and hex
permalink_defaults:
git bash
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
Open the website file and you can see the effect————https://[你的网站域名]/article/60762.html (60762 of them are randomly generated)
2. Install plug-in method 2
Convert Chinese link to Pinyin, use git bash in the Hexo root directory to execute the command:
npm i hexo-permalink-pinyin --save
In the _config.yml file in the Hexo root directory, modify the following configuration items:
permalink: article/:title.html
permalink_pinyin:
enable: true
separator: '-' # default: '-'
permalink_defaults:
git bash
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
Open the website file again to see the effect. https://[你的网站域名]/article/wo-de-ge-ren-bo-ke.html (titled "My Personal Blog")
3. Use urlname
When writing each md article, add urlname to Front-matter:
---
title: Next 主题介绍
date: 2023-06-06 15:31:11
urlname: 2023060601
---
In the _config.yml file in the Hexo root directory, modify the following configuration items:
permalink: article/:urlname.html # urlname值文章里必须填写，格式2023060601
permalink_defaults:
git bash
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
You can see the effect by opening the website file again.https://[你的网站域名]/article/2023060601.html
summary
The first method is the best I have tried; the third method is because I have to manually add the urlname every time; and the second method, when the Chinese title name of the article is too long, the effect is not good.