建立这个博客的过程中碰到了一系列的问题，这个网站也经过了许多的完善及优化才变成当前这个模样，本篇记录了每次优化以及问题修复的过程。
基础信息
本博客采用的hexo架构，使用了matery主题，部署在GitHub Pages上，莫得钱买域名，所以就用着原本的网址。由于国内访问github较慢，使用了jsdelivr提供的免费的cdn加速服务。
优化历程
1 音乐播放器
matery主题内置了音乐播放器，在主题的_config.yml文件中将music.enable设置为true即可开启：
但在切换为网易云的源后，发现歌曲名居然和背景一样几乎是白色，基本看不清，为了改变颜色，我们找到负责此处的css文件，位置是/source/libs/aplayer/APlayer.min.css，将其中的.aplayer-title{font-size:14px}改为.aplayer-title{font-size:14px;color:#666}，当然color可以自己随意选择，上方播放列表里的歌名也为白色，但css文件里没有关于此部分的颜色设置，于是需要自己再加上.aplayer-list-title{color:#666}
2 开启评论区
matery内置了几种评论插件，有gittalk、gitment、来比力等，我选择了valine，因为这个插件游客不需要登录即可评论，之后使用了Valine-Admin(by @zhaojun1998)的邮件提醒功能，在Leancloud进行设置后，当有人发布了评论后，我的邮箱会收到提醒：
同样，在你填写了邮箱后评论，你的邮箱也会收到邮件：
但是由于leancloud免费版无法每天24小时运行，在0-7点无法进行邮件提醒。
3 代码高亮及行号
hexo自带代码高亮的功能，但是为了更加美观，安装了hexo-prism-plugin插件，之后将 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，配置如下：
highlight:
enable: false
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'vscode'
line_number: true # default false 其中theme为具体高亮类型，内置了几种主题，也可以自行添加喜欢的高亮主题，本博客用的是类似vscode drak模式下的颜色，
搜索你想要的高亮主题的css文件，将其放置在\node_modules\prismjs\themes下，并改名为prism-***.css,再更改配置文件的prism_plugin.theme为***即可，像我此处文件为prism-vscode.css，配置为theme: 'vscode'。
切记使用此插件需要使用hexo默认的marked渲染器我当时安装了markdown-it作为渲染器，导致行号显示不正常。
4 看板娘
作为一个老二次元，一个看板娘是博客的必须品，这里使用了一个功能比自带看板娘更加丰富的版本，在基础上增加了不少新功能。部署的话也不是很难，可以直接在网页内添加对原作者项目的引用，即在<head>或<body>标签内添加如下代码
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>当然由于此插件需要 Font Awesome 4.7.0 支持，需要加载相关样式表，在 <head>中加入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">否则无法正常显示。（如果网页中已经加载了 Font Awesome，就不要重复加载了）
也可以将此插件放到服务器上而非cdn加载，本博客也是这么做的，下载下此项目，放置在主题的source文件夹下，并修改autoload.js文件,更改path
//const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
const live2d_path = "/live2d-widget/"; 对于matery主题，修改前端页面时，<head>部分的文件在themes\matery\layout_partial\head.ejs，加入
<script src="/live2d-widget/autoload.js"></script>来开启看板娘。看板娘的位置大小等属性在live2d-widget/waifu.css中更改，像此处就将其从默认的左侧移动到了右侧。其行为模式在waifu-tips.js中修改。如果想进一步更改外形等选项，需要在autoload.js中修改其API，默认使用的是原作者提供的API,想进一步修改需要自己搭建API。
5 可视化博客编辑
用原生的方法编辑博客是很不方便的，即直接修改_post文件下的.md文件来进行博客编辑，这时可以安装hexo-admin插件进行可视化的编辑，使用时执行hexo s -d,网页登录http://localhost:4000/admin即可,效果如下图：
此时在编辑页面中粘贴图片会自动生成如下的链接并在image文件夹下生成图片文件
在windows下这个格式无法正常显示图片，需手动将斜杠更换为如下形式
即可正常显示。
但当博客变多后，所有图片放在一个文件夹会非常杂乱，于是我们可以安装hexo-asset-image插件，这样在新建博客时会自动在_posts文件夹下建立与文章同名的文件夹，将图片放在此文件下，博客中可以通过间接位置引用图片，十分方便，像之前的图片引用可直接写为：
 6 pjax无刷新加载
在使用音乐与看板娘时发现了一个较为麻烦的问题：在网页上点击跳转后，音乐与看板娘组件重新加载，会导致音乐中断并重新播放，解决方法是采用pjax技术，pjax 的工作原理是通过 ajax 从服务器端获取 HTML，在页面中用获取到的 HTML 替换指定容器元素中的内容。然后使用 pushState 技术更新浏览器地址栏中的当前地址。这样博客跳转时只刷新不同的部分，音乐，看板娘等无需进行刷新。不仅解决了音乐中断的问题，这种方式也可以加快网页的加载。
首先通过npm下载jquery-pjax组件，将其放在主题的source文件夹下,我此处放在了source/libs下,之后需要在前端加载其js文件收是在head.ejs文件中,添加
<script src="/libs/jquery-pjax/jquery.pjax.js"></script> 要注意的是pjax需要jquery组件的支持，因此此条语句一定要放在jquery的加载语句之后，否则无法正确执行。
之后，添加pjax的命令，在<head> <body>中均可，如下
<script>
$(document).pjax('a[target!=_blank]', '#pjax-container', {
fragment: '#pjax-container',
timeout: 8000,
}).on('pjax:complete', function() {
// pjax 加载完成要做的操作
}).on('pjax:start', function() {
// pjax 加载开始需要做的操作
}).on('pjax:end', function() {
// pjax 加载结束需要做的操作
// 其他操作;
});
</script> 这里指定进行不为新窗口跳转时，只有id为pjax-container的部分进行刷新。对比网页跳转时的改变，发现网页最上方的header以及最下方的footer部分是不需要刷新的，而音乐和看板娘组件也正好在footer标签中。于是将需要刷新的主体body部分使用id为pjax-container的标签包裹。对layout/layout.ejs进行修改,将
<%- partial('_partial/header') %>
<%- body %>
<%- partial('_partial/footer') %>改为
<%- partial('_partial/header') %>
<%- body %>
<%- partial('_partial/footer') %>这样网页跳转时只有被包裹的部分进行刷新。
但这样加载后会出现问题，因为在pjax中是局部刷新的，一些js插件没有收到页面的加载信号不会被执行。最明显的是评论组件在页面跳转后失效。
为了修复这个问题，在stackoverflow查看了一些有关pjax的问题，最初的想法是在pjax加载后，重新执行valine的初始化函数，但是valine公布的js是min.js的格式，经历过压缩，变量名全部替换成了a、b、c等且if都被优化成了诸如a?b:c的形式，尝试阅读了一阵子源码后只好放弃。但突然发现其实valine的初始化是在pjax的刷新容器内的，valine初始化是正确的，问题在于依赖的leancloud的av对象不支持重新初始化，尝试重新执行av-min.js也会出错。
幸运的是，在github该项目下，有人在issue中提出过使用pjax不兼容的问题，作者在去年给出了解决方案，即在valine的初始化选项中加入path选项，下图是官网的描述：
这样一来，valine就可以根据当前的url来判断从av对象的哪一部分来获得正确的评论。然而令人头疼的是文章下的评论正常工作，但留言板却读取不到评论内容。由于没上过前端开发的课程，对相关的调试不是很熟悉，磕磕绊绊地经过一阵子排查后，在leancloud发现通过pjax跳转到的评论页的url与直接刷新的不同：
容易看到pjax跳转到的contact后面缺少一个’/‘。这正是读取不到评论的罪魁祸首。
接下来的工作就很容易了，通过阅读layout文件夹下的ejs文件，定位到href生成的地方：
在url后加上’/‘即可。
7 开启Mathjax数学公式渲染
markdown本身无法进行数学公式的渲染，需要借助MathJax。Matery主题自带了MathJax功能，由于加载耗时，只有需要时在文章的Front-matter设置开启。但（…）也会被默认被识别为行内公式内容，于是我们需要去post.ejs中，将
<script>
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$', '$'], ['\(', '\)']]}
});
</script>改为z
<script>
MathJax.Hub.Config({
tex2jax: {inlineMath: [ ['$', '$'] ] ]}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>注意到我们在下方又添加了一行MathJax.Hub.Queue(["Typeset",MathJax.Hub]);这是因为使用了pjax，需要在页面变化后重新加载MathJax的渲染，否则在跳转后公式会显示错误。
其余小修改
- 导航栏绿色不太搭配，改为与背景图片轮换的颜色。修改了
matery.css中的.bg-color项 - 歌词与最下方文字重叠，改至右上方。修改了
Aplayer.min.css中的.aplayer.aplayer-fixed .aplayer-lrc项，手机端维持原样。
结语
如果发现了博客有关的bug或是相关的建议，欢迎在此篇的评论区或者留言板留言，有相关问题也可以互相交流。😑
