Hexo进阶——主题和功能的完善
花费了一天的时间搭建Hexo博客,总算是有个雏形,可是默认的主题总觉得有些丑,决定换个主题再继续折腾一番……这篇文章主要记录一下主题的安装、配置与美化,以及配置过程中遇到的一些问题–
找一个适合自己的主题
Hexo官网上提供了几百种样式的主题,可以从这里面去寻找自己喜欢的Hexo Themes
经过一番骚操作,最终相中了Butterfly这个主题,真是深得我心
对主题进行安装和配置
Butterfly主题也有比较详细的安装配置方法,照着这个hexo-theme-butterfly安装文档一步一步自己进行配置就可以~
配置时遇到的问题
尽管主题的官方文档已经说的很详细,但是我在配置的过程中还是遇到了一丢丢小问题,在此记录:
1. Algolia搜索
在启用Algolia搜索系统的时候,在Algolia的配置上遇到了很大的问题,ID和Key什么的都没有配置好,也许是我英语水平太低,没能理解官方配置文档所致。这里附一篇中文的配置介绍——Hexo+Next集成Algolia搜索。参考这一篇文章再自己进行配置就容易多了
2. 新建文章时的默认模板
当我们使用 hexo new "filename"
新建一个文章的时候,会使用默认的模板建立
为了配合主题更好的使用,我们可以把默认模板修改成与主题相符的主题页面
模板文件在博客根目录的 scaffolds
文件夹下
修改 page.md
1 | --- |
修改 post.md
1 | --- |
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 | hexo.extend.filter.register('after_post_render', function(data){ |
这一部分将图片链接的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仓库,并起一个仓库名,公开仓库即可
然后在GitHub中获取一个token(它可以让程序拥有控制仓库的权限)
然后设置一个Note作为token的标记,下面的选项只把repo打钩即可
之后网页滑到最下面,Generate token
生成token,并复制,记住这个token只显示一次,如果不慎把网页关闭,就只能重新生成一次token了
然后我们下载一个图片上传工具,在这里我们使用PicGo(点击下载),下载完后安装打开,在图床设置处配置GitHub图床
-
设定仓库名:填写上面创建的仓库,格式为
用户名/仓库名
; -
设定分支名:一般默认填
master
即可; -
设定token:将上面生成的token粘贴进去;
-
指定存储路径:想把图片放到仓库的哪个位置就设置哪个路径,比如
img/
,注意文件夹的后面一定要带/
否则会被当做文件处理; -
设置自定义域名: 这里我的设置是
1 | https://cdn.jsdelivr.net/gh/BayMRX/Blog_source@master |
其中:
gh
表示来自于GitHub仓库BayMRX/Blog_source
表示仓库名master
是仓库的分支
配置完成,确定保存即可。
然后就可以通过PicGo方便地上传图片了,它支持拖拽、点击、剪贴板上传,上传后,图片链接会直接复制到剪贴板中。
需要注意的地方:
这里创建GitHub仓库的时候,不能创建私人仓库,否则会无法连接,提示
所以创建的时候要创建公开仓库。
主题再创作——在原有主题上再添加一些功能
Valine评论系统
评论系统是搭建好了,测试也可以正常使用,就是如果有什么人对我的文章进行评论了的话,我也不知道啊。一番搜索找到了解决办法,Valine评论系统是基于 Leancloud的云引擎与云函数,可以提供邮件通知的服务。
在这里找到了一篇文章供作参考:Hexo 优化 — 支持邮件通知的评论 Valine 增强版
★★2020-06-18
更新:最近官方对于LeanCloud服务器的唤醒进行了限制,没法使用重发函数对服务器进行唤醒,导致无法正常使用邮件提醒服务。查看日志它会提示"因流控原因,通过定时任务唤醒体验版实例失败,建议升级至标准版云引擎实例避免休眠"。去网上查找资料,发现还是有解决办法的,参考小康大佬的博客:优雅解决 LeanCloud 流控问题
这里我使用的是大佬的方案四解决的,唤醒计划依然是每20分钟一次。
提交网站到搜索引擎(SEO优化)
在我们刚建立好网站时,搜索引擎无法检索到我们的网站。可以在搜索引擎中输入site:<域名>
来查看网站是否已被搜索引擎收录。感谢Hexo + Next 主题博客提交百度谷歌收录提供教程参考。
1. 验证站点
有三种验证方式,文件验证、html 标签验证、cname 解析验证。可参考网站验证
2. 生成sitemap站点地图并提交
3.静态资源压缩优化
对于个人博客,访问速度的优化是很有必要的,当然访问速度越快越有利于搜索引擎排名的靠前。所以要想提高博客的页面加载速度。可以考虑对页面的静态资源进行压缩,我们自己生成的html、css和js文件,为了可读性会有很多换行和空格,这对浏览器来说会降低页面渲染的速度。
安装hexo-neat插件
1 | npm install hexo-neat --save |
在配置文件_config.yml
中添加配置
1 | # hexo-neat |
有些js或css文件压缩后可能会失效,如果发现页面某些功能不正常或者无法生成静态页面文件,可以配置跳过压缩对应的文件
1 | neat_js: |
添加404页面
尝试过网上介绍的办法,直接 hexo new page 404
生成404页面不能正确跳转到自己定义的404页面,而是跳转到服务器默认的白色404页面
再次百思不得其解,又是一波疯狂的查阅资料,发现是Nginx的问题,需要对Nginx进行配置才能正确跳转到自定义的404页面
首先我们要建立一个404.html
文件在博客根目录下的/source
文件夹中
网页的内容这里我是用腾讯的404公益页面,也算是行善了吧,当然也可以把页面设计成自己想要的任何亚子
在这里附上调用腾讯404公益页面的网页源码
1 |
|
如果这样使用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页面
文章复制添加版权小尾巴
我们借助于主题,已经把文章末尾加上了版权说明信息
但是加上这个似乎并没有什么卵用,我们在访问别人的博客时,比如CSDN这一类,如果要从他们的博客里面复制一些文字,粘贴出来总会带有作者版权的小尾巴,那么在Hexo里面怎么实现这个功能呢。又是一波疯狂的资料查阅,发现网上大部分的功能修改都是基于ejs和swig模板引擎的主题,而我使用的Butterfly主题是用的pug模板引擎,这就造成了不能通过直接添加文件的大麻烦。
(2020.1.10更新)这里添加版权小尾巴在最新版本的主题中已经可以实现了,并且可以自由开启和关闭文章的复制功能,修改主题配置文件中对应的设置即可实现:
1 | # copy setting |
既然不能直接添加,那么就自己进行移植,在了解了一丢丢pug的语法之后,发现可以通过在pug文件中嵌入js脚本文件来实现
—正片开始—
首先在主题根目录的Butterfly/source/js
文件夹中新建一个js文件copy_right.js
,内容为
1 | !function() { |
然后要修改我们的pug文件。进入到Butterfly/layout
目录,找到post.pug
文件用记事本或者Notepad++等编辑器打开,找到block content
这个块,在下面的if语句
的最后添加一句
1 | script(src='/js/copy_right.js') |
最终代码
1 | if (theme.post_copyright && theme.post_copyright.enable) |
刚加的语句是在if下面,一定要注意好缩进关系!!!
然后~~hexo clean && hexo g -d
生成部署,打开自己的一篇文档复制粘贴,然后就会惊奇的发现多了小尾巴
灰常感谢驱蚊器喵#ΦωΦ提供技术参考
分割线o( ̄ヘ ̄o#)
以下内容为待完成,会持续更新……参考链接
添加live 2D(看板娘)
1.安装
进入Hexo根目录安装live2d插件
1 | npm install --save hexo-helper-live2d |
然后安装live2d模型,使用npm install {packagename}
进行安装,模型的包名将会在packages/
中以文件夹形式存在,现有的模型有:
1 | live2d-widget-model-chitose |
2.配置
修改根目录下的_config.yml
文件,添加自定义配置
1 | # Live2D |
3. 生成博客
1 | hexo clean |
设置永久化URL
Hexo 默认文章链接生成规则是按照年、月、日、标题来生成的。一旦文章标题或者发布时间被修改,URL 就会发生变化,之前文章地址也会变成 404,而且 URL 层级很深,不利于分享和搜索引擎收录。
如果文章标题中有中文,URL 被转码后会很长。。
Hexo有一个插件hexo-abbrlink会为每一篇博客生成唯一的ID作为博客的唯一链接,不会受标题和文章内容改变的影响
1.安装
使用npm命令直接安装:
1 | npm install hexo-abbrlink --save |
2.配置
修改博客根目录的_config.yml
文件的permalink
,并添加abbrlink
选项:
1 | # permalink: :year/:month/:day/:title/ |
其中permalink
中的posts
是自定义的目录,后面为固定格式,添加.html
后缀是为了方便搜索引擎检索。下面的abbrlink
选项是永久链的计算方法与进制,默认即可。
3.验证
使用hexo clean
清理本地文件,然后重新生成,在博客的md
文件中就可以看到abbrlink
内容:
1 | abbrlink: 87613c70 |
这一串字符串就会作为博客的唯一标识出现在博客的URL中。
将博客同步部署到GitHub Pages
已填坑,详见:使用Hexo+GitHub搭建自己的个人博客
主题更多新鲜好玩的玩法~~
参考小康大佬的博客Hexo 博客之 butterfly 主题优雅魔改系列