Hello World!
引言
这一周终于开始重构个人博客了。
记得在大一的时候，某次上完离散数学，我无意中翻到了利用了 Github Pages 来搭建个人博客的文章，当时觉得挺有意思的，就跟着那篇教程一步一步的搭建了个基于 Hexo 的个人博客，当时是部署在 Github 赠送的个人域名上。再之后，由于博客维护麻烦+学业压力(雾)+三分钟热度，我没有继续维护更新，博客也就依旧停滞在时光中，保留着当时刚搭建完成的样子(乐)。
时至今日，大三的生活也基本结束了。在没有学业压力的大四生活(现在发现好像因为毕设白焦虑了一段时间,但总体而言大四挺自在的)中，打算让自己的生活更加充实、有趣一点。许多知乎、微信、小破站中收藏了但却一直以学业压力推脱而放着积灰的的视频、教程、项目、书籍等表项，也希望能在这一时间段内一点一点的解决处理完成(有点类似于放假前的复习规划啥的了)。于是在这几天的零碎时间内，把个人博客的基础布局搭了起来。
至于这个博客的作用嘛，现在的想法是一方面用于展示自己的部分信息，另一方面则是分享记录自己的工具学习、之前或之后遇到的，某些基本没有参考资料的 bug 的处理方法、平时做的一些事、某些想法以及可能有的极少数深夜 emo 时将所思所想流于笔下的产物(fei liao).
以下大约就简单介绍下本博客的搭建及功能开发计划叭
博客搭建流程
功能开发计划
- 模板获取与部署
- ui、分享链接、个人信息的个性化
- 百度/谷歌/必应搜索引擎收录申请
- 部署启用评论系统
- 在侧栏添加网易云音乐栏
- 在右下角添加 live2d
- 添加动态崩溃功能（
- To be continue…
博客部署
最开始的时候，我参照了吴坎师兄的博客，也想要搭建一个简洁干净、以内容展示为主的博客。原本想基于吴坎师兄的博客模板进行修改的，但整着整着，我就意识到，我的需求跟师兄的模板匹配度并不算特别大，某些页面需要大改()，工作量略微有 yi 点点大。于是想找找看有没有其他符合需求的模板，挑的过程也是 Jekyll 框架的主题为主，因为看起来(和实际使用起来)其比 Hexo 框架好处理维护多了，最后挑中了 Chirpy 这款主题。由于考虑到需要对模板进行较大的修改，因此基于 fork 的方式获取了模板。最开始地时候，跟着模板中的教程一步步安装依赖并配置就可以完成一大半工作了。唔，至少呢，配置好后已经可以通过个人域名访问博客了。
ui、分享链接、个人信息的个性化
这一部分的内容主要是对模板的一些基础配置，包括但不限于：用户名、博客名、侧边栏的布局、头像的修改等。基本上修改都是针对 *.yml 文件进行的，修改起来也比较方便，按照模板中的注释修改即可。这里说一个小插曲，我用闲暇时间部署了两三天博客，7月2号时一切基本正常了，前两步都很顺利。结果3号早上，突然发现 Chirpy 模板有个版本更新，停用了一部分即将停止提供服务的插件(扶额.jpg)。考虑到博客还只是半成品，并且该更新确实有部分采用的价值，于是嘛，只能撤销更改，拉取最新的模板，参照旧版代码重新修改配置文件，好在一切都挺顺利。
谷歌/必应搜索引擎收录申请
博客是部署成功了，但只有搜索引擎收录了，才能让其能在搜索引擎上作为搜索结果来源出现，从而使别人能发现并阅读。这就需要我们在搜索引擎上提交认证以及申请，通过后搜索引擎会通过爬虫定期爬我们的网站，并不定期收录。一般而言，验证方式有多种，包括直接在域名中添加 DNS 记录的网域认证，通过在网页中添加指定代码的网页认证等，为了方便起见，我都是通过 DNS 记录或者放置文件进行认证申请。
部署启用评论系统
采用 giscus 作为评论系统的基础，根据摸索出来的教程。首先先去 giscus 官方主页，根据上面的需求填入创建仓库并填入对应的名字，之后将提供的代码中字段值填入自己的_config.yml文件中，最后设置active: giscus即可。
添加网易云音乐栏
经过简单的外链播放器生成以及 css 样式的修改，成功地添加上了网易云音乐栏，本地测试也可以正常播放。只是说，实际效果跟理想效果有所出入，一方面风格不是很搭，另一方面在切换页面时会出现播放器重置的情况，这个问题还需要进一步解决。考虑到需求问题，暂时先将其注释隐藏了。如果有需要的话，可以在仓库源码_includes/sidebar.html中或者 F12 调出源码取消网易云播放器的注释以查看简单微调后的效果。
添加 live2d
基于外链的 live-2d 部署比想象的简单。首先从吴坎师兄的博客那获取外链引入代码(),然后对于 Chirpy 主题，创建文件_includes/live-2d.html用来放置该代码，之后在_layouts/default.html中引入该文件就行啦~(实际使用时，发现这样子只能在本地测试才会显示live-2d，经过debug,参考live2d-widget的代码，经过一番尝试后，还是没解决bug，最后查看源码，终于发现原因。 github 生成页面时不同于本地生成，会压行，导致上述方法引入的界面会被压缩到一行，从而行注释符后的所有脚本都会注释掉😓)。之后的工作就是参照参数文档以及 github 的模型仓库配置自己的 live-2d 了(忽然发现专业综合实践这门学分少事情多的课还是有那么一点用的)。顺带一提，为了让页面不冗余，我还注释掉了主题自带的回到页首小图标，有需要的小伙伴可以注释回去。模型收集自imuncle/live2d。
我调了一下午 bug，最终才定位找到这😩
动态崩溃功能（
顾名思义，就是让用户切换窗口时让网站崩溃掉（。食用方法类似于 live-2d。找个地方把以下代码放进去就行了。参考自：改变title if ···。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
(function() {
var OriginTitile = document.title, titleTime;
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
document.title = 'Σ(っ °Д °;)っ哎呀，崩溃啦！';
clearTimeout(titleTime);
} else {
document.title = '(/≧▽≦/)咦！又好了！|' + OriginTitile;
titleTime = setTimeout(function() {
document.title = OriginTitile;
},1500);
}
});
})();
</script>
部署中遇到的一部分问题以及解决方法
1. linux 系统中 node.js 版本过低
在根据教程安装依赖的时候，由于 node.js 的版本过低，会导致弹出大量警告。解决方法是先将仓库代码回退到修改前，并升级 node.js 版本，之后重新安装依赖。linux 系统下的部分相关指令如下：
1
2
3
4
5
6
7
8
9
10
# 清除缓存信息
npm cache clean -f
# 下载node安装包
npm install -g n
# 升级到nodejs最新稳定版本
n stable
# 查看当前版本
node -v
# 更新npm 注意要确保node先更新，避免依赖出错
npm install -g npm
2. 下载过慢或无法下载
由于网络环境的原因，n stable 可能出现一直不显示下载条或下载过慢的情况，由于该命令不走系统代理，我采用的方案是使用 proxychains 工具让其强制走代理(瞬间起飞！)。proxychains 工具十分好用与方便，经过几天的使用，现在我基本上遇见网络问题都下意识地想用它()，至于具体使用教程可以参考我的另一篇文章(TODO)。