迁移博客到Hexo以及博客美化

前两天看到别人搭建的个人博客十分好看😃，便萌生了换主题的念头，因为当时使用的是Hugo驱动的博客，找到了一个皮肤hugo-tranquilpeak-theme，布局特别对我口味，一顿折腾配置好了之后，最终发现有一个问题——生成的文章目录有时候会失效，即点击章节不会向对应内容进行跳转，换了好几个Hugo版本也没有解决，还请教了大佬——Saquarius(大佬使用的也是这个皮肤，但没有存在这种问题)，也没有发现问题在哪儿😭。强迫症的我实在忍不了，于是转战Hexo，花了快一天时间把博文迁移到了Hexo，并使用了Sakura主题。

1. 下载安装Node.js

由于我已经有Git环境了，所以只需要下载Node.js就可以了。(没下载Git的朋友可以看我这篇文章——Git学习-本地版本控制与版本回溯).

进入Node.js官网，下载对应位数安装包进行安装，我这里下载64位的。

下载完成后，解压安装即可。

Node.js是在服务端的js代码，就比如说我用java写的程序在Tomcat运行，而Node.js相当于js写的Tomcat，用js写的程序在Node.js中可以跑起来。

2. 安装Hexo

打开git bash (这里最好使用git bash，使用windows命令行可能会出现奇奇怪怪的错误。。。)

使用命令

1 2	node -v npm -v

如下图即安装成功了😆。

但是由于某些网络因素(emmm👀)，直接使用npm下载包会十分的慢，所以下载cnpm，并换成淘宝的镜像。

使用命令

1	npm install -g cnpm --registry=https://registry.npm.taobao.org

下载完成后输入cnpm -v，出现下图即安装成功。

接下来，使用cnpm来安装Hexo

1	cnpm install -g hexo-cli

下载完成后输入hexo -v，出现下图即安装成功。

3. 在本地部署Hexo

继续在git bash中操作💪。

新建并切换到blog文件夹。

1 2	mkdir blog cd blog

使用hexo init初始化文件夹(有点像git的操作哈哈)

此时就可以Start blogging with Hexo！(这个初始化文件夹的过程也比较久👀)

看一下此时文件夹的结构

其中

_config.yml是博客的配置文件。
scaffolds里是生成文章或页面的模板。
source里存放文章和页面的markdown文件。
themes里存放着主题。

现在输入命令

hexo s

在本地启动

此时在浏览器中输入localhost: 4000即可看到博客啦。

这里Hexo使用的是初始化下载的landscape皮肤。

万里长征已经走了一半了🧐

4.将博客部署在Gitee上

之前我的Hugo博客是放在GitHub上的，速度实在是太慢了。所以这次选择放在Gitee上，毕竟服务器在国内，能加快网页的加载速度。

与Hugo博客部署在GitHub上类似，首先进入码云，新建仓库，仓库名一定要和自己的仓库名完全相同(例如我的用户名就是红线标的那一串，没有@，那么完整的仓库名就是shenshilei1022)，只有这样最终生成的链接才是https://shenshilei1022.gitee.io，否则会有文件夹路径😥

仓库权限选择公开。

复制自己仓库的地址。

打开blog目录下的_config.yml文件，添加如下代码。（大约在80行左右。）

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://gitee.com/shenshilei1022/shenshilei1022.git
  branch: master

保存并退出。继续使用git bash，执行hexo clean清理缓存文件，再执行hexo d -g生成public文件夹同时进行部署。

然后再打开刚才新建的Gitee仓库，找到服务，点击Gitee Pages。

点击更新进行部署Gitee Pages。

这里没有GitHub好的地方是每一次部署完仓库，都有重新部署一次Gitee Pages，否则内容不会进行更新。（当然，你可以选择Gitee Pages Pro👀）不过为了网站的响应速度，这点缺点还是可以接受的😂

走到这儿，Hexo博客就正式搭好了~

5. 使用Sakura主题

打开git bash，克隆Sakura主题。

1	git clone https://github.com/honjun/hexo-theme-sakura

然后将克隆下来的文件全部复制到blog文件夹中(注意：不是themes文件夹！是blog根文件夹！我就踩了这个坑😥)，提示替换就进行替换。

接下来安装依赖(一定不要忘记这一步！)。

npm i

使用hugo s即可在本地进行启动了~

好康的不得了😋，博客的配置大家就移步到作者的官方文档处吧，中文版且十分详细，我就不在这里班门弄斧了😂

6. 美化主题

与其说是美化，不如说是根据自己的喜好自定义一些东西🚶‍♂️。

6.1 修改签名栏

修改签名栏的背景色为白色。

打开themes\Sakura\source\css中的style.css文件，找到如下代码，进行替换（大概在4080行）。

.header-info {
    width:63%;
    margin:auto;
    font-size:16px;
    color:#111101;
    background:rgba(255,255,255,.9);
    padding:15px;
    margin-top:22px;
    letter-spacing:0;
    line-height:30px;
    border-radius:10px;
    box-sizing:initial;
    white-space:nowrap;
}

6.2 去掉右下角的视频播放按钮

打开themes\Sakura\layout_partial中的headertop.ejs文件，找到下面这行代码，在style中添加opacity: 0;，即透明度设置为全透明。参考这位大佬的方法——超级干货-Hexo-Sakura主题使用与修改

1	<video style="object-fit: fill; opacity: 0;" id="bgvideo" class="video" video-name="" src="" width="auto" preload="auto">

同时去掉这句代码。

1	<div id="video-btn" class="loadvideo videolive">

6.3 去掉左下角的贴底音乐播放器

把主题中_config.yml文件中的aplayer设置参数全部注释掉就可以了😂

需要其他设置可以参考APlayer和MetingJS的官方文档。

6.4 增加网站运行时间

参考大佬的方法——Hexo增加网站运行时间统计

打开themes\Sakura\layout_partial中的footer.ejs文件。

添加如下代码即可。

<span>本站已运行<span id="showDays"></span></span>
<script>
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var birthDay = Date.UTC(2020,02,19,14,00,00); // 这里设置建站时间
setInterval(function() {
    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();
    var now = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
    var diff = now - birthDay;
    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('showDays').innerHTML=""+diffYears+"年"+diffDays+"天"+diffHours+"小时"+diffMinutes+"分钟"+diffSeconds+"秒";
}, 1000);
</script>