Hexo的伪进阶教程

前面几位dalao已经把如何搭建博客以及一些基础设置讲的足够明白了，因此这里就不再提及了。本菜鸡在搭完博客后还想进一步优化博客，然后就一jio栽进坑里。

1.开始优化前的准备—-hexo-admin

我是不太喜欢直接在.md文件里写博客的，如果语法出了问题，改起来很麻烦。使用hexo-admin插件可以简便的管理文章。

下面#define AD hexo-admin

AD官网

在Git Bash中输入
npm install –save hexo-admin
安装完之后先检查一下
在GitBash中输入
hexo server -d 启动服务器
在浏览器中打开 http://localhost:4000/admin/
它是这个样子

如果想加个用户名和密码啥的，打开hexo根目录配置文件

admin:

username://用户名

password_hash://用户名密码不喜欢的可以不设置，这里通过bcrypt hash

secret: hey hexo deploy//用以cookies安全；

Command: 

点击博客编辑页面右上角的“+”，就可以方便的添加标签和分类了
之后的所有步骤都可以使用AD创建测试页

2.搭建完博客之后马上就会遇到的部分问题(有一定概率发生)

没有分类

打开 主题文件夹/_config.yml,在其中找到”menu”，将”#categories: /categories/ || th”的#删除，重新加载博客即可

关于,标签,分类不能使用

这里指的不能使用是指在点击标签等按钮时弹出以下页面:

Cannot GET /tags/

在Git Bash中输入 hexo new page tags
确认站点配置文件里有 tag_dir: tags
确认主题配置文件里有 tags: /tags
点开博客文件夹 /source/tags/index.md
此时它应该是这样的:

在开头和结尾的”—“中间加入:

title: "tags"        
type: tags   

然后另存为当前文件夹(如果在index文件里有中文字符，则一定注意编码选择UTF-8)
分类和关于同上

hexo g，博客没有更新内容

很奇葩的一个问题，但是的确坑到了我
解决办法:hexo g->hexo d->hexo g->hexo d
很暴力但是很有用，在第二遍hexo d时可以看见有新的改变添加到博客中
个人觉得是hexo g有时会偷懒

upd 3-22更新 hexo g问题

下面介绍的两种自动发布博客的方法解决了hexo g的问题

3.开始优化

终于可以开始优化了

实现自动发布文章

这里使用给出linux系统和windows系统下的不同处理方式

linux使用admin+脚本实现

在hexo根目录编辑文件里加入

Command: './admin_script/hexo-generate.sh' # expire: 60*1

在根目录新建admin_script，文件夹，进入执行

touch hexo-generate.sh;
vim hexo-generate.sh;

输入

#!/usr/bin/env sh
hexo clean
hexo g  -d//有什么其他想自动化的操作也可以写进去

修改权限

chmod +x hexo-generate.sh

windows使用.bat实现

在hexo安装目录下新建deploy.bat,输入

call cd source/_posts
git pull origin master
cd ../../   
hexo g -d

测试一下:双击.bat
然后等一会。。。。

评论区

这里使用Valine实现
注：由于next主题自带Valine，所以配置起来可能和其他主题不同

注册Leancloud

官网
注册完以后需要创建一个应用，名字可以随便起，然后 进入应用->设置->应用key，
获取你的appid 和 appkey

修改配置文件

打开/theme/_config.yml
找到valine行

valine:
  enable: true
  appid:  your app id
  appkey: your app key
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: 在这里输入评论daze~
  guest_info: nick,mail,link
  pageSize: 10

打开Leancloud -> 设置 -> 安全中心 -> Web 安全域名里填博客链接地址
hexo g hexo d
然后就可以被吐槽了

4.开始美化

美化才是最费时最费力的
可能会用到一定的css&html&ps基础

随机图片背景

由于本菜鸡不会html,所以只能用随机图片接口QAQ
如果有神仙知道请一定要指导一下

背景图片轮播

使用jquery-backstretch插件实现
下面#define JQ jquery-backstretch

JQ–引用JQ插件

打开 themes\next\layout_custom\custom-foot.swig 没有？新建一个啊

<!-- 图片轮播js文件cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

<!-- 自定义的js文件 -->
<script type="text/javascript" src="/js/src/custom.js"></script>

打开themes\next\source\js\src\custom.js

$(function () {
    $.backstretch([  
    。。。。
    ], { duration: 60000, fade: 1500 });  
});

。。。。处填图片地址，duration是轮播时间，fade是指轮换图片花费的时间。

代码高亮

hexo自带的代码高亮已经能够满足大部分OIer的需求，但是对于像我们机房的VCode这种精通十六国语言的人来说，这种代码高亮是远远不够的。这里只介绍Google Prettify，其他像highlight的请类比或自行百度。
打开/博客根目录/_config.yml
找到highlight一行，将其改为

highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:

下载prettify
下载后解压到theme/next/source/lib文件夹中(推荐将文件夹重命名为Prettify)
选一个自己喜欢的主题吧！
下载自己喜欢的主题文件到lib/prettify/skins目录下。
在主题的layout/_third-party目录下创建prettify.swig文件，添加以下代码

<link rel="stylesheet" href="/lib/prettify/skins/{{ theme.custom_highlight_theme }}.css" type="text/css">
<script src="/lib/prettify/prettify.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
      $('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
      prettyPrint();
  });
</script>

修改主题layout目录下的_layout.swig文件，在合适的地方（在< body >里面）添加：

{% include '_third-party/prettify.swig' %}

修改主题的_config.yml文件，添加一行：

 custom_highlight_theme: 。。。

。。。是主题名

动态交互式背景

其实这东西对密集恐惧症不友好打开/themes/_config.yml,找到以下代码

# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

这是自带的三种动态交互式背景

针对canvas_lines线条颜色过淡的解决办法

这里使用暴力
打开/themes/source/lib/three/canvas_lines.min.js
爆炸吧！！！！！
（由于原图太爆炸无法显示，在这里以部分代码的形式展现）

this.color=new THREE.Color(16777215),this.program=function(e,t){},this.setValues(e)},
THREE.SpriteCanvasMaterial.prototype=Object.create(THREE.Material.prototype),
THRE.SpriteCanvasMaterial.prototype.constructor=THREE.SpriteCanvasMaterial,THREE.SpriteCanvas
Material.prototype.clone=function(){var e=new THREE.SpriteCanvasMaterial;return e.copy(this),e.color.copy(this.color),
e.program=this.program,e},THREE.Canva 

所以说刚点开时会有非同一般的视觉冲击感。
但是，请看第一行开头括号里的数字
这串数字就是颜色的10进制码！(我的是改过的，没有改过的应该是灰白色对应的码)
然后暴力把颜色码替换成想要的颜色码就可以了(鬼知道我是怎么搞出来的)

L2d设置(z16我tm吹爆!)

ei you wo cao，zhe shi hao de
先选择自己社保喜欢的小姐姐，记好名字 预览
这里以z16为例
先在Git Bash里输入npm install –save hexo-helper-live2d
然后打开/theme/_config.yml
添加以下代码(名字自行更换)

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-z16
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

下载模型

npm install live2d-widget-model-z16

下载完之后，在博客根目录中新建文件夹live2d_models，然后在node_modules文件夹中找到刚刚下载的live2d模型，将其复制到live2d_models中，然后打开博客根目录下的——config.yml，找到model.use项，将其修改为live2d_models文件夹中的模型文件夹名称。
然后！！！！！！！！！
(这里有张z16小姐姐的gif图)
(为了防止部分小朋友康不到,特在此说明)

我哭了

5.完结撒花未完待续

或许以后会填上的坑
自定义域名
更换服务器
静态博客压缩
鼠标样式和点击样式
好了我去打春雪篇了

TO BE CONTINUED