以及有很久没有在在简书和博客上写东西了；自己觉得这个东西应该坚持下来；博客不仅记录自己的旅程和技术层面面积累；更多表达生活的态度。

文章的大纲：

开始之前

这篇主要是针对个人已经大号的博客网站进行个性化定制和整理；如果你还没有搭建的话请参考如下文章搭建。
这里重点介绍个人的本地环境：

$ hexo version
hexo: 3.4.0
hexo-cli: 1.0.4
os: Windows_NT 10.0.15063 win32 x64
http_parser: 2.7.0
node: 8.9.0
v8: 6.1.534.46
uv: 1.15.0
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.25.0
openssl: 1.0.2l
icu: 59.1
unicode: 9.0
cldr: 31.0.1
tz: 2017b

基本的优化设置

• 腾讯公益404页面
• 侧边栏社交链接
• 设置 头像
• 设置 侧栏
• 设置 菜单

请参考基本的官方文档说明

界面优化

在每篇文章末尾统一添加“本文结束”标记

实现效果图

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下画红色部分代码（post-footer之前两个DIV）：

添加位置说明

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

最后在主题配置文件 _config.yml 中添加以下字段开启此功能：

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

实现点击出现桃心效果

实现效果图

效果图

http://7u2ss1.com1.z0.glb.clouddn.com/love.js

然后将里面的代码copy一下，新建love.js文件并且将代码复制进去，然后保存。将love.js文件放到路径/themes/next/source/js/src里面，然后打开\themes\next\layout\_layout.swig文件,在末尾（在前面引用会出现找不到的bug）添加以下代码：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

修改文章底部的那个带#号的标签

实现效果图

修改作者头像并旋转

实现效果图

录制图片.gif

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
 
  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}
img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

网站logo设置

实现效果图

1. 通过网站favicon在线制作制作favicon图片，logo最好设置32*32。
2. next主题：将图片放在next主题source/images目录下
3. 在next主题配置文件中添加：favicon: images/favicon.ic

这里推荐：EasyIcon可以找找有没有你要的logo标识

---

添加顶部加载条

实现效果图

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

更换样式
认的是粉色的，要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码（接在刚才link的后面）

<style>
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>

只需修改主题配置文件(_config.yml)将pace: false改为pace: true就行了;具体代码如下：

# 文档的加载进度条
pace: true
pace_theme: pace-theme-minimal

[参考文章链接]
(http://shenzekun.cn/hexo%E7%9A%84next%E4%B8%BB%E9%A2%98%E4%B8%AA%E6%80%A7%E5%8C%96%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B.html)

在文章底部增加版权信息

实现效果图

image.png

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({   
          title: "",   
          text: '复制成功',   
          html: false,
          timer: 500,   
          showConfirmButton: false
        });
      });
    }));  
</script>
{% endif %}

在目录next\source\css\_common\components\post\下添加my-post-copyright.styl：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改next\layout\_macro\post.swig，修改位置：

<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>

修改next\source\css\_common\components\post\post.styl文件，在最后一行增加代码：

@import "my-post-copyright";

保存重新生成即可。
如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似：

小技巧：如果你觉得每次都要输入copyright: true很麻烦的话,那么在/scaffolds/post.md文件中添加：

这样每次hexo new "你的内容"之后，生成的md文件会自动把copyright:加到里面去

文章加密访问

实现效果图

录制图片.gif

具体实现方法
打开themes\next\layout\_partials\head.swig文件,在以下位置插入这样一段代码：

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

代码添加位置如下

Hexo添加字数统计、阅读时长

实现效果图

npm install hexo-wordcount --save

然后在主题配置文件后面加入；如下配置：

# 开启字数统计
word_count: true

操作优化

首页摘要里显示文章图片

实现效果图

这里显示图片
<!--more-->
这里是全文

方式二：

---
title: 
categories: 
tags:
copyright: true
comments: false
description: 
date: 2017-11-09 14:33:32
top:
photos: 
    - "http://oz2tkq0zj.bkt.clouddn.com/17-11-9/52323298.jpg"

也就是在*.md文件头部添加photos:，这样就可以在首页显示图片了

Hexo博客中插入音乐、视频

播放音乐

实现效果图

image.png

1. 在官方网站获取外链，比如网易云音乐等
2. 自己生成外链，插入文章

关于第一种方案其实很简单就是使用音乐网站提供的外链复制到你的博文中；不明白可自行百度。缺点就是自定义不强；而且由于版权问题；导致外链失效。

重点介绍一下第二种方式：
下面我就隆重介绍一款html5音乐播放器：Aplayer。把Aplayer加入hexo需要用到hexo-tag-aplayer插件。
切换到hexo目录，运行：

npm install --save hexo-tag-aplayer

安装完成后，在需要添加音乐的地方加上：

{% aplayer "歌曲名称" "作者" "音乐_url" "封面图片_url" "autoplay" %}

hexo d --g之后就会出现你想要的音乐啦！

播放视频

视频播放也有两种方案：

1. 可以直接用HTML的标签

<video poster="https://封面图.jpg" src="https://什么什么什么.mp4" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the video tag.</video>

2.用插件，功能更加强大，比如可以"弹幕"，非常建议使用
切换到hexo目录，运行：

npm install hexo-tag-dplayer --save

在文章使用如下格式内容：

{% dplayer "url=https://什么什么什么.mp4" "https://封面图.jpg" "api=https://api.prprpr.me/dplayer/" "id=" "loop=true" %}

当然，这个插件的功能还有很多，可以去README和这插件的“母亲”
Dplayer的官方文档看看。

---

未完结；待续...(由于时间原因先更新；和测试功能能后在加入）；同时简书和个人博客全新回归；敬请期待！

参考文章

• Hexo官方文档
• Nex官方文档
• hexo之next主题优化整理
• 打造个性超赞博客Hexo+NexT+GithubPages的超深度优化