Hexo博客之NexT配置教程

介绍

  • 在看本篇之前,请确保你已成功搭建好个人博客。如没有,请移步:[博客搭建教程]
  • 该教程中的所有链接均指向为官方链接,望知悉。
  • 该教程为我上一篇教程的后续教程,即 Hexo 的主题配置及修改。
  • 该教程主要是针对 NexT 主题,其他主题略有出入,如有需要请自行百度。

一、注意事项

  • 所有配置内容在冒号后边均有一个空格(划重点!!!)

  • 请区分好这两个概念,以后会以这两个名词来代指配置文件
    配置文件区分

  • 如果你修改某些配置后,没有效果,请先执行清理缓存操作,再开本地服务

  • (2021.06.03更新)Next 主题在 7.3.0 开始,官方推荐采用数据文件将配置与主题分离,这样我们可以在不修改主题源码的同时完成选项配置、自定义布局、自定义样式,便于后续 NexT 版本更新。请点击这里进行设置后在进行基础选项的配置。

二、常用指令

1.创建文章或页面

  • hexo new [layout] <title> ,layout 属性如下:
    post:新建文章,存放路径于 source/_posts
    page:新建页面,如404,分类等,存放路径于 source/
    draft:新建草稿,存放路径于 source/_drafts

  • 上面的 <title> 属性是博文 Markdown 文件的名字,一般也会自动生成为博客文章的标题,也是博文链接的后缀(如 https://www.wrysmile.cn/2020/03/22/hexo-tutorial/ 中的hexo-tutorial

  • 新建文章可以使用简写命令,如本文的创建即可以用 hexo n Hexo博客之NexT配置教程

  • 新建草稿也可以用另一个命令 hexo publish [layout] <title>

2.上传仓库

  • hexo clean 清理缓存文件——db.json和已生成的静态文件——public

  • hexo g 生成网站静态文件到默认设置的 public 文件夹

  • hexo s 启动本地服务器,用于预览主题。默认地址:http://localhost:4000/

  • hexo d 自动生成网站静态文件,并部署到设定的仓库

三、相关链接

  • Next主题:你可以去 NexT 官网下载,官网有下载链接、下载方法以及安装方法。查看链接

  • Next插件:这里总结了 Next 部分插件地址。查看链接

  • Next更新:该地址总结了 Next 各版本更新日志。查看链接

四、基础配置

1.切换主题

  • 将解压好的主题放入数据目录下的 themes 文件夹下,并改名为 next

  • 打开 站点配置文件 ,找到 theme 字段,将其改为 next

1
theme: next          //直接把后边修改为主题名就行

2.选择 Scheme

  • Scheme 这里可以理解为网站的整体布局或方案

  • NexT 内置了四种样式,在 主题配置文件 中搜索 Schemes,然后将下面四个中任意一个前面的注释符号"#"去掉即可

1
2
3
4
5
# Schemes
#scheme: Muse //默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
#scheme: Mist //Muse 的紧凑版本,整洁有序的单栏外观
#scheme: Pisces //双栏 Scheme,小家碧玉似的清新
#scheme: Gemini //Pisces的宽松版本,看起来比较更美观

3.设置网站语言

  • 站点配置文件 中搜索 language,在后边填入你想设置的语言即可
    语言

  • 新版本中官方将中文的语言命名由 zh-Hans 改为了 zh-CN

4.菜单设置

菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标, Font Awesome 提供了 600+ 的图标,可以满足绝大多数的场景,同时无须担心在 Retina 屏幕下图标模糊的问题。

  • 主题配置文件 中搜 menu,需要开启哪个选项就把其前面的注释符号"#"去掉即可

1
2
3
4
5
6
7
8
9
menu:
home: / || home //首页
#about: /about/ || user //关于
#tags: /tags/ || tags //标签
#categories: /categories/ || th //分类
archives: /archives/ || archive //归档
#schedule: /schedule/ || calendar //日程表
#sitemap: /sitemap.xml || sitemap //站点地图
#commonweal: /404/ || heartbeat //公益404
  • 而图标按以下内容设置,需要用哪个就去掉其前面的注释符号"#"即可

1
2
3
4
5
6
7
8
9
10
11
menu_icons:
enable: true
#Icon Mapping
#home: home
#about: user
#categories: th
#tags: tags
#archives: archive
#schedule: calendar
#sitemap: sitemap
#commonweal: heartbeat
  • 如需对这些页面进行配置,请点击这里跳转到进阶配置

5.开启侧栏功能

  • 主题配置文件 中搜 sidebar,position 是指侧栏的位置,display 是指侧栏显示的时机。

1
2
3
4
5
6
7
8
9
sidebar:
#position: left //靠左放置
#position: right //靠右放置(只针对于Pisces、Gemini这两个Scheme)

//(display只针对于Muse、Mist这两个Scheme)
#display: post //默认行为,在文章页面(拥有目录列表)时显示
#display: always //在所有页面中都显示
#display: hide //在所有页面中都隐藏(可以手动展开)
#display: remove //完全移除

6.修改头像

  • 主题配置文件 中搜 avatar,将值设置为头像链接地址
    头像修改

7.修改站点标题、副标题、昵称、描述等信息

  • 站点配置文件 中搜 Site,按需修改内容即可

1
2
3
4
5
6
7
8
# Site
title: //标题
subtitle: //副标题
description: //站点描述
keywords: //关键字
author: //作者
language: //语言
timezone: //时区

8.开启友链

  • 主题配置文件 中搜 Blog rolls,修改相应参数即可

1
2
3
4
5
6
links_icon: link               //友链的图标
links_title: Links //友链的标题
links_layout: block //友链的布局
#links_layout: inline
links:
Title: http://example.com/ //显示名称:网址链接
  • 新版更新如下:

1
2
3
4
5
6
7
8
# Blog rolls
links_settings:
icon: fa fa-globe
title: 标题
# Available values: block | inline
layout: block
links:
#Title: https://example.com

9.开启分享功能

(1).百度分享

  • 主题配置文件 中搜 baidushare,将前边的注释符号去掉,按下边代码修改即可开启

1
2
3
#baidushare:
type: slide
baidushare: true
  • 新版已移除

(2).NeedMoreShare2

  • 主题配置文件 中搜 needmoreshare,修改相应参数为 true 即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
needmoreshare2:
enable: false //这个指全局开关
postbottom: //在文章底部显示
enable: true
options:
iconStyle: default //这里指图标风格
boxForm: horizontal //这里指分享框的样式
position: bottomCenter //这里位置可以根据上边注释进行自己调试
networks: Weibo,Wechat,QQZone //这里需要哪些网站根据上边注释自己添加
float: //在博客中漂浮显示
enable: false
options:
iconStyle: default
boxForm: horizontal
position: middleRight
networks: Weibo,Wechat,QQZone
  • 新版已移除

(3).jiathis

  • 未收录

(4).duoshuo_share

  • 未收录

10.开启"回到顶部"百分比显示

  • 主题配置文件 中搜 b2t,修改相应参数为 true 即可

1
2
b2t: true              //是否在侧栏中开启回到顶部开关
scrollpercent: true //是否以百分比形式显示
  • 新版更新如下:

1
2
3
4
5
6
7
# 回到顶部按钮设置
back2top:
enable: true
# Back to top in sidebar.
sidebar: true
# Scroll percent label in b2t button.
scrollpercent: true

11.开启文章内打赏功能

  • 主题配置文件 中搜 reward_comment,去掉前面注释符号并修改相应内容参数即可

1
2
3
4
#reward_comment: Donate comment here  //打赏内容显示
#wechatpay: /images/wechatpay.jpg //微信打赏图片/地址
#alipay: /images/alipay.jpg //支付宝打赏图片/地址
#bitcoin: /images/bitcoin.png //比特币打赏图片/地址
  • 新版更新如下:

1
2
3
4
5
6
7
8
9
10
11
12
# Donate (Sponsor) settings
# Front-matter variable (unsupport animation).
reward_settings:
# If true, a donate button will be displayed in every article by default.
enable: true
animation: true
comment: 介绍
reward:
wechatpay: /images/wechatpay.png
alipay: /images/alipay.png
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png

12.开启侧栏社交功能

  • 主题配置文件 中搜 social,需要哪个去掉哪个前面的注释符号,并修改网址为自己的网址

1
2
3
4
5
6
7
8
9
10
11
#social:
#GitHub: https://github.com/yourname || github
#E-Mail: mailto:yourname@gmail.com || envelope
#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
  • 新版更新如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
#GitHub: https://github.com/yourname || fab fa-github
#E-Mail: mailto:yourname@gmail.com || fa fa-envelope
#weibo: https://weibo.com/u/yoururl || fab fa-weibo
#Google: https://plus.google.com/yourname || fab fa-google
#Twitter: https://twitter.com/yourname || fab fa-twitter
#FB Page: https://www.facebook.com/yourname || fab fa-facebook
#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
#YouTube: https://youtube.com/yourname || fab fa-youtube
#Instagram: https://instagram.com/yourname || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype
social_icons:
enable: true
icons_only: false
transition: false

13.博客主页开启"阅读全文"功能

  • 博客主页默认显示所有文章内容,看起来有些冗杂,故开启"阅读全文"开关可以进行适当控制

  • 这里有三种方法,自行选取适合自己的

  • 第一种最为推荐,可以自己控制显示多少;第二种也推荐,可以自行更改显示内容;第三种不推荐,这种排版显示不美观,但可以进行全局控制。

(1).文章截断

  • <!-- more --> 语法,在文章开头适当位置插入 <!-- more --> 即可进行首页内容控制

(2).描述

  • 在文章中的 front-matter 中添加 description ,并插入你想要显示的内容摘要即可

1
2
3
4
5
title: Hello world
data: 2019-02-02 20:33:56
tags: 标签
categories: 分类
description: //这里填写对该篇文章的描述,该描述仅在首页显示,进入文章后不显示

(3).主题自带

  • 主题配置文件 中搜 auto_excerpt,对相应参数进行修改即可

1
2
3
auto_excerpt:     //自动形成摘要
enable: false //选择是否开启
length: 150 //对文章开头的截取长度,默认150个字符
  • 新版更新如下:

1
2
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

14.修改网站图标

  • 找一些自己心仪的图标,并下载 16x16/32x32 且格式为 png 的图标图片

  • 将这两张图片分别改名为 favicon-16x16.png favicon-32x32.png并放置在 themes\next\source\images\ 目录下

  • 主题配置文件 中搜 favicon,修改相应的图片即可

15.开启网站顶部刷新进度加载条

  • 主题配置文件 中搜 pace,对相应参数进行修改,需要哪种样式就去掉前面的注释符号即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
#For example
pace_theme: pace-theme-flash
#pace_theme: pace-theme-minimal
  • 新版已移除,只有一种默认进度条,如下:

1
2
3
4
5
# Progress bar in the top during page loading.
# For more information: https://github.com/rstacruz/nprogress
nprogress:
enable: true
spinner: false

16.开启网站动态背景效果

  • 主题配置文件 中搜 canvas_nest,之后的四行代码对应动态背景的配置,NexT 中内置了四种动态背景,对相应的参数进行修改即可

1
2
3
4
5
6
7
8
# Canvas-nest
canvas_nest: false
# three_waves
three_waves: false
# canvas_lines
canvas_lines: true
# canvas_sphere
canvas_sphere: false
  • 这里可以同时开启多个特效,但容易对网站造成相应的资源损耗,建议不要这样做

  • 新版已移除,解决办法请 移步 到这里进行查看

17.Front-matter 的设置

(1).什么是 Front-matter

  • 就是博文最上方以 --- 分隔的那部分,主要用来对文章进行一些修饰

(2).默认可以使用的参数

参数描述默认值
layout布局
title标题
date建立日期文件建立日期
updated更新日期文件更新日期
comments开启文章的评论功能true
tags标签(不适用于分页)多个标签用[,]分隔
categories分类(不适用于分页)
permalink覆盖文章网址

(3).怎么修改

  • 打开你 Hexo 的根目录,找到 scaffolds 文件中的 post.md文件,并用 VScode,记事本等软件打开

  • 需要添加哪些功能,按格式添加即可,注意每个参数后面都需要加一个空格

五、进阶配置

1.添加标签、分类、关于、归档等页面

  • 在基础配置中我们已经开启了这三个页面,但当你实际去点这些页面时,你会发现跳转页面显示404错误,这是因为我们还没有创建这些页面,通过下面指令来进行创建。

(1).创建

  • 在 hexo 的根目录打开 git 命令行

  • 分别输入以下命令即可:新建标签页——输入命令 hexo new page "tags"
    新建分类页——输入命令 hexo new page "categories"
    新建关于页——输入命令 hexo new page "about"
    新建归档页——输入命令 hexo new page "archives"

(2).修改内容

  • 在 Hexo 的根目录下找到 source 文件夹,新建好的页面就在里面,用 Markdown 编辑器打开 .md 文件进行编写,内容如下:

  • 标签页

1
2
3
title: 标签                 //这里为你在主页想要显示的文字
date: 2019-01-23 14:39:14 //这里为日期,默认,无需改动
type: "tags" //这里的类型一定要和基础配置中的菜单中的英文对应
  • 分类页

1
2
3
title: 分类                 //这里为你在主页想要显示的文字
date: 2019-01-23 14:45:41 //这里为日期,默认,无需改动
type: "categories" //这里的类型一定要和基础配置中的菜单中的英文对应
  • 关于页

1
2
3
4
title: 关于                 //这里为你在主页想要显示的文字
date: 2019-01-23 14:47:58 //这里为日期,默认,无需改动
type: "about" //这里的类型一定要和基础配置中的菜单中的英文对应
//关于页面三个横线下边可以写你关于自己的描述,语法为Markdown语法
  • 归档页

1
2
3
title: 归档                 //这里为你在主页想要显示的文字
date: 2019-01-23 14:50:49 //这里为日期,默认,无需改动
type: "archives" //这里的类型一定要和基础配置中的菜单中的英文对应

2.添加评论功能

(1).来必力评论

使用社交网站账户登录,免去注册过程。提高用户的参与和沟通意愿。管理/删除我的评论内容。提供管理页面,管理网站文章及评论内容。

  1. 去来必力官网注册账号。直达链接:查看链接

  2. 进入管理页面
    管理页面

  3. 选择 City 免费版本
    City版

  4. 选择一般网站,找到 uid 这一行,复制后面的值
    uid

  5. 主题配置文件 中搜 livere_uid,粘贴刚刚复制的 uid 的值即可
    粘贴uid

  6. 进入博客可以看到,来必力评论功能已添加
    评论功能

(2).Waline评论

  • 前面的来比力评论加载速度总是很慢,所以之后打算换为 Valine 评论,结果发现在 Next8.2.0 版本中移除了对 Valine 的支持,查阅后发现是因为安全问题,可查看这里进行了解

  • 根据上文可得知 Waline 解决了 Valine 安全问题

  • 配置方法可查看该链接进行配置

3.添加网页在线联系功能

  1. 去 DaoVoice 官网注册一个账号。直达链接:查看链接

    • 经读者2021.3.17日反映上面链接已经失效,现已更新请点击这里
  2. 在这里填入此邀请码——13e39436
    DaoVoice

  3. 找到这段中的 app_id,以后会用到
    app_id

  4. 找到 /themes/next/layout/_partials/head.swig 这个文件,在这两段中间插入这段代码
    插入位置

1
2
3
4
5
6
7
8
9
{% if theme.daovoice %}
<script>
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/2e5d695d.js","daovoice")
daovoice('init', {
app_id: "theme.daovoice_app_id"
});
daovoice('update');
</script>
{% endif %}

注意:将第三行后边的 //widget.daovoice.io/widget/2e5d695d.js 中js文件名改成自己的id就行(即2e5d695d改为自己的id);将第五行的 theme.daovoice_app_id 部分换为自己的id。

  • 新版 Next 优化:将以上代码直接粘贴到 source\_data\head.njk 中即可

  1. 主题配置文件 中添加以下代码

1
2
3
# Online contact
daovoice: true
daovoice_app_id: //这里填你刚才获得的 app_id
  1. 然后去 DaoVoice 控制台中的应用设置-聊天设置中进行个性化设置

4.设置 RSS 订阅

RSS 订阅是站点用来和其他站点之间共享内容的一种简易方式,即 Really Simple Syndication(简易信息聚合),使用这个东西就可以把自己写的博客推送给读者。

  1. 在 Git 中安装 hexo-generator-feed 插件命令为: npm install hexo-generator-feed --save

  2. 站点配置文件 中在最后一行写入以下代码

1
2
3
4
5
6
7
8
9
# Extensions
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
  1. 各参数的含义如下:

1
2
3
4
5
6
7
type:    RSS的类型(atom/rss2)
path: 文件路径,默认是atom.xml/rss2.xml
limit: 展示文章的数量,使用0或则false代表展示全部
hub:
content: 在RSS文件中是否包含内容 ,有3个值 true/false默认不填为false
content_limit: 指定内容的长度作为摘要,仅仅在上面content设置为false和没有自定义的描述出现
content_limit_delim: 上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志.在达到规定的内容长度之前最后出现的这个分隔符之前的内容,,防止从中间截断.
  1. 主题配置文件 中搜 rss,按以下设置即可开启 RSS 功能

1
rss: /atom.xml

5.添加网页标题崩溃欺骗搞怪特效

  • 该特效来自一位博主的教程。直达链接:查看链接

  • 旧版 Next 无法生效,新版 Next 将以下代码粘贴到 source\_data\footer.njk 文件中即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{# 崩溃欺骗 #}
<script type="text/javascript">
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/img/TEP.ico");
document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
</script>

6.添加动态二次元人物

  1. Git 端安装 hexo-helper-live2d 插件命令为: npm install --save hexo-helper-live2d

  2. 站点配置文件 中添加以下代码,详细配置请参考 文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
enable: true //控制开关
scriptFrom: local //默认
pluginRootPath: live2dw/ //插件在站点上的根目录(相对路径)
pluginJsPath: lib/ //脚本文件相对与插件根目录路径
pluginModelPath: assets/ //模型文件相对与插件根目录路径
tagMode: false //标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false //调试, 是否在控制台输出日志
model:
use: live2d-widget-model-koharu //使用的模型名字
display:
position: right //放置位置
width: 150 //调整宽度
height: 300 //调整高度
#hOffset: 0 //调整水平位置,如需要请去掉注释
#vOffset: -20 //调整垂直位置,如需要请去掉注释
mobile:
show: true //是否在手机端显示,为了不影响观看效果,建议关闭该选项
  1. 下载模型,模型名称可以去 这里 参考,命令为:npm install live2d-widget-model-koharu

live2d-widget-model-koharu 即为模型名字,只需修改这里就行,这个模型就是我当前博客正在使用的,请将目光移到左下角。

  1. 下载完成后,在 Hexo 的根目录新建一个名为 live2d_models 的文件夹,在 node_modules 文件夹中找到刚刚下载的 live2d 模型,并将其复制到刚刚新建的文件夹内

  2. 修改第3步的代码 use 段,将其改为你下载的模型名称即可

7.开启爱心点击效果

  1. themes\next\source\js\src\ 目录下新建 clicklove.js 文件,在其中添加以下代码:

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);
  1. themes\next\layout\_layout.swig 文件末尾添加以下代码:

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>
  1. 目前无效,正在寻找解决方法

  2. 无效原因已找到:之前因为是将博客部署在了 Gitee 上,这个上边不显示,后来我把博客部署在了 Github 上,发现这个特效突然出现了,初步猜测是这个原因。

!!!新版 Next 设置

  • 只需要将以下代码粘贴到 source\_data\footer.njk 文件中即可(没有请新建):

1
2
3
4
{# 页面点击小红心 #}
<script type="text/javascript">
!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);
</script>

8.修改文章内链接文本的样式

  • 打开 themes\next\source\css\_custom\ 目录下的 custom.styl 文件,在第一行 \\Custom styles 后边插入以下代码:

1
2
3
4
5
6
7
8
9
10
if hexo-config("custom_css.post_body_a.enable")
.post-body
a:not(.btn){
color: convert(hexo-config("custom_css.post_body_a.normal_color"));
border-bottom: none;
&:hover {
color: convert(hexo-config("custom_css.post_body_a.hover_color"));
text-decoration: underline;
}
}

这里的 a:not(.btn) 是为了不影响首页的“阅读全文”按钮。这里,我们用了 hexo-config() 函数读取配置,用 stylus 的内建函数 convert() 转换成 stylus 需要的颜色格式。

  • 主题配置文件 的末尾填上如下代码:

1
2
3
4
5
6
custom_css:
# the style of post body link
post_body_a:
enable: true //是否开启
normal_color: "#4D4DFF" //原始链接的颜色,这里是蓝色(颜色可自己修改)
hover_color: "#fc6423" //鼠标经过时的颜色,这里是橙色(颜色可自己修改)
  • 新版 Next 优化:将第一段代码粘贴到 source\_data\styles.styl 文件中即可

9.修改文章底部标签前面的图标

文章下边标签的图标默认为 “#” 号,并不美观。通过修改代码可以改为比较好看的图标

  • themes\next\layout\_macro\ 文件夹下的 post.swig 文件中搜 rel="tag>#" ,将#号换为 <i class="fa fa-tag"></i> ,如下:

1
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
  • 然后就换为比较美观的一个小图标了
    实用技巧

  • 新版 Next 优化: 主题配置文件 tag_icon 改为true即可

10.自定义代码块样式

  • 打开 themes\next\source\css\_custom\ 目录下的 custom.styl 文件,向里面加入以下代码(颜色可以自定义):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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;
}
  • 新版 Next 优化:将以上代码粘贴到 source\_data\styles.styl 文件中即可

11.隐藏网站底部的驱动信息

创建好博客后,页面底部会有“由Hexo强力驱动”字样,如果不想要这部分信息,可按以下操作进行

  • 打开 themes\next\layout\_partials\ 文件夹下的 footer.swig 文件,使用注释符号 <!-- 示例 --> 注释掉以下代码即可
    去除驱动

  • 新版 Next 只需要在 主题配置文件 footer 字段中的 powered 值改为 false即可

12.在网站底部添加访客量、总访问量

  • 主题配置文件 中搜 busuanzi_count,对相应参数进行修改即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
# count values only if the other configs are false
enable: true //是否开启不蒜子统计功能
# custom uv span for the whole site
site_uv: true //是否开启统计访客数
site_uv_header: <i class="fa fa-user"></i> 访客数 //前半部分为图标,后半部分为显示的文字
site_uv_footer:
# custom pv span for the whole site
site_pv: true //是否开启统计总访问量
site_pv_header: <i class="fa fa-eye"></i> 总访问量 //前半部分为图标,后半部分为显示的文字
site_pv_footer:
# custom pv span for one page only
page_pv: false //是否开启博文阅读量
page_pv_header: <i class="fa fa-file-o"></i> 阅读数 //前半部分为图标,后半部分为显示的文字
page_pv_footer:
  • 新版更新如下:

1
2
3
4
5
6
7
8
9
10
# Show Views / Visitors of the website / page with busuanzi.
# For more information: http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: far fa-eye

13.添加字数统计、阅读时长统计功能

  1. Git端安装 hexo-wordcount 插件,命令为:npm install hexo-wordcount --save

  2. 主题配置文件 中搜 post_wordcount,对相应参数进行修改即可

1
2
3
4
5
6
post_wordcount:
item_text: true
wordcount: true #单篇 字数统计
min2read: true #单篇 阅读时长
totalcount: false #网站 字数统计
separated_meta: true
  1. 如需修改显示格式,打开 themes\next\layout\_macro\ 文件夹中的 post.swig 文件,按下图修改即可
    字数统计

  • 新版已移除,推荐使用 symbols_count_time ,方法在下面

!symbols_count_time方法

  • 在 git 命令行执行以下代码:

1
2
3
4
# 卸载原有依赖 不卸载对新插件有影响
npm uninstall hexo-wordcount
# 安装新依赖
npm i hexo-symbols-count-time
  • 主题配置文件 中搜 symbols_count_time,对相应参数进行修改即可

1
2
3
4
5
6
7
symbols_count_time:
# 换行显示字数统计和阅读时长
separated_meta: true
# 文章底部显示
item_text_post: true
# 博客底部显示 默认为false
item_text_total: true
  • 站点配置文件 中可以设置显示哪些内容和一些统计维度(没有该字段自行添加即可):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
symbols_count_time:
# 文章字数
symbols: true
# 阅读时长
time: true
# 总文章字数
total_symbols: true
# 阅读总时长
total_time: true
# 是否排除代码统计
exclude_codeblock: false
# 平均字长 即将多少个字符统计为1个字数
awl: 4
# 每分钟的字数 阅读速度
wpm: 275
# 统计单位 这里是分钟
suffix: "mins."

14.用 LeanCloud 添加阅读次数统计功能

该功能在第十二点的 busuanzi 配置中已有,但其在博客首页并不显示,且不能管理相关博文的阅读量(我认为是缺点),所以我选择 LeanCloud。

  1. 先去 LeanCloud 官网注册。直达链接:查看链接

  2. 在控制台创建一个新应用,名称随便起,选开发版
    创建新应用

  3. 点击新创建好的应用的右上角,找到“应用key”选项,之后会用到这些信息
    应用key

  4. 点击存储-创建class,这里的 class 名称为了不出错,最好用 Counter
    创建class

  5. 在设置-安全中心-Web安全域名处填入自己的博客地址
    安全域名

  6. 主题配置文件 中搜 leancloud_visitors,修改相应配置为 true ,再把第三步的信息填入即可

1
2
3
4
leancloud_visitors:
enable: true
app_id: #你的app_id
app_key: #你的的app_key

15.设置文章置顶功能

  • 安装支持文章置顶的插件先移除旧插件,命令为:npm uninstall hexo-generator-index --save再安装新插件,命令为:npm install hexo-generator-index-pin-top --save

  • 设置置顶标志打开 themes\next\layout\_macro 目录下的 post.swig 文件,定位到 <div class="post-meta"> 字段,在该行下边加入以下代码:

1
2
3
4
5
6
7
{% if post.top %}
<span class="post-meta-item-icon">
<i class="fa fa-thumb-tack"></i>
</span>
<font color="red">置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}
  • 新版 Next 不建议修改主题源文件,而是在数据文件中进行修改,方法如下:

    • source\_data\ 下打开 post-meta.njk 文件(没有则新建)
    • 在该文件中新增如下字段:
      1
      2
      3
      4
      5
      6
      7
      {% if post.top %}
      <span class="post-meta-divider" style="margin: 0 5px;"> | </span>
      <span class="post-meta-item-icon">
      <i class="fa fa-thumbtack"></i>
      </span>
      <font color="red" style="margin: 0 3px;">置顶</font>
      {% endif %}
  • 开启置顶功能

    • 想要某篇文章置顶,就去该篇文章的 Front-matter 中加入 top: true 字样。这里 true 可以换为数字,多篇文章置顶情况下,数字越大的越在最上边
    • Front-matter 即为每篇文章最前面部分,如下:
      1
      2
      3
      4
      5
      6
      title: 个人博客搭建入门教程
      date: 2019-01-26 23:31:51
      tags: 实用技巧
      categories: 博客搭建
      copyright: true
      top: true
  • 如果想要将 top 预置入 Front-matter 将前往这里

16.插入网易云音乐

(1).在侧栏中插入网易云音乐接口

  1. 打开 themes\next\layout\_macro 目录下的 sidebar.swig 文件,定位到 include '../_custom/sidebar.swig' 这一长串代码,在 </div> 下边加入这一段代码:

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=86 height=86 src="{{ theme.background_music }}"></iframe>
  1. 如下图:
    sidebar添加网易云

  2. 打开网页端网易云音乐,找到你想要插的歌曲,进入播放页面点击“生成外链播放器”
    找歌

  3. 在这个界面找到框住的内容
    斜杠后内容

  4. 主题配置文件 中适当位置增加网易云入口

1
2
# 侧栏网易云音乐链接
background_music: //这里填写上一步红框中的内容,冒号后边有空格
  • 图片如下:
    添加网易云链接

(2).在文章中插入网易云链接

  1. 打开网页端网易云音乐,找到你想要插的歌曲,进入播放页面点击“生成外链播放器”
    找歌

  2. 将以下代码直接插入文章中即可
    修改播放器样式

想要将歌曲改为歌单的请百度:怎么把自己的歌单做成外链

17.在文章底部增加版权信息

(1).NexT内置的Copyright功能

  • 主题配置文件 中 post_copyright,将 false 改为 true

1
2
3
4
post_copyright:
enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
  • 之后所有文章都会带有版权信息

(2).个性化配置版权信息

  1. themes\next\layout\_macro\ 目录下新建名为 my-copyright.swig 文件,向其中插入以下代码:

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
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

<!-- JS库 sweetalert 可修改路径 -->
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '复制成功',
icon: "success",
showConfirmButton: true
});
});
});
</script>
{% endif %}

中间的标题、作者、时间,最后更新、原始链接、许可协议等都可以自己修改

  1. themes\next\source\css\_common\components\post\ 目录下新建名为 my-post-copyright.styl 文件,向其中插入以下代码:

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
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
  1. themes\next\layout\_macro\post.swig 文件中,定位到 theme.wechat_subscriber.enabled 这里,在这一行上边插入以下代码:

1
2
3
4
5
{% if not is_index %}
<div>
{% include 'my-copyright.swig' %}
</div>
{% endif %}
  1. themes\next\source\css\_common\components\post\post.styl 文件的最后加入以下代码:

1
@import "my-post-copyright"
  1. 在博客数据文件的根目录下有 scaffolds\post.md 文件,在三条横线上边加入 copyright 即可(置顶 top 类似),如下:

1
2
3
4
5
6
7
title: {{ title }}
date: {{ date }}
tags:
categories:
description:
top:
copyright:
  1. 这样每篇新建的文章都有 copyright 了,如果想要开启版权信息,只要在 copyright 后面写上 true 即可,注意空格!

(3).新版Next优化

  • 新版 Next 不推荐直接修改主题源文件,所以可以按如下方法进行配置:

  • 打开 source\_data\post-body-end.njk 文件(没有请新建),将如下代码复制进去(可以自行修改):

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
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JS库 sweetalert 可修改路径 -->
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ author }} 的个人博客">{{ author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>许可协议:</span><i class="fab fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> </p>
<p><span>注意事项:</span>转载请保留原文链接及作者,请尊重作者的劳动成果</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '复制成功',
icon: "success",
showConfirmButton: true
});
});
});
</script>
{% endif %}
  • 打开 source\_data\styles.styl 文件(没有请新建),将如下代码复制进去(可以自行修改):

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
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
  • 主题配置文件 中的 custom_file_path 字段中的这两个文件取消注释即可

  • 接着执行旧版的5、6操作即可

18.搜索服务

  • NexT 官网给出了四种搜索——Swiftype、微搜索、Local Search以及Algolia。直达链接:查看链接

  • 个人认为第三个即本地搜索比较方便一些,这里只说一下本地搜索的设置

  • 安装 hexo-generator-search 插件命令为:npm install hexo-generator-search --save

  • 安装 hexo-generator-searchdb 插件命令为:npm install hexo-generator-searchdb --save

  • 站点配置文件 最下边添加以下代码:

1
2
3
4
5
6
#搜索功能
search:
path: search.xml
field: post
format: html
limit: 10000
  • 主题配置文件 中搜 local_search,将 enable 改为 true 即可

1
2
3
4
5
6
7
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1

19.为博客添加背景图

可能有人会觉得博客背景太白并不怎么好看,可以通过以下方法来修改背景图

  • themes\next\source\css\_custom\custom.styl 文件中添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
//背景图片相关
@media screen and (min-width:1200px) {
body {
background-image:url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
background-size: cover
}
#footer a {
color:#eee;
}
}
  • 将你的背景图命名为 background.jpg 放入 themes\next\source\images\ 目录下,然后重新上传博客即可

  • 我这里上传无效,所以就把上面的url部分换成了图床外链(方法请百度),如下:

1
background-image:url(https://s1.ax1x.com/2020/10/15/0oUEQK.jpg);
  • 新版Next优化:只需要将以上的代码直接添加到 source\_data\styles.styl 文件里即可

20.隐藏首页部分文章(新版Next不支持)

有的时候我们并不想让某些文章出现在首页上,但在归档中还是可以找到的,这时就需要下方的方法了,该方法出自CSDN,转载请声明:原文

(1).修改主题的index.swig

  • 路径在 Hexo\themes\next\layout\index.swig

  • 将这段

1
2
3
4
5
6
{% block content %}
<section id="posts" class="posts-expand">
{% for post in page.posts %}
{{ post_template.render(post, true) }}
{% endfor %}
</section>
  • 改成

1
2
3
4
5
6
7
8
{% block content %}
<section id="posts" class="posts-expand">
{% for post in page.posts %}
{% if post.notshow != true %}
{{ post_template.render(post, true) }}
{% endif %}
{% endfor %}
</section>
  • 注意:上边在 for 循环中判断文章中的属性 notshow,如果不为 true 就打印出文章。所以在需要隐藏的文章 front-matter 中添加 notshow:true 就会隐藏。

  • !!!注意:最新版

(2).将notshow直接写入front-matter中

  • 打开你 Hexo 的根目录,找到 scaffolds 文件中的 post.md文件,并用 VScode,记事本等软件打开

  • 按下方的格式插入即可

1
2
3
4
5
6
7
8
title: {{ title }}
date: {{ date }}
tags:
categories:
description:
top:
notshow:
copyright:
  • 注意:notshow: 后面有一个空格

(3).进行设置

  • 如果需要在你的以前的文章中设置隐藏,打开你的那篇文章的 .md 文件,按我上方的格式插入并在后面表明true即可

  • 如果是新发表的文章,只要你进行过刚刚的设置,那么在你新建一个文档时,自动会补充 notshow 属性,你只要在后面填写 true 即可

21.网站底部添加已运行时间

  • 正在咕咕咕~ ~ ~

六、拓展配置

1.使用插件在文章中插入图片

  • 站点配置文件 中搜 post_asset_folder,将值改为 true

  • 安装 hexo-asset-image 插件命令为:npm install hexo-asset-image --save

  • 安装好后,只要你每次新建文章之时,在文章所在目录(即\source_posts)下会自动生成同名文件夹,只要把该篇文章中所需要的图片放在该文件夹内,然后在文章中使用 ![](该文件夹名字/图片名字) 即可在文章中插入该图片
    插入图片

2.使用图床在文章中插入图片

  • 使用图床外链插入图片链接优点:占用空间少,GitHub 的仓库容量仅有200M,使用图床可以减少空间的使用量缺点:图床一但被墙或关闭服务,可能会导致图片全部失效,所以建议将图片备份好,一旦图床失效,可以立即上传到其他图床上

  • 这里我使用的是 SM.MS 图床,点击这里跳转。该图床上传上去以后有多种格式选择,你如果需要在本博客中添加,直接选择 Markdown 即可,如下:
    Markdown图床.png

  • 然后在文章的适当位置插入 Markdown 语句即可,格式为:![图片名](图片链接)

3.首页页面优化

  • 本人不是太喜欢 Next 主题的默认样式,有一种死气沉沉的感觉,所以对首页进行了相关的优化

  • 本套配置基于 NexT 主题的 Gemini 的风格,主要包含了全局圆角化、文章透明、左上角颜色修改、去除网站顶部小黑条、手机端优化,可以自行进行修改,效果如下图:
    全局圆角.png

  • 打开 source\_data\styles.styl 文件(没有请新建),粘贴以下代码:

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
// 左上角分类栏相关修改
// 修改背景颜色与手机端阴影
.site-brand-container {
background:none;
border-radius: 15px;
.site-nav-on & {
+tablet-mobile() {
box-shadow: none;
}
}
}
// 修改左上角标题颜色
.site-brand-container .site-meta .brand{
color: black;
}
.site-brand-container .site-meta .site-subtitle{
color: gray;
}
// 修改手机端按钮颜色
.site-nav-right .toggle, .site-nav-toggle .toggle{
color: gray;
}
.site-nav-right .toggle .toggle-line, .site-nav-toggle .toggle .toggle-line{
background: gray;
}
// 修改手机端顶部栏圆角
.header-inner{
background: rgba(255,255,255,.9);
border-radius: 15px;
}
// 回到顶部圆角
.back-to-top{
border-radius: 15px;
}
// 去除首页文章与文章之间的背景色
.main-inner{
background: none;
}
// 消除顶部黑条
.headband{
background: transparent;
}
  • 打开 source\_data\variables.styl 文件(没有请新建),粘贴以下代码:

1
2
3
4
5
// 修改圆角
$border-radius = 15px;
$border-radius-inner = 15px;
// 修改背景透明度
$content-bg-color = rgba(255,255,255,.9);
  • 主题配置文件 中的 custom_file_path 相应文件取消注释即可

4.数据文件功能设置

(1).介绍

  • 自从 NexT-7.3.0 开始,官方推荐采用数据文件将配置与主题分离,这样我们可以在不修改主题源码的同时完成选项配置、自定义布局、自定义样式,便于后续 NexT 版本更新。

  • 推荐先进行该步操作后再进行以上的选项配置

(2).next.yml(已废弃)

  • 老版本的 NexT 主题还提供了另一种配置方法,就是将主题配置放在 /source/_data/next.yml 文件. 此方法已弃用。

  • 如果 /source/_data/next.yml 文件存在,请删除它,然后下面两种方法二选一,这里是官方文档的解释

(3)._config.[name].yml方式

  • 好处:站点配置文件 主题配置文件 分离,便于设置

  • 版本:确保 Hexo 为5.0或更高版本

  • 要求:删除 /source/_data/next.yml 文件

  • 方法:

    • 在站点根目录创建 _config.[name].yml 文件,其中[name]字段为 站点配置文件 中 theme 字段内容
    • 主题配置文件 中的内容全部复制到上面的文件中
    • 重新上传博客即可应用以上配置

(4).theme_config方式

  • 好处:站点配置文件 主题配置文件 不分离,一个配置文件即可设置所有选项

  • 版本:确保 Hexo 为5.0或更高版本

  • 要求:删除 /source/_data/next.yml 文件

  • 方法:

    • 站点配置文件 的最下面追加 theme_config: 字段
    • 主题配置文件 中的内容全部复制到该字段下面
    • 将复制的所有内容全部向后缩进两个空格(VS Code的快捷键是选中之后按下 Ctrl + ] 即可快速缩进)
    • 重新上传博客即可应用以上配置

5.关于npm插件

  • 本文的配置中很多地方都通过 npm 命令进行了插件的安装,这里写一些相关知识

(1).安装

  • 全局与局部安装

1
2
npm install xxx		//利用 npm 安装xxx模块到当前命令行所在目录
npm install -g xxx //利用 npm 安装xxx模块到全局目录
  • 局部安装时将模块写入 package.json

1
2
3
npm install xxx				//安装但不将依赖写入 package.json 中
npm install xxx –-save //安装并将依赖写入 package.json 的 "dependencies" 中
npm install xxx -–save-dev //安装并将依赖写入 package.json 的 "devDependencies" 中

(2).卸载

  • 全局与局部卸载

1
2
npm uninstall xxx      //删除xxx模块
npm uninstall -g xxx //删除全局模块xxx
  • 局部安装时将 package.json 中内容删去

1
2
3
npm uninstall xxx				//删除模块但不删除留在 package.json 中的对应依赖
npm uninstall xxx --save //删除模块同时删除留在 package.json 中 "dependencies" 下的对应依赖
npm uninstall xxx --save-dev //删除模块同时删除留在 package.json 中 "devDependencies" 下的对应依赖

6.使用批处理命令部署博客

  • 虽然在上传 Hexo 博客时的命令只有3条,但是本着能懒就懒的原则,使用一个命令完成岂不美哉?

  • 在桌面新建一个 .txt 文档,将如下内容填写进去,使用时请把后面的注释去掉:

1
2
3
4
@echo off					//关闭回显
H: //切换到博客站点目录所在的盘符,我这里是H盘
cd H:\Github-blog //进入站点目录,我这里是H:\Github-blog
hexo clean&&hexo g&&hexo d //Hexo 命令一键部署
  • 保存以后将这个文件改名为 自动部署.bat ,双击即可执行

7.在博客中插入自己本地文件且不渲染

  • 在博客目录下的 source 目录中新建一个 demo 文件夹,并将自己的 HTML 本地网页存放在此处

    • 因为 source 目录在 hexo g 时会生成到托管网站的 /public 目录下
  • 在自己的博客文章中,使用如下两个例子进行引入,这里使用的是相对路径

1
2
3
4
5
6
7
[例子1](/demo/index.html)
<a href="/demo/index.html">例子2</a>
<a href="/demo/index.html" target="_blank">例子3</a>
解释:
例子1是使用了Markdown写法,直接在当前窗口打开该页面
例子2是使用了HTML标签,直接在当前窗口打开该页面
例子3是使用了HTML标签和target属性,此时在新的窗口打开该页面,不影响当前页面
  • 因为该页面是属性自己本地页面,不和博客同框架样式的,所以需要取消渲染

  • 打开 站点配置文件 ,找到 skip_render 字段,按如下格式,如果有多个文件换行对照写即可:

1
2
skip_render:
- 'demo/index.html'
  • 如果你进行了 hexo-neat 压缩,还需要在 neat_html 字段中,按如下填写(如果没有请无视):

1
2
3
4
neat_html:
enable: true
exclude:
- 'demo/index.html'
  • 重新执行 hexo clean && hexo g && hexo d 操作即可

七、问题集合

1.关于本地搜索框被置于最底层的问题

  • 之前在改变全局圆角的时候,因为考虑到背景图片问题,所以我顺便给每个部分设置了一个透明度,使用的是 opacity: 0.9; 这个属性,效果也十分显著

  • 但第二天我就发现,本地搜索框突然不能正常使用,具体表现为:点击搜索有反应,但弹出的搜索框却被置于了网页的最下面一层,且无法进行点击

  • 在我查了一下 GitHub 的 issue 时(点这里查看),发现原来是因为 opacity 的原因,把这个注释掉就好了,但这样就不可以实现透明效果了,所以你可以这样做:

  • 在 background-color 处使用 rgba 来实现,如下:

1
2
background-color: rgba(255,255,255,.8);
//前面三个值为你的颜色的rgb值,后面那个值是透明度,值为0-1中间的数

2.关于错误代码问题

(1).Template render error

  • 在执行 hexo g 的命令时提示该代码

  • 经过排查,发现是由于我写的一篇 md 文档导致的,说明里面有部分特殊符号被网页进行了解析

  • 如下图,这里的 import 标签我虽然用的单行代码引用的方法,但被浏览器解析了,而换成代码块的方式,就不会出现错误了
    代码问题01 .png

(2).FATAL Port 4000 has been used

  • 在执行 hexo -s 的命令时提示该代码

  • 经过排查,是因为我在上次执行该命令时没有及时终止进程导致的,按如下步骤杀死进程即可成功执行

  • 在 Windows 命令行窗口分别执行如下命令:

1
2
3
netstat -ano						// 查看系统当前所有窗口占用状况
netstat -ano | findstr "4000" // 查看4000端口被哪个应用占用
tasklist | findstr "进程id号" // 通过id查找对应的进程名称
  • 注意:如果此时进程名称为 node.exe 即代表是因为 hexo -s 命令没有终止导致的。如果显示为其他名字,代表是其他软件端口与 hexo 的端口冲突,此时应该更换 hexo 端口号,方法自行百度

  • 确认进程名称为 node.exe 时执行如下命令:

1
taskkill /f /t /im "进程id或者进程名称"		// 杀掉当前进程
  • 然后再执行 hexo -s 即可成功打开博客了

3.关于git bash无法终止hexo s

  • 在 Windows 的 cmd 窗口执行该命令即可:taskkill /F /IM node.exe

4.关于博客整体的升级问题

  • 升级之前最好查看下 Node.js 、Hexo、Next 之前的版本匹配问题

  • 这里是官方给的版本对照图:
    |Hexo 版本|最低兼容 Node.js 版本|
    | :----: | :----: |
    | 5.0+ | 10.13.0 |
    | 4.1 - 4.2 | 8.10 |
    | 4.0 | 8.6 |
    | 3.3 - 3.9 | 6.9 |
    | 3.2 - 3.3 | 0.12 |
    | 3.0 - 3.1 | 0.10 or iojs |
    | 0.0.1 - 2.8 | 0.10 |

(1).NodeJS升级

  • Windows 可直接下载最新稳定版并安装

  • 更新 npm 使用以下命令:

1
2
npm -g install npm ( 官方最新稳定版 )
npm -g install npm@6.1.0 ( 自己需要的版本 )
  • 此时可通过执行如下命令查看 Node.js和npm 是否更新成功

1
2
node -v
npm -v

(2).Hexo升级

  • 在博客的目录下执行以下命令:

1
2
3
4
5
6
7
8
npm install hexo-cli -g			//全局升级hexo
npm install -g npm-check //安装npm-check
npm-check //查看系统插件是否需要升级
npm install -g npm-upgrade //安装npm-upgrade
npm-upgrade //更新package.json
//在执行npm-upgrade命令后会要求输入yes或者no,直接输入Yes或Y即可
npm update -g //更新全局插件
npm update --save //更新系统插件
  • 此时可通过执行如下命令查看 Hexo 是否更新成功

1
hexo -v

(3).Next升级

  • 若你的主题版本很老,建议对自己的主题文件夹进行备份

  • 在博客根目录打开 git bash 窗口,输入以下命令(next-8.4.0可以自行更改):

1
git clone https://github.com/next-theme/hexo-theme-next themes/next-8.4.0
  • 在主题配置文件中更换主题为 next-8.4.0

(4).更新后的问题

a).博客主页无法进入且乱码

  • 报错信息为:

1
{% extends ‘_layout.swig‘ %} {% import ‘_macro/post.swig‘ as post_template %}
  • 原因为:
    hexo 在5.0之后把 swig 给删除了,此时需要自己手动安装

  • 修改如下:

1
npm i hexo-renderer-swig

b).博客主页的首页跳转404

  • 报错信息为:点击首页等导航时链接地址为:https://xxx.github.io/ ,且跳转到404页面

  • 原因为:所有导航路径后都有 %20,%20 代表空格,而这个一部分又是 next 主题中生成的,只要将主题配置文件里 || 之前所有的空格删掉即可

  • 修改如下:

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

c).页面特效失效

  • Next 主题从6.0版本开始就移除了原本关于页面特效的一部分依赖(可比对next/soure/lib下文件),导致新版本无法直接生效相关配置,如果需要安装可以在 theme-next 仓库中搜索主题字段并按文档安装

  • 主题有:canvas_nestthree_wavescanvas_linescanvas_sphere

  • 这里以 Windows 环境下配置 canvas_nest 为例:

    • hexo/source/_data 下创建 footer.swig 文件(如果有则追加内容):
    1
    <script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>
    • 修改主题配置文件中的如下字段:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Define custom file paths.
    # Create your custom files in site directory `source/_data` and uncomment needed files below.
    custom_file_path:
    #head: source/_data/head.swig
    #header: source/_data/header.swig
    #sidebar: source/_data/sidebar.swig
    #postMeta: source/_data/post-meta.swig
    #postBodyEnd: source/_data/post-body-end.swig
    footer: source/_data/footer.swig
    #bodyEnd: source/_data/body-end.swig
    #variable: source/_data/variables.styl
    #mixin: source/_data/mixins.styl
    #style: source/_data/styles.styl

d).网站语言问题

  • 官方将中文的语言命名由 zh-Hans 改为了 zh-CN

  • 站点配置文件 中修改语言字段:

1
language: zh-CN

e).字体大小问题

  • 更新至新版以后字体默认大小比原先大了些,需要调整可以在 font 配置下进行修改,如下:

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
font:
enable: true
# 字体地址
host:
# 正文字体
global:
# 拓展字体库,设置为 true 将从hosts中加载字体
external: true
# 字体族
family: Lato
# 大小:size=1 为默认大小,0.8将缩小为80%
size: 0.9
title:
external: true
family:
size:
# 正文标题字体大小
headings:
external: true
family: Lato
size:
posts:
external: true
family:
codes:
external: true
family:

八、该系列文章