博客源代码下载
如果大家不想这么麻烦的装一堆东西，然后还要自己修改bug，那么只需要做好上面的准备工作，然后下载我的源代码，改改个人配置就行了。
源码地址：https://github.com/godweiyang/hexo-matery-modified。大家可以直接下载下来使用，修改个人配置信息即可，当然环境要先搭好。
如果大家下载好了源代码，就可以直接使用了，基本可以跳过文章后面的部分了！喜欢的记得star并fork哦！
个性化设置（matery主题）
下面的个性化设置主要针对的是 matery主题，如果你想用我现在博客这个主题，可以直接看这个章节。
更换主题
这两天花时间将我的博客换了一个主题，现在这个主题看着更加的炫（zhuang）酷（bi），并且响应式更友好，点起来就很舒服，功能也多很多。
主题的原地址在这里：hexo-theme-matery，它的文档写得也非常的详细，还有中英文两个版本，作者回复也很及时。效果图如下，可以看出非常合我的口味：
但是我自己使用起来还是遇到了好几个问题，经过两天的不懈摸鱼，终于基本解决了，这里分享一下。
首先先按照文档教程安装一遍主题，然后是可以正常打开的，如果你是一般使用的话，基本没啥问题了。但是我是重度强迫症，一点小毛病就看着难受，下面列举一下我遇到的问题以及解决方法。
文章头设置
首先为了新建文章方便，建议将 /scaffolds/post.md修改为如下代码：
--- title: {{ title }} date: {{ date }} top: false cover: false password: toc: true mathjax: true summary: tags: categories: ---
这样新建文章后不用你自己补充了，修改信息就行。
添加404页面
原来的主题没有404页面，加一个也不是什么难事。首先在 /source/目录下新建一个 404.md，内容如下：
--- title: {{ title }} date: {{ date }} top: false cover: false password: toc: true mathjax: true summary: tags: categories: --
然后在 /themes/matery/layout/目录下新建一个 404.ejs文件，内容如下：
<style type="text/css"> /* don't remove. */ .about-cover { height: 75vh; } </style> <div class="bg-cover pd-header about-cover"> <div class="container"> <div class="row"> <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2"> <div class="brand"> <div class="title center-align"> 404 </div> <div class="description center-align"> <%= page.description %> </div> </div> </div> </div> </div> </div> <script> // 每天切换 banner 图. Switch banner image every day. $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)'); </script>
“关于”页面增加简历（可选）
修改 /themes/matery/layout/about.ejs，找到 <divclass="card">标签，然后找到它对应的 </div>标签，接在后面新增一个card，语句如下：
<div class="card"> <div class="card-content"> <div class="card-content article-card-content"> <div class="title center-align" data-aos="zoom-in-up"> <i class="fa fa-address-book"></i> <%- __('myCV') %> </div> <div id="articleContent" data-aos="fade-up"> <%- page.content %> </div> </div> </div> </div>
这样就会多出一张card，然后可以在 /source/about/index.md下面写上你的简历了，当然这里的位置随你自己设置，你也可以把简历作为第一个card。
解决mathjax与代码高亮的冲突
如果你按照教程安装了代码高亮插件 hexo-prism-plugin，单独使用是没有问题的，但如果你又使用了mathjax，并且按照网上教程，安装 kramed插件并修改了js文件里的正则表达式（为了解决markdown和mathjax的语法冲突），好了，那你的代码就无法高亮了。解决方法很简单，别用 kramed插件了，还用原来自带的 marked插件，直接改它的正则表达式就行了，改法如下：
打开 D:\study\program\blog\node_modules\marked\lib\marked.jsescape:处替换成：
escape:/^\\([`*\[\]()#$+\-.!_>])/,
em:处替换成：
em:/^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
这时在文章里写数学公式基本没有问题了，但是要注意： 数学公式中如果出现了连续两个{，中间一定要加空格！
增加建站时间
修改 /themes/matery/layout/_partial/footer.ejs文件，在最后加上
<script language=javascript> function siteTime() { window.setTimeout("siteTime()", 1000); var seconds = 1000; var minutes = seconds * 60; var hours = minutes * 60; var days = hours * 24; var years = days * 365; var today = new Date(); var todayYear = today.getFullYear(); var todayMonth = today.getMonth() + 1; var todayDate = today.getDate(); var todayHour = today.getHours(); var todayMinute = today.getMinutes(); var todaySecond = today.getSeconds(); /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳) year - 作为date对象的年份，为4位年份值 month - 0-11之间的整数，做为date对象的月份 day - 1-31之间的整数，做为date对象的天数 hours - 0(午夜24点)-23之间的整数，做为date对象的小时数 minutes - 0-59之间的整数，做为date对象的分钟数 seconds - 0-59之间的整数，做为date对象的秒数 microseconds - 0-999之间的整数，做为date对象的毫秒数 */ var t1 = Date.UTC(2017, 09, 11, 00, 00, 00); //北京时间2018-2-13 00:00:00 var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond); var diff = t2 - t1; var diffYears = Math.floor(diff / years); var diffDays = Math.floor((diff / days) - diffYears * 365); var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours); var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes); var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds); document.getElementById("sitetime").innerHTML = "本站已运行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒"; }/*因为建站时间还没有一年，就将之注释掉了。需要的可以取消*/ siteTime(); </script>
然后在合适的地方（比如copyright声明后面）加上下面的代码就行了：
<spanid="sitetime"></span>
修改不蒜子初始化计数
因为不蒜子至今未开放注册，所以没办法在官网修改初始化，只能自己动手了。和上一条一样，在 /themes/matery/layout/_partial/footer.ejs文件最后加上：
<script> $(document).ready(function () { var int = setInterval(fixCount, 50); // 50ms周期检测函数 var pvcountOffset = 80000; // 初始化首次数据 var uvcountOffset = 20000; function fixCount() { if (document.getElementById("busuanzi_container_site_pv").style.display != "none") { $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + pvcountOffset); clearInterval(int); } if ($("#busuanzi_container_site_pv").css("display") != "none") { $("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + uvcountOffset); // 加上初始数据 clearInterval(int); // 停止检测 } } }); </script>
然后把上面几行有段代码：
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %> <span id="busuanzi_container_site_pv"> <i class="fa fa-heart-o"></i> 本站总访问量 <span id="busuanzi_value_site_pv" class="white-color"></span> </span> <% } %> <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %> <span id="busuanzi_container_site_uv"> 人次, 访客数 <span id="busuanzi_value_site_uv" class="white-color"></span> 人. </span> <% } %>
修改为：
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %> <span id="busuanzi_container_site_pv" style='display:none'> <i class="fa fa-heart-o"></i> 本站总访问量 <span id="busuanzi_value_site_pv" class="white-color"></span> </span> <% } %> <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %> <span id="busuanzi_container_site_uv" style='display:none'> 人次, 访客数 <span id="busuanzi_value_site_uv" class="white-color"></span> 人. </span> <% } %>
其实就是增加了两个 style='display:none'而已。
添加动漫人物
其实三步就行了，不用像网上有些教程那么复杂。
第一步：
npm install --save hexo-helper-live2d
第二步：
npm install live2d-widget-model-shizuku
第三步： 在根目录配置文件中添加如下代码：
live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false log: false model: use: live2d-widget-model-shizuku display: position: right width: 150 height: 300 mobile: show: true react: opacity: 0.7
然后 hexo g再 hexo s就能预览出效果了，但是有个注意的地方，我发现这个动漫人物最好不要和不蒜子同时使用，不然不蒜子会显示不出来。
图片添加水印
为了防止别人抄袭你文章，可以把所有的图片都加上水印，方法很简单。
首先在博客根目录下新建一个 watermark.py，代码如下：
# -*- coding: utf-8 -*- import sys import glob from PIL import Image from PIL import ImageDraw from PIL import ImageFont def watermark(post_name): if post_name == 'all': post_name = '*' dir_name = 'source/_posts/' + post_name + '/*' for files in glob.glob(dir_name): im = Image.open(files) if len(im.getbands()) < 3: im = im.convert('RGB') print(files) font = ImageFont.truetype('STSONG.TTF', max(30, int(im.size[1] / 20))) draw = ImageDraw.Draw(im) draw.text((im.size[0] / 2, im.size[1] / 2), u'@yourname', fill=(0, 0, 0), font=font) im.save(files) if __name__ == '__main__': if len(sys.argv) == 2: watermark(sys.argv[1]) else: print('[usage] <input>')
字体也放根目录下，自己找字体。然后每次写完一篇文章可以运行 python3 watermark.py postname添加水印，如果第一次运行要给所有文章添加水印，可以运行 python3 watermark.py all。
添加网易云音乐BGM
写文章的时候，想插入一段BGM怎么办？
首先打开网易云网页版，找到想听的歌曲，然后点击生成外链：
复制如下代码：
粘贴到文章里就行了，为了美观，设置一下居中，具体代码如下：
<divalign="middle">这里粘贴刚刚复制的代码</div>
添加评论插件
主题已经自带了gitalk插件了，所以你只需要去github官网配置好就行了。
首先打开github申请一个应用，要填四个东西：
Application name //应用名称，随便填 Homepage URL //填自己的博客地址 Application description //应用描述，随便填 Authorization callback URL //填自己的博客地址
然后点击注册，会出现两个字符串 ClientID和 ClientSecret，这个要复制出来。
然后去主题的配置文件 _config.yml下修改 gitalk那里：
gitalk: enable: true owner: 你的github用户名 repo: 你的github用户名.github.io oauth: clientId: 粘贴刚刚注册完显示的字符串 clientSecret: 粘贴刚刚注册完显示的字符串 admin: 你的github用户名
以后写文章的时候，只要在文章页面登陆过github，就会自动创建评论框，记得每次写完文章后打开博客文章页面一下。
添加百度统计和谷歌统计代码
首先打开百度站长平台，然后点击添加网站，输入网址并选择领域。
接下来要验证网站所有权，有三种方式，推荐采用HTML标签验证，最简单，将代码复制出来。
打开 themes/matery/layout/_partial/head.ejs，修改下面两行：
<metaname="baidu-site-verification"content="xxx"/><metaname="google-site-verification"content="xxx"/>
其中 content内容改成你自己刚刚复制出来的就行了。
