当前用得最多的是next主题,那为什么用得多呢?当然是符合大多数人的审美。我使用的是next(v7.8.0),下载地址:theme-next/hexo-theme-next
1 基本设置
1.1 主题设置
打开博客根目录 Blog 文件夹,右键 Git Bash
,输入如下代码将next主题下载到目录 Blog/themes
:
git clone https://github.com/theme-next/hexo-theme-next themes/next
打开根目录下的 _config.yml
(称为站点配置文件),修改主题(注意冒号后都要有空格):
# 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
主题语言主要是看你的themes/next/language中的简体中文是 zh-CN 还是 zh-Hans:
next主题有四种,如下图依次为Muse、Mist、Pisces、Gemini(你可以每个设置一遍,确定一个喜欢的),这里选的是Gemini,打开目录 Blog/themes/next/
下的_config.yml(称为主题配置文件),只要将你选的主题前的#删除就行了:
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini # 选择的主题
温馨提示:注意区分 根目录 Blog 下的 _config.yml 和 Blog/themes/next/
下的_config.yml,搞混就找不到相应的配置
回到根目录打开 Git Bash
,输入如下三条命令:
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
1.2 设置菜单
打开主题配置文件即themes/next下的_config.yml,查找menu,将前面的#删除就行了:
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
“||”前面的是目标链接,后面的是图标名称,next使用的图标全是图标库 - Font Awesome 中文网 这一网站的,有想用的图标直接在fontawesome上面找图标的名称就行。resources 是我自己添加的。
新添加的菜单需要翻译对应的中文,打开 theme/next/languages/zh-CN.yml
,在 menu 下设置:
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
resources: 资源
search: 搜索
在根目录下打开 Git Bash
,输入如下代码:
hexo new page "categories"
hexo new page "tags"
hexo new page "about"
hexo new page "resources"
此时在根目录的sources文件夹下会生成categories、tags、about、resources四个文件,每个文件中有一个 index.md
文件,修改内容分别如下:
---
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
---
注:如果有启用评论,默认页面带有评论。需要关闭的话,添加字段 comments 并将值设置为false。
1.3 设置建站时间
打开主题配置文件即 themes/next
下的_config.yml,查找since:
footer:
# Specify the date when the site was setup. If not defined, current year will be used.
since: 2023-06 # 建站时间
1.4 设置头像
打开主题配置文件即 themes/next
下的 _config.yml
,查找avatar,url后是图片的链接地址:
# 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 网站图标设置
我是在这个网站找的图标,免费的图标素材网站:Easyicon
下载16x16和32x32的图标后,打开主题配置文件,查找favicon,只要修改small和medium为你的图标路径:
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 设置动态背景
1. canvas nest 风格
在themes/next目录下打开Git Bash,输入:
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
打开主题配置文件即 themes/next 下的 _config.yml,找到 canvas-nest,将enable:false
改为true:(如果找不到 canvas-nest,可能是文件修改了,试试将下面的代码复制粘贴到 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风格
在themes/next目录下打开Git Bash,输入:
git clone https://github.com/theme-next/theme-next-three source/lib/three
打开主题配置文件即themes/next下的_config.yml,找到three,这里有三种风格,可以试一下看看喜欢哪种风格,直接将false改为true就行了,我已经选了canvas-nest,就没有选这种风格:
# 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 添加顶部加载条
在themes/next目录下打开Git Bash,输入:
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
打开主题配置文件即themes/next下的_config.yml,找到pace,将enable:false改为true,你还可以选择类型(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 设置侧边栏显示效果
打开主题配置文件即themes/next下的_config.yml,找到Sidebar Settings,设置:
sidebar:
# Sidebar Position. #设置侧边栏位置
position: left
#position: right
# - post 默认显示模式
# - always 一直显示
# - hide 初始隐藏
# - remove 移除侧边栏
display: post
1.9 侧边栏推荐阅读
打开主题配置文件即themes/next下的_config.yml,搜索links(里面写你想要的链接):
# 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 添加社交链接
打开主题配置文件即themes/next下的_config.yml,搜索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:qxie8888@gmail.com || fa fa-envelope
CSDN: https://blog.csdn.net/xq151750111 || fa fa-codiepie
“||”前面的是链接,后面的是 FontAwesome 图标名称。
1.11 设置博文内链接为蓝色
打开themes/next/source/css/_common/components/post/post.styl文件,将下面的代码复制到文件最后:
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}
1.12 显示文章字数和阅读时长
从根目录Blog打开Git Bash,执行下面的命令,安装插件:
npm install hexo-wordcount --save
然后打开站点配置文件,在文件末尾加上下面的代码:
symbols_count_time:
symbols: true # 文章字数统计
time: true # 文章阅读时长
total_symbols: true # 站点总字数统计
total_time: true # 站点总阅读时长
exclude_codeblock: false # 排除代码字数统计
1.13 文章末尾添加版权说明
查找主题配置文件themes/next/_config.yml中的creative_commons:
creative_commons:
license: by-nc-sa
sidebar: false
post: true # 将false改为true即可显示版权信息
language:
1.14 添加评论
针对 Hexo 静态博客的 nexT主题 继承了多种评论系统,此处介绍两种相对好用的评论系统: Valine、Gitment 和 Utterances 。
1. Valine 评论系统
Valine 评论系统,此款系统不需要登录,无后端,nexT 主题最新也已经支持安装。
因为 Valine 是基于 LeanCloud 系统的,所以先在 LeanCloud 中注册账号,LeanCloud官网:https://console.leancloud.cn/login,注册登陆后,访问控制台,创建应用,选择开发版,确定创建,如下图
创建成功,生成了 AppID 和 AppKey,在控制台—应用凭证 查看,如下图
在主题的配置文件_config.yml中,修改关于 valine 的配置,如下图
上述设置仅作参考!最后,重新部署即可。
2. Gitment 评论系统
Gitment 评论系统是基于 Github 开发的,是依靠 GitHub Issues 的评论系统,Next 主题最新也已经支持安装。
安装前提:更新 Next 主题(5.1.2 主题及以上)
1. 注册 OAuth application
- 在 github 中进行注册,进入 https://github.com/settings/profile
- 点击左侧 Developer settings
- 点击左侧Oauth Apps
- 点击 Register a new application
注册完成之后,得到:Client ID 和 Client Secret
2. 新建存放博客评论仓库
在 github 中建一个项目,专门用来存储你的博客评论
3. 配置 nexT 主题文件
编辑主题配置文件:themes\ next主题 \ _config.yml
,找到有关 gitment 的设置,如下
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. 初始化
在设置完成后,Hexo重新部署。每篇文章都要点击初始化评论按钮。
5. 管理
评论显示在新建存放评论的仓库中的 issue 中。
6. 关闭
可以单独关闭某个页面的评论,在页面的 Front-matter 中添加 comments 字段,设为 false。比如标签页不想要评论,则在标签页面中做如下设置
---
title: xxxxxxxxx
date: 2023-06-06 17:05:24
type: "tags"
comments: false
---
3. Utterances 评论系统
这里主要介绍基于 Github Issues 的轻量级博客评论系统 Utterances。主要介绍 Utterances 的配置与使用
Utterances是一个基于Github Issues的轻量级评论系统,可用于博客、Wiki等。它具有以下优点:
- 开源
- 不追踪,无广告,始终免费
- 所有的数据都存储在Github Issues
- 样式基于Github的Primer设计语言
- 夜间模式
- 轻量级;原生TypeScript;在“常青树”浏览器上不使用网络字体,JavaScript框架或Polyfill。
快速上手
- 在 GitHub 上新建一个公开仓库(Repository),安装 Utterances GitHub App 至该仓库。
- 在你的网页需要插入 Utterances 评论的位置,粘贴以下代码(username,reponame 分别修改为你的 GitHub 用户名,仓库名)。
<script src="https://utteranc.es/client.js"
repo="username/reponame"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>
- 刷新网页就可以看到Utterances评论框了。
了解更多配置,请移步——自托管Utterances教程:基于Github Issues的轻量级博客评论系统
1.15 修改永久链接的默认格式
如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 SEO,且 gitment 评论对中文链接也不支持。
在 Hexo 根目录下的 _config.yml 文件采用初始设置。这里因为用“年月日”会让文章链接的层次太深,所以我用"article"代替:
# permalink: :year/:month/:day/:title/
permalink: article/:title.html
permalink_defaults:
生成的文章链接就是 (标题为“我的个人博客”):https://[你的网站域名]/article/我的个人博客.html
链接中出现中文显然不太好,所以下面给出三种替代中的方法。
1. 安装插件方法一(推荐)
在 Hexo 根目录下使用 git bash
执行命令:
npm install hexo-abbrlink --save
在 Hexo 根目录下的 _config.yml
文件,修改为如下配置:
# 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 #开始部署
再打开网站的文件就可以看到效果————https://[你的网站域名]/article/60762.html
(其中60762就是随机生成的)
2. 安装插件方法二
中文链接转拼音,在 Hexo 根目录下使用 git bash
执行命令:
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml 文件中,修改以下的配置项:
permalink: article/:title.html
permalink_pinyin:
enable: true
separator: '-' # default: '-'
permalink_defaults:
然后在 git bash
按顺序运行如下命令:
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
再打开网站的文件就可以看到效果。https://[你的网站域名]/article/wo-de-ge-ren-bo-ke.html
(标题为“我的个人博客”)
3. 采用urlname
在写每篇md文章的时候,在 Front-matter 里加上urlname:
---
title: Next 主题介绍
date: 2023-06-06 15:31:11
urlname: 2023060601
---
在 Hexo 根目录下的 _config.yml 文件中,修改以下的配置项:
permalink: article/:urlname.html # urlname值文章里必须填写,格式2023060601
permalink_defaults:
然后在 git bash
按顺序运行如下命令:
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
再打开网站的文件就可以看到效果。https://[你的网站域名]/article/2023060601.html
小结
第一种方法是我试过中最好的;第三次之,因为每次都要手动加上urlname;而第二种,当文章的中文标题名字过长时,效果并不好。