更换主题模板，实现个性化定制
定制
我们要定制自己的博客的话，首先就要来了解一下Hexo博客的一些目录和文件的作用，以及如何平滑更换漂亮的主题模板并加入自己的定制源代码实现个性化定制
1. Hexo相关目录文件
1.1 博客目录构成介绍
从上图可以看出，博客的目录结构如下：
1 | - node_modules |
node_modules是node.js各种库的目录，public是生成的网页文件目录，scaffolds里面就三个文件，存储着新文章和新页面的初始设置，source是我们最常用到的一个目录，里面存放着文章、各类页面、图像等文件，themes存放着主题文件，一般也用不到。
我们平时写文章只需要关注source/_posts这个文件夹就行了。
1.2 hexo基本配置
在文件根目录下的_config.yml，就是整个hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。
1.2.1 网站
参数描述title网站标题subtitle网站副标题description网站描述author您的名字language网站使用的语言timezone网站时区。Hexo默认使用您电脑的时区。时区列表。比如说：America/New_York,Japan, 和UTC。
其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。
1.2.2 网址
参数描述url网址root网站根目录permalink文章的永久链接格式permalink_defaults永久链接中各部分的默认值
在这里，你需要把url改成你的网站域名。permalink，也就是你生成某个文章时的那个链接格式。
比如我新建一个文章叫temp.md，那么这个时候他自动生成的地址就是https://yoursite.com/2018/09/05/temp 。
以下是官方给出的示例，关于链接的变量还有很多，需要的可以去官网上查找永久链接。
参数结果:year/:month/:day/:title/2019/08/10/hello-world :year-:month-:day-:title.html 2019-08-10-hello-world.html :category/:titlefoo/bar/hello-world
再往下翻，中间这些都默认就好了。
1 | theme: landscap |
theme就是选择什么主题，也就是在themes这个文件夹下，在官网上有很多个主题，默认给你安装的是lanscape这个主题。当你需要更换主题时，在官网上下载，把主题的文件放在themes文件夹下，再修改这个主题参数就可以了。
1.2.3 Front-matter
Front-matter是md文件最上方以---分隔的区域，用于指定个别文件的变量，举例来说：
1 | title: Hexo+Github博客搭建记录 |
下是预先定义的参数，您可在模板中使用这些参数值并加以利用。
参数描述layout布局title标题date建立日期updated更新日期comments开启文章的评论功能tags标签（不适用于分页）categories分类（不适用于分页）permalink覆盖文章网址
其中，分类和标签需要区别一下，分类具有顺序性和层次性，也就是说Foo，Bar不等于Bar，Foo；而标签没有顺序和层次。
1 | --- |
1.2.4 layout(布局)
1.2.4.1 post
当你每一次使用代码
1 | hexo new XXX |
它其实默认使用的是post这个布局，也就是在source文件夹下的_post里面。
Hexo有三种默认布局：post、page和draft，它们分别对应不同的路径，而您自定义的其他布局和post相同，都将储存到source/_posts文件夹。
而new这个命令其实是：
1 | hexo new [layout] <title> |
只不过这个layout默认是post罢了。
1.2.4.2 page
如果你想另起一页，那么可以使用
1 | hexo new page newpage |
系统会自动给你在source文件夹下创建一个newpage文件夹，以及newpage文件夹中的index.md，这样你访问的newpage对应的链接就是https://xxx.xxx/newpage
1.2.4.3 draft
draft是草稿的意思，也就是你如果想写文章，又不希望被看到，那么可以
1 | hexo new draft newdraft |
这样会在source/_draft中新建一个newdraft.md文件，如果你的草稿文件写的过程中，想要预览一下，那么可以使用
1 | hexo server --draft |
在本地端口中开启服务预览。
如果你的草稿文件写完了，想要发表到post中，
1 | hexo publish draft newdraft |
就会自动把newdraft.md发送到post中。
2. 更换主题
我们在了解Hexo博客文件基础之后，知道主题文件就放在themes文件下，那么我们就可以去Hexo官网下载喜欢的主题，复制进去然后修改参数即可。
网上大多数主题都是github排名第一的Next主题，网上看到一个主题感觉还不错：hexo-theme-matery，地址在传送门。这个主题看着比较漂亮，并且响应式比较友好，点起来很舒服，功能也比较很多。
特性：
- 简单漂亮，文章内容美观易读
- Material Design 设计
- 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
- 首页轮播文章及每天动态切换 Banner 图片
- 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替）
- 时间轴式的归档页
- 词云的标签页和雷达图的分类页
- 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）
- 可自定义的数据的友情链接页面
- 支持文章置顶和文章打赏
- 支持 MathJax
- TOC 目录
- 可设置复制文章内容时追加版权信息
- 可设置阅读文章时做密码验证
- Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk）
- 集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能
- 支持在首页的音乐播放和视频播放功能
- 他的介绍文档写得非常的详细，还有中英文两个版本。效果图如下：
首先先按照文档教程安装一遍主题，然后是可以正常打开的，如果你是一般使用的话，基本没啥问题了。不过有些地方有些地方可以根据你自己的习惯和喜好修改一下， 下面记录一下我这个博客修改了的一些地方。
2.1 新建文章模板修改
首先为了新建文章方便，我们可以修改一下文章模板，建议将/scaffolds/post.md修改为如下代码：
1 | title: {{ title }} |
这样新建文章后 一些Front-matter参数不用你自己补充了，修改对应信息就可以了。
2.2 添加404页面
原来的主题没有404页面，我们加一个。首先在/source/目录下新建一个404.md，内容如下：
1 | title: 404 |
然后在/themes/matery/layout/目录下新建一个404.ejs文件，内容如下：
1 | <style type="text/css"> |
2.3 关于页面增加简历
修改/themes/matery/layout/about.ejs，找到<div class="card">标签，然后找到它对应的</div>标签，接在后面新增一个card，语句如下：
1 | <div class="card"> |
这样就会多出一张card，然后可以在/source/about/index.md下面写上你的简历了，当然这里的位置随你自己设置，你也可以把简历作为第一个card。
2.4 数学公式渲染和代码高亮
2.4.1 解决mathjax与代码高亮的冲突
如果你按照教程安装了代码高亮插件hexo-prism-plugin，单独使用是没有问题的，但如果你又使用了mathjax，并且按照网上教程，安装kramed插件并修改了js文件里的正则表达式（为了解决markdown和mathjax的语法冲突），那你的代码就无法高亮了。解决方法很简单，别用kramed插件了，还用原来自带的marked插件，直接改它的正则表达式就行了。
2.4.2 加数学公式显示
打开/themes/matery/layout中的post.ejs文件，在最下方粘贴如下代码：
1 | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js"></script> |
由于markdown语法与mathjax语法存在冲突，所以还需要修改源文件。
打开/node_modules/marked/lib中的marked.js文件，第539行的escape:处替换成：
1 | escape: /^$[`*\[\]()#$+\-.!_>])/ |
第553行的em:处替换成：
1 | em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/ |
这时在文章里写数学公式基本没有问题了，但是要注意：
数学公式中如果出现了连续两个{，中间一定要加空格！
举个例子:
行内公式：$y=f(x)$
代码：
1 |
行间公式：
\[y = {f_{ {g_1}}}(x)\]
代码：
1 | \\[y = {f_{ {g_1}}}(x)\\] |
注意上面花括号之间有空格！
2.5 增加建站时间
修改/themes/matery/layout/_partial中的footer.ejs，在最后加上：
1 | <script language=javascript> |
然后在合适的地方（比如copyright声明后面）加上下面的代码就行了：
1 | <span id="sitetime"></span> |
2.6 修改不蒜子初始化计数
因为不蒜子至今未开放注册，所以没办法在官网修改初始化，只能自己动手了。和上一条一样，我们在/themes/matery/layout/_partial里的footer.ejs文件最后加上：
1 | <script> |
然后把上面几行有段代码：
1 | <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %> |
修改为：
1 | <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %> |
其实就是增加了两个
1 |
|
第二步：
1 | npm install live2d-widget-model-shizuku |
这里的动漫模型可以改，只需要下载对应模型就行了，你可以官方仓库去看有哪些模型，下载你喜欢的就行。
第三步：
在根目录配置文件中添加如下代码：
1 | live2d: |
然后hexo g再hexo s就能预览出效果了，但是有个注意的地方，这个动漫人物最好不要和不蒜子同时使用，不然不蒜子会显示不出来。
解决动漫人物和不蒜子不能同时使用的bug：
打开themes\matery\layout\_partial中的footer.ejs，将本站总访问量和访客数的代码改为如下：
1 | <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %> |
变化就在下面两句，将源代码对应字段后面的＜/span＞写在前面了。
1 | <span id="busuanzi_container_site_pv" style='display:none'></span> |
发现按照上面改了过后，又出现一个新bug：文章头部的阅读次数不显示了，解决办法：
打开themes\matery\layout\_partial中的post-detail.ejs，找到对应代码字段：
1 | <% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %> |
修改为下面的就可以了：
1 | <% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %> |
2.8 添加评论插件
由于这个主题自带了gittalk、gitment、valine等评论插件，所以我们只需要对应插件参数就行了。
2.9 添加网易云音乐BGM
写文章的时候，想插入一段BGM怎么办？
其实我们可以借助一些在线音乐的外链播放方式，首先打开网易云网页版，找到想听的歌曲，然后点击生成外链：
可能你会遇到问题，比如点击生成外链会提示你由于版权原因，不能生成，那么可以用下面办法目前还有效，不知道后面会不会失效
- 以Chrome为例，其他浏览器类似，打开歌单页面，在“生成外链播放器”上右击，点击审查元素（检查）
ctrl+shift+i； - 接着找到生成外链播放器这段文字直接双击复制前面的
/outchain/2/20707408/
- 然后在浏览器地址栏修改歌单链接，示例：https://music.163.com/#//outchain/2/20707408/
- 然后就转到外链设置页面了。
复制如下代码，粘贴到文章对应位置就行了，为了美观，设置一下居中，具体代码如下：
1 | <div align="middle">这里粘贴刚刚复制的代码</div> |
2.10 博客音乐板块
如果我们自己写博客写疲劳了，想放松一下听听歌又不想切出博客主页，那么我们可以自己定制一个博客音乐播放界面，把自己喜欢的歌曲都放进来，这里用到是Aplayer插件，但是歌曲来源需要我们自己定义，但是，因为各大音乐平台，由于版权原因，很多歌曲是不支持外链播放的，难道我们就必须每首歌下载然后上传云空间，再获取词曲封面么？这就比较麻烦了。其实不然，研究了半个小时，我发现可以采取下面的办法，很方便：
- 首先我们找到网易云在线平台，任意找到一首歌点进去播放，可以在地址栏拿到音乐
ID号 - 然后通过下面网址：https://music.163.com/song/media/outer/url?id=XXXXXX.mp3 ， XXXXXX就是歌曲
ID号，每一首歌我们只需要换掉这个ID号就行了,就相当于每一首的外链了 - 最后封面图也可以按
F12去找页面元素的链接，填到对应的musics.jason文件中就可以，批量填入，听到好听的歌曲随时更换随时新增，很方便。
操作如下图：
2.11 Valine评论模块修改
matery主题已经集成Valine评论模块，在主题配置文件.yml中配置相应的字段就行了。nable: true，XXX字段是需要自己注册登录leancloud官网，创建应用然后获取appId和appKey，其他参数根据自己的需求修改就是，如下：
1 | valine: |
2.12 添加博客动态标签
原理就是给博客增加一个事件判断：
打开博客主题文件夹，路径：themes/matery/layout/layout.ejs，在对应位置添加如下代码：
1 | <script type="text/javascript"> |
然后hexo clean&&hexo g即可。
2.13 添加鼠标点击烟花爆炸效果
在/themes/matery/source/js新建文件fireworks.js，并添加如下代码
1 | ; |
然后在/themes/matery/layout/_partial/footer.ejs中添加如下代码：\
1 | <% if (theme.fireworks.enable) { %> |
在主题配置文件.yml中配置:
1 | # 鼠标点击烟花爆炸动效 |
2.14 添加页面樱花飘落动效
在/themes/matery/source/js新建文件sakura.js，并添加如下代码
1 | var stop, staticx; |
1 | function Sakura(x, y, s, r, fn) { |
然后在/themes/matery/layout/_partial/head.ejs中添加如下代码：
1 | <% if (theme.sakura.enable) { %> |
在主题配置文件.yml中配置:
1 | # 页面樱花飘落动效 |
2.15 添加鼠标点击文字特效
在/themes/matery/source/js新建文件wenzi.js，并添加如下代码
1 | /* 鼠标点击文字特效 */ |
然后在/themes/matery/layout/_partial/head.ejs中添加如下代码：
1 | <% if (theme.wenzi.enable) { %> |
在主题配置文件.yml中配置:
1 | # 页面樱花飘落动效 |
2.16 添加页面雪花飘落动效
在/themes/matery/source/js新建文件xuehuapiaoluo.js，并添加如下代码
1 | /*样式一*/ |
然后在/themes/matery/layout/_partial/head.ejs中添加如下代码：
1 | <% if (theme.xuehuapiaoluo.enable) { %> |
在主题配置文件.yml中配置:
1 | # 页面樱花飘落动效 |
2.17 添加博客天气插件
在搜寻插件的过程中无意间用google搜到的一个网站，使用非常简单，在这里附上插件添加的方法
中国天气网：https://cj.weather.com.cn/plugin/pc
选择自定义插件—>自定义样式——>生成代码，然后会生成这样一段代码
1 | <!-- Weather Widget --> |
在/themes/matery/source/layout/_widget新建文件weather.ejs，把上面生成的代码添加进入,可以设置只有桌面端显示,如下修改:
1 | <!-- 天气接口 --> |
然后在/themes/matery/layout/_partial/layout.ejs中添加如下代码：
1 | <% if (theme.weather.enable) { %> |
在主题配置文件.yml中配置:
1 | # 天气接口插件 |
展示效果可以参考我的主页
当然,如果你不想搞这么复杂,可以直接将下面代码插入/themes/matery/layout/_partial/layout.ejs中即可使用:
1 | <script type="text/javascript"> |
2.18 修复 Valine 头像不显示问题
关于头像显示问题，先去注册Gravatar，之前看文档说是七天的同步时间，结果一直也没有显示头像，检查查看头像链接，发现把&v=1.3.x去掉就可以了，于是下载 js 文件valine，下载后然后编辑，搜索关键字&v=，找到g.params=”?d=”+i.indexOf(a>-1?a:”mp”)+”&v=”+o+d，将"&v="+o+d删除即可，然后在Gravatar拿到头像的url填上去就行了
1 | valine: |
原因就是链接后跟了个&v=1.3.x，解决就是将这段删掉就可以了，具体到Valine.mini.js文件就是删掉&v="+o+d即可
2.19 增加二级菜单
都知道，我们标题栏宽度有限，我们项目一多了，就放不下了，这时候你肯定就需要一个二级菜单来拆分一下项目，既可以减少标题栏项目数，使之更加清爽，又可以间项目分类，逻辑清晰。
好了，如果你用的matery主题，那么废话不多说，直接上教程，其实需要修改的就四个地方：matery.css/matery.js/navgation.ejs/mobile-nav.ejs
第一步，在/themes/matery/layout/_partial中找到mobile-nav.ejs，找到下面这段代码：
1 | <ul class="menu-list mobile-menu-list"> |
替换成下面的：
1 | <!-- 支持二级菜单特性 --> |
第二步，在/themes/matery/layout/_partial中找到navagtion.ejs，找到下面这段代码：
1 | <a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fa fa-navicon"></i></a> |
替换成下面的：
1 | <!-- 支持二级菜单特性 --> |
第三步，在/themes/matery/source/css中找到matery.css，在最后添加下面这段代码：
1 | /*二级菜单样式定义*/ |
第四步，在/themes/matery/source/js中找到matery.js，在最后一个 });前添加下面这段代码：
1 | // 增加二级菜单功能 |
第五步，在主题配置文件.yml修改标题栏内容，按下面格式更改:
1 | 标题一级: |
第六步，source文件夹新疆对应的标题目录，并放index.md模板就行了。
