为next主题的主页文章添加阴影效果
NexT主题添加搜索功能
修改nexT主题文章页面宽度
修改文章背景颜色
themes\next\source\css\_custom\custom.styl下
.main-inner {
background: #fff;
opacity: 0.9;
}
修改文章字体颜色
themes\next\source\css\_custom\custom.styl下
.post-body {
/* 字体颜色 */
color: #000;
}
自定义样式参考
首页摘要图片
在网上查了很多博客，很多都是先通过hexo-asset-image建立跟文章同名文件夹之后，在文件夹里添加图片。
然后在frontmatter里添加image:url，其中url就是图像的相对路径，文章名+图像名。
但是我试了并没有效果，查看源码发现src中的图像路径差别很大。于是又试了另一种方法，将图像放到统一的images文件夹中，然后frontmatter里就写成image:/images/imagename.jpg的格式，最终成功了。
虽然这种方法可以用，但是因为所有文章图片都放在了同一个文件夹，所以相对管理起来更麻烦一些。
HEXO支持手写流程图
暂时不打算添加这个功能，因为不需要，不过先在这里记录一下。
字数统计
昨天查了一些字数统计的博客，因为时间都是18年以前的，之前的方法都失效了。
今天又查了一些博客，现把目前可行的方法记录如下。
首先安装hexo-symbols-count-time包：
$ npm install hexo-symbols-count-time -save
然后在博客配置文件_config.yml中添加
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
最后在nexT配置文件_config.yml中添加
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275
这样就可以显示出字数统计和预估阅读时长了。但是字数统计不准确，等之后再考虑优化吧~
Hexo 中 MathJax 的静态显示（svg）
因为我的博客以后大部分用来记录科研方面的文章，会经常用到数学公式。之前使用的mathjax虽然能够正常显示，但每次都要动态加载，渲染需要好几秒时间，总觉得阅读体验不够流畅，于是在网上找到了下面这篇文章：
但是按照这篇文章来更改的时候，发现还是存在一些小问题，所以把完整流程以及需要注意的地方记录如下：
1）安装
在博客根目录~/blog/下
npm i -g gulp@4.0.2
npm i -S gulp@4.0.2 gulp-mathjax-page
这里需要注意一下，因为gulp版本是迭代更新的，我现在更新这篇文章时版本已经更新到了4.0.2，而我参考的这篇文章当时是3.9.1，如果用的是旧版本，npm会提示当前版本已弃用，所以这里安装gulp的时候需要根据自己当时的最新版本来更新版本。
版本查询网址：https://www.npmjs.com/package/gulp
2）新建
在博客根目录~/blog/下建立js文件gulpfile.js，添加内容如下：
var gulp = require('gulp')
var mathjax = require('gulp-mathjax-page')
// gulp.task('mathjax', function() {
// gulp.src('./public/**/*.html')
// .pipe(mathjax({
// mjpageConfig: {
// format: ['TeX'],
// singleDollars: true,
// cssInline: false,
// mhchem: {legacy: true}
// },
// mjnodeConfig: {
// svg: true,
// css: false,
// speakText: false
// }
// }))
// .pipe(gulp.dest('./public'))
// })
gulp.task('mathjax', done => {
gulp.src('./public/**/*.html')
.pipe(mathjax({
mjpageConfig: {
format: ['TeX'],
singleDollars: true,
cssInline: false,
mhchem: {legacy: true}
},
mjnodeConfig: {
svg: true,
css: false,
speakText: false
}
}))
.pipe(gulp.dest('./public'))
done();
});
这里还存在一个问题，上面注释的内容是我参考的文章中给的代码，但是在使用的时候npm会提示错误：
我把错误提示在Google上搜了一下，在StackOverflow上看到有人也有同样的错误，根据问题下面给出的解决方案，把代码修改成了上面的形式，然后就可以正常使用了。上面代码中注释部分可以删除，这里只是为了展示错误的样例。
3）样式定制
文件位置：~/blog/themes/next/source/css/_custom/custom.styl
.mjpage__block {
display: inline-block;
text-align: center;
width: 100%;
overflow-x: auto;
vertical-align: bottom;
}
/*
如果出现尺寸过大的问题，则加上以下代码
*/
.mjpage {
font-size: 10px;
}
4）使用
hexo clean && hexo g && gulp mathjax && hexo d
本地无法在浏览器直接hexo s查看预览，但可以gulp mathjax后去 public 文件夹下找到相应文件并用浏览器打开预览。当然，这样预览过于麻烦了，所以建议直接用 Mathjax 官网的 Live Demo 预览，部署前再用上面这种方法确认一遍即可。
这里注意一下，每次生成页面时都要输入gulp mathjax,不然下一次渲染还是使用原生的mathjax，又回到了之前的加载速度。
记一次智障操作
自从建立整个博客以来，一个问题困扰了我好久，就是为啥我的博客生成的路径跟他们的都！不！一！样！这是我之前的文章路径：
https://odinaris.github.io/undefined/06/28/hexo主题优化配置记录/
于是我就陷入了深深的疑惑，在网上搜索也不得结果。到底为啥我的路径中有undefined啊！
直到我在_config.yml中发现了这个：
url: http://odinaris.github.io
root: /
permalink: :yeard/:month/:day/:title/
permalink_defaults:
What the Fuck!?
我啥时候干的？一脸懵逼好嘛！
删了那个该死的d之后，现在终于正常了：
https://odinaris.github.io/2019/06/28/hexo主题优化配置记录/
果然是瞎啊。。老年人玩什么博客。。
