花费了一天的时间搭建Hexo博客,总算是有个雏形,可是默认的主题总觉得有些丑,决定换个主题再继续折腾一番……这篇文章主要记录一下主题的安装、配置与美化,以及配置过程中遇到的一些问题–

找一个适合自己的主题

Hexo官网上提供了几百种样式的主题,可以从这里面去寻找自己喜欢的Hexo Themes

经过一番骚操作,最终相中了Butterfly这个主题,真是深得我心

对主题进行安装和配置

Butterfly主题也有比较详细的安装配置方法,照着这个hexo-theme-butterfly安装文档一步一步自己进行配置就可以~

配置时遇到的问题

尽管主题的官方文档已经说的很详细,但是我在配置的过程中还是遇到了一丢丢小问题,在此记录:

1. Algolia搜索

在启用Algolia搜索系统的时候,在Algolia的配置上遇到了很大的问题,ID和Key什么的都没有配置好,也许是我英语水平太低,没能理解官方配置文档所致。这里附一篇中文的配置介绍——Hexo+Next集成Algolia搜索。参考这一篇文章再自己进行配置就容易多了

2. 新建文章时的默认模板

当我们使用 hexo new "filename"新建一个文章的时候,会使用默认的模板建立

1564731851768

为了配合主题更好的使用,我们可以把默认模板修改成与主题相符的主题页面

模板文件在博客根目录的 scaffolds文件夹下

修改 page.md

1
2
3
4
5
6
7
8
---
title:
date:
type: (tags,link,categories这三个页面需要配置)
comments: (是否需要显示评论,默认true)
description:
top_img: (设置顶部图)
---

修改 post.md

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title:
date:
tags:
categories:
keywords:
description:
top_img: (除非特定需要,可以不写)
comments: 是否显示评论(除非设置false,可以不写)
cover: 缩略图
toc: 是否显示toc (除非特定文章设置,可以不写)
toc_number: 是否显示toc数字 (除非特定文章设置,可以不写)
---

3. 本地上传的图片无法加载

如果需要配置加载本地图片, 在站点配置文件_config.yml中找到post_asset_folder,设置为true

之后在运行hexo new时,会自动创建一个与.md文件同名的文件夹,可以将与文章相关的所有资源放在这个文件夹中,方便引用。

另外还需要安装图片上传插件,在博客根目录运行

1
npm install hexo-asset-image --save

然后正常生成部署即可

但是!

在我这里出现了一丢丢问题,图片依然无法加载,在网页查看图片的链接发现被改成了baymrx.me/.me//**.png这种形式,,令我百思不得其解。后来经查阅资料发现是插件的脚本问题。

进入博客根目录下的node_modules文件夹,找到hexo-asset-image,,打开文件夹下的index.js文件,我这里贴出部分源代码(出现问题的代码)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
hexo.extend.filter.register('after_post_render', function(data){
var config = hexo.config;
if(config.post_asset_folder){
var link = data.permalink;
var beginPos = getPosition(link, '/', 3) + 1;
var appendLink = '';
// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
// if not with index.html endpos = link.lastIndexOf('.') + 1 support hexo-abbrlink
if(/.*\/index\.html$/.test(link)) {
// when permalink is end with index.html, for example 2019/02/20/xxtitle/index.html
// image in xxtitle/ will go to xxtitle/index/
appendLink = 'index/';
var endPos = link.lastIndexOf('/');
}
else {
var endPos = link.lastIndexOf('.');
}
link = link.substring(beginPos, endPos) + '/' + appendLink;

这一部分将图片链接的2019/02/20/xxtitle/这一部分提取出来,并存入变量link中,此代码问题出在9–12行的if语句中,这里将index.html作为了判断条件,但实际上文档的url地址中并不显示index.html,导致原本应该截取的永久链变成了.me//这里我走了一个投机取巧的办法,就是修改第16行的代码,改为 这里官方issues提出了解决方案,依旧是修改第16行的代码,即源文件的第24行,改为

var endPos = link.lastIndexOf(‘/’);

1
var endPos = link.length-1; 

这样再重新生成部署博客就可以正常显示本地图片了

4. 文章缩略图无法设置

文章缩略图cover使用上面的方式进行设置,发现并没有什么用,想了好久也没想到能使用本地图片的方法,无奈只能选择以图床的方式添加缩略图。

浏览了互联网整个浩瀚的海洋,发现了几个比较有名的图床,腾讯云COS,微博图床,七牛云,阿里云OSS,又拍云,网易云NOS,sm.ms,Imgur,GitHub等等,经过多方面的调查比较,发现这些图床并不符合我想要的,要么收费、要么需要域名备案、要么稳定性没有绝对的保障。

后来在我使用的主题的作者jerryc的博客里发现他使用的是jsDelivr作为CDN加速提供图片外链,经过查阅资料得知,这种方式的主要思路是使用GitHub作为图片存储,使用jsDelivr作为GitHub的CDN加速,将静态文件缓存在jsDelivr的CDN节点上,最后获得加速后的图片url

首先要创建一个GitHub仓库,并起一个仓库名,公开仓库即可

1564887053051

然后在GitHub中获取一个token(它可以让程序拥有控制仓库的权限)

1564886509572

然后设置一个Note作为token的标记,下面的选项只把repo打钩即可

1564886631396

之后网页滑到最下面,Generate token生成token,并复制,记住这个token只显示一次,如果不慎把网页关闭,就只能重新生成一次token了

1564886774195

然后我们下载一个图片上传工具,在这里我们使用PicGo(点击下载),下载完后安装打开,在图床设置处配置GitHub图床

1564886888829

  1. 设定仓库名:填写上面创建的仓库,格式为用户名/仓库名

  2. 设定分支名:一般默认填master即可;

  3. 设定token:将上面生成的token粘贴进去;

  4. 指定存储路径:想把图片放到仓库的哪个位置就设置哪个路径,比如img/,注意文件夹的后面一定要带 /否则会被当做文件处理;

  5. 设置自定义域名: 这里我的设置是

1
https://cdn.jsdelivr.net/gh/BayMRX/Blog_source@master

其中:

  • gh表示来自于GitHub仓库
  • BayMRX/Blog_source表示仓库名
  • master是仓库的分支

配置完成,确定保存即可。

然后就可以通过PicGo方便地上传图片了,它支持拖拽、点击、剪贴板上传,上传后,图片链接会直接复制到剪贴板中。

需要注意的地方:

这里创建GitHub仓库的时候,不能创建私人仓库,否则会无法连接,提示

1564889442772

所以创建的时候要创建公开仓库。

主题再创作——在原有主题上再添加一些功能

Valine评论系统

评论系统是搭建好了,测试也可以正常使用,就是如果有什么人对我的文章进行评论了的话,我也不知道啊。一番搜索找到了解决办法,Valine评论系统是基于 Leancloud的云引擎与云函数,可以提供邮件通知的服务。

在这里找到了一篇文章供作参考:Hexo 优化 — 支持邮件通知的评论 Valine 增强版

★★2020-06-18更新:最近官方对于LeanCloud服务器的唤醒进行了限制,没法使用重发函数对服务器进行唤醒,导致无法正常使用邮件提醒服务。查看日志它会提示"因流控原因,通过定时任务唤醒体验版实例失败,建议升级至标准版云引擎实例避免休眠"。去网上查找资料,发现还是有解决办法的,参考小康大佬的博客:优雅解决 LeanCloud 流控问题

这里我使用的是大佬的方案四解决的,唤醒计划依然是每20分钟一次。

提交网站到搜索引擎(SEO优化)

在我们刚建立好网站时,搜索引擎无法检索到我们的网站。可以在搜索引擎中输入site:<域名>来查看网站是否已被搜索引擎收录。感谢Hexo + Next 主题博客提交百度谷歌收录提供教程参考。

1. 验证站点

有三种验证方式,文件验证、html 标签验证、cname 解析验证。可参考网站验证

2. 生成sitemap站点地图并提交

Google

Baidu

3.静态资源压缩优化

对于个人博客,访问速度的优化是很有必要的,当然访问速度越快越有利于搜索引擎排名的靠前。所以要想提高博客的页面加载速度。可以考虑对页面的静态资源进行压缩,我们自己生成的html、css和js文件,为了可读性会有很多换行和空格,这对浏览器来说会降低页面渲染的速度。

安装hexo-neat插件

1
npm install hexo-neat --save

在配置文件_config.yml中添加配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
enable: true
exclude:
# 压缩css
neat_css:
enable: true
exclude:
- '**/*.min.css'
# 压缩js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'
- '**/main.js'

有些js或css文件压缩后可能会失效,如果发现页面某些功能不正常或者无法生成静态页面文件,可以配置跳过压缩对应的文件

1
2
3
4
neat_js:
enable: true
exclude:
- '**/*.min.js'

添加404页面

尝试过网上介绍的办法,直接 hexo new page 404生成404页面不能正确跳转到自己定义的404页面,而是跳转到服务器默认的白色404页面

再次百思不得其解,又是一波疯狂的查阅资料,发现是Nginx的问题,需要对Nginx进行配置才能正确跳转到自定义的404页面

首先我们要建立一个404.html文件在博客根目录下的/source文件夹中

网页的内容这里我是用腾讯的404公益页面,也算是行善了吧,当然也可以把页面设计成自己想要的任何亚子

在这里附上调用腾讯404公益页面的网页源码

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>404 Not Found!</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回我的首页" homePageUrl="http://baymrx.me"></script>
true</body>
</html>

如果这样使用hexo直接生成部署,这个html也会被按照主题样式被渲染,所以这里我们要跳过渲染,修改根目录下的配置文件_config.yml,在skip_render的后面添加404.html

1
skip_render: 404.html

如果有多项需要跳过渲染的文件,用 - 隔开。

然后我们需要在服务器端配置Nginx

先SSH连接登陆到远端服务器,然后修改Nginx的配置文件nginx.conf

1
vim /etc/nginx/nginx.conf

在http的定义区域添加

1
fastcgi_intercept_errors on;

添加完后保存更改,随后再更改站点配置文件,继续更改nginx.conf,我这里是sites-enabled下的单独网站配置文件

1
vim /etc/nginx/sites-enabled/default 

server区域中添加

1
error_page 404 = /404.html;

更改完成后保存,重启Nginx

1
service nginx restart

浏览器访问一个不存在的页面,如baymrx.me/qaq,便可看到设定的404页面

文章复制添加版权小尾巴

我们借助于主题,已经把文章末尾加上了版权说明信息

1564844695079

但是加上这个似乎并没有什么卵用,我们在访问别人的博客时,比如CSDN这一类,如果要从他们的博客里面复制一些文字,粘贴出来总会带有作者版权的小尾巴,那么在Hexo里面怎么实现这个功能呢。又是一波疯狂的资料查阅,发现网上大部分的功能修改都是基于ejs和swig模板引擎的主题,而我使用的Butterfly主题是用的pug模板引擎,这就造成了不能通过直接添加文件的大麻烦。

(2020.1.10更新)这里添加版权小尾巴在最新版本的主题中已经可以实现了,并且可以自由开启和关闭文章的复制功能,修改主题配置文件中对应的设置即可实现:

1
2
3
4
5
6
# copy setting
# 是否禁止複製(如果禁止,highlight_copy的功能將無效)
# copyright 複製的内容後面加上版權信息
copy:
enable: true # true 開啓 / false 禁止
copyright: true

既然不能直接添加,那么就自己进行移植,在了解了一丢丢pug的语法之后,发现可以通过在pug文件中嵌入js脚本文件来实现

—正片开始—

首先在主题根目录的Butterfly/source/js文件夹中新建一个js文件copy_right.js,内容为

1
2
3
4
5
6
7
8
9
10
11
12
!function() {
function a(a) {
var b, c;
if (a.preventDefault(), b = window.getSelection().toString() + "<br><br>本文采用 CC BY-NC-SA 4.0 许可协议,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。<br>作者:BayMRX<br>来源:" + document.title + "<br>链接:" + window.location.href, c = window.getSelection().toString() + "\n\n本文采用 CC BY-NC-SA 4.0 许可协议,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。\n作者:BayMRX\n来源:" + document.title + "\n链接:" + window.location.href, a.clipboardData)
a.clipboardData.setData("text/html", b), a.clipboardData.setData("text/plain", c);
else if (window.clipboardData) return window.clipboardData.setData("text", c)
}
document.body.addEventListener("copy", function(b) {
var sn = window.getSelection().anchorNode.parentNode.nodeName;
(sn !== 'CODE' && sn !== 'SPAN') && window.getSelection().toString().length > 10 && a(b)
})
}();

然后要修改我们的pug文件。进入到Butterfly/layout目录,找到post.pug文件用记事本或者Notepad++等编辑器打开,找到block content这个块,在下面的if语句的最后添加一句

1
script(src='/js/copy_right.js')

最终代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (theme.post_copyright && theme.post_copyright.enable)
.post-copyright
.post-copyright__author
span.post-copyright-meta= _p('post.copyright.author') + ": "
span.post-copyright-info
a(href=`mailto:${config.email}`) #[=config.author]
.post-copyright__type
span.post-copyright-meta= _p('post.copyright.link') + ": "
span.post-copyright-info
a(href=url_for(page.permalink)) #[=page.permalink]
.post-copyright__notice
span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
span.post-copyright-info!= _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
script(src='/js/copy_right.js')

刚加的语句是在if下面,一定要注意好缩进关系!!!

然后hexo clean && hexo g -d生成部署,打开自己的一篇文档复制粘贴,然后就会惊奇的发现多了小尾巴~~

灰常感谢驱蚊器喵#ΦωΦ提供技术参考



分割线o( ̄ヘ ̄o#)



以下内容为待完成,会持续更新……参考链接

另一个比较优秀的主题matery——闪烁之狐

添加live 2D(看板娘)

1.安装

进入Hexo根目录安装live2d插件

1
npm install --save hexo-helper-live2d

然后安装live2d模型,使用npm install {packagename}进行安装,模型的包名将会在packages/中以文件夹形式存在,现有的模型有:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use 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

live2D模型预览查看

2.配置

修改根目录下的_config.yml文件,添加自定义配置

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
# Live2D
live2d:
enable: true
# enable: false
scriptFrom: local # 默认
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: live2d-widget-model-shizuku #你所安装的模板的名称
scale: 1 #模型与canvas的缩放比例,1为正常比例
display:
superSample: 2 #超采样等级
width: 150 #canvas的长度/宽度
height: 300 #canvas的高度
position: right #可以选择left/right 显示位置左或者右
hOffset: 30 #水平偏移
vOffset: -20 #竖直偏移
mobile:
show: false #true/fasle 是否在移动设备上显示
scale: 0.5 #在移动设备上面的缩放比例,1为正常比例
name:
canvas: live2dcanvas #canvas元素的ID
div: live2d-widget #div元素的ID
react:
opacityDefault: 0.7
opacityOnHover: 0.2 #透明度,1是完全不透明,0表示完全透明
dev:
border: false #true/false 是否在canvas的周围显示边界
dialog:
enable: true #true/false 是否显示人物对话框
hitokoto: true #true/false 是否使用一言API
3. 生成博客
1
2
hexo clean
hexo g -d

设置永久化URL

Hexo 默认文章链接生成规则是按照年、月、日、标题来生成的。一旦文章标题或者发布时间被修改,URL 就会发生变化,之前文章地址也会变成 404,而且 URL 层级很深,不利于分享和搜索引擎收录。

如果文章标题中有中文,URL 被转码后会很长。。

Hexo有一个插件hexo-abbrlink会为每一篇博客生成唯一的ID作为博客的唯一链接,不会受标题和文章内容改变的影响

1.安装

使用npm命令直接安装:

1
npm install hexo-abbrlink --save
2.配置

修改博客根目录的_config.yml文件的permalink,并添加abbrlink选项:

1
2
3
4
5
6
# permalink: :year/:month/:day/:title/
# permalink_defaults:
permalink: posts/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex

其中permalink中的posts是自定义的目录,后面为固定格式,添加.html后缀是为了方便搜索引擎检索。下面的abbrlink选项是永久链的计算方法与进制,默认即可。

3.验证

使用hexo clean清理本地文件,然后重新生成,在博客的md文件中就可以看到abbrlink内容:

1
abbrlink: 87613c70

这一串字符串就会作为博客的唯一标识出现在博客的URL中。

将博客同步部署到GitHub Pages

已填坑,详见:使用Hexo+GitHub搭建自己的个人博客

主题更多新鲜好玩的玩法~~

参考小康大佬的博客Hexo 博客之 butterfly 主题优雅魔改系列

添加音乐播放器(最新版本主题已经实现)

添加动态背景(最新版本主题已经实现)

实现点击出现爱心效果(最新版本主题已经实现)

一套好教程推荐