【持续更新】关于hexo博客的搭建

Quick start

关于如何进行安装hexo和一些配置插件的过程我这里就不详细介绍了；大家可以百度网上一大堆，当然我这里推荐一些讲的比较好的博客
遇见西门里面介绍了如何进行hexo的安装与主题的优化

插件的配置

我使用的是gitment，还是对github比较有好感，具体教程参考：
gitment

永久链接的配置

借助于hexo-abbrlink插件，安装好之后呢；在博客目录下的配置文件中
修改_config.yml文件就ok，具体的修改方式如下

permalink: archives/:abbrlink.html
abbrlink:
  alg: crc32
  rep: hex

参考

关于在github二级仓库中构建博客

首先是在博客目录下的配置文件中进行设置

url: https://zpliu1126.github.io/hexoTest
root: /hexoTest/

接着就是关于搜素插件如何找到对应文件路径设置
```
/*#######设置数据库所在文件*/
xhr.open('GET', '/hexoTest/content.json', true);
```
由于该主题作者 Snippet并没有考虑到这一情况，我是在获取conten.js的路径中进行了修改

对应找到对应的数据文件之后进行路径的构造

/*关于在搜素结果content.json获取数据后加上子repository名构造最后url*/
path: "hexoTest/"+post.path,

其实就是一个字符串拼接的过程

关于文章如何进行分类的问题

1.在theme配置文件中打开category和tag标签
2.接着在每一个生成的文章中需要定义好category和tag内容才能进行跳转
3.同时在theme配置文件中可以定义好一些目录的跳转链接

 #########文章的开头##########
 ---
title: 关于hexo博客的搭建
abbrlink: d86fd5e9
date: 2019-03-05 18:06:07
category: computerLanguage
tag: 
 - JavaScript 
 - html 
 - css
---
######导航栏##########
menu:
- page: home
  url: /hexoTest
  icon:
- page: 计算机程序
  url: /hexoTest/categories/computerLanguage/
  icon:
- page: Bioinformatic
  url: /hexoTest/categories/Bioinformatic/

添加背景音乐

首先在网页版网易云找到喜欢的音乐，点击添加外部播放器有html和flash版本
我选择html版本，然后在theme的部署文件里随便找了个地方放了进去
最后调整播放框的大小

文章加密访问

基于插件访问

hexo-blog-encrypt

Security

encrypt:
    enable: true

在文章头部加上password字段
图片放大的插件
首先得依赖于jauery1.11.1版本，我试的1.13.1版本不合适
关于图片的触发，在img标签中加上class=pimg
最后是触发后的位置需要进行承载
承载我写了一个div class=Bigimglocation标签进行承载
在触发的js中加入$(.Bigimglocation).load(“承载的html”)

最后只需加上在img标签中class=pimg 并加上承载类

<img class="pimg" src=""  width="100%" alt="">
<div class="Bigimglocation"></div>

代码高亮

首先在head标签内引入css和js代码
在copyright区域触发

这里在我的主题下还存在一些行号冲突的问题，于是我干脆就直接把主题自带的css文件定义好的行号标签修改 display: none;
修改后的高亮，看起来舒服多了

唯一的缺点就是代码的高亮可能会存在一定的延迟

<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
  alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>

我部署到网站之后与本地的效果还是有一些出入

稍作修改，对 margin:0;参数改一下就行了;同时将要写代码的地方空一行，不这样有可能发生错误

将网站推送到搜素引擎SEO

由于百度爬虫太疯狂，影响了github的用户体验，因此百度爬虫被github封了
基于这种考虑，我将github推送到Google SEO
同时在codingme 也建了一个类似的站，就让百度爬取codingme上的内容；内容同时发布在两个网站上

百度SEO提交
 Google SEO提交
博客根目录配置信息

deploy:
  type: git
  repo: 
   github: git@github.com:zpliu1126/Blog.git,gh-pages
   coding: git@git.dev.tencent.com:zpliu1126/Blog.git,master

参考

文章加密
 图片放大
 代码高亮
 代码漂亮的主题
 代码配色
 SEO推送
 阿里图标