Hexo美化

本文记录了hexo的美化方法及流程，持续更新。

前言

因为阿里云vps到期，所以最近将hexo博客迁移至了github,同时，使用PicGo + github创建了图床。看了别人的博客，希望也能够进行一些博客美化，所以查阅了一些资料，美化的过程记录在本文中，后续，如果有其他的美化，也将持续记录于本文。

增加字数统计/阅读时长

安装插件
进入本地blog仓库，执行以下命令安装hexo-wordcount插件。
1
npm install hexo-wordcount
博客配置
NexT 主题默认已经集成了文章字数统计、阅读时长的统计功能，如果我们需要使用，只需在本地的blog目录下，进入主题配置文件 _config.yml 进行配置即可，路径为：blog目录/themes/next/_config.yml,配置文件修改为如下：
优化显示
因为默认显示结果没有单位，所以需要对显示进行优化。修改blog目录/themes/next/layout/_macro/post.swig文件：
1
2
在{{ wordcount(post.content) }} 后面加“字”
在{{ min2read(post.content) }} 后面加“分钟”
重新生成网站并上传
执行以下hexo命令，完成hexo的重新生成及上传。
1
2
hexo clean
hexo d -g
修改后效果：

增加百度统计

通过百度统计，可以很好的查看博客的访问量。因此，我在博客中部署了百度统计。

注册百度统计
进入百度统计注册账号。
在百度统计中添加站点
由于我的站点托管在github，所以，网站域名和网站首页都填写了jerryma0912.github.io
添加代码
添加站点后，会自动出现script代码，如果没有，可进入网站列表获取代码。复制该代码。

进入本地文件blog目录/themes/next/layout/_partials/head.swig，添加上述代码。
配置主题
记住刚才代码中，https://hm.baidu.com/hm.js?后面的一串数字，接下来需要用到。
我的博客主题为hexo，因此只需在本地的blog目录下，进入主题配置文件 _config.yml 进行配置即可，路径为：blog目录/themes/next/_config.yml,配置文件修改为：

注意：需要将前面的#号去掉，：号后面需要有空格，后面的一串数字需要用''引起来！！
重新生成网站并上传
执行以下hexo命令，完成hexo的重新生成及上传。
1
2
hexo clean
hexo d -g
代码检查
进入百度统计后台，进入代码检查页面。

可分别检查首页和子页面是否配置成功。首页检测成功如下所示：

子页面检测成功如下所示：
enjoy!
等待约20分钟后，即可进入后台查看站点访问量，或查看实时访问量。

页脚添加网站运行时间

添加代码
在blog目录/themes/next/layout/_partials/footer.swig文件中添加以下代码：

<span id="sitetime"></span>
<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(2018,03,09,19,54,57); //北京时间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>
<br>

重新生成网站并上传
执行以下hexo命令，完成hexo的重新生成及上传。
1
2
hexo clean
hexo d -g

开启评论区

由于政策原因，许多原先支持的评论插件需要先进行身份认证，比较麻烦。因此这里选择了一款韩国软件来必力

注册来必力
点击进入来必力官网，进行注册。之后选择开通city版本，名称可根据需要自行填写，网站URL填写自己的网站地址。
复制data-uid
进入管理界面，找到代码管理，复制其中的data-uid
配置livere_uid
进入主题配置文件 _config.yml 进行配置，路径为：blog目录/themes/next/_config.yml,配置文件修改为：
重新生成网站并上传
执行以下hexo命令，完成hexo的重新生成及上传。
1
2
hexo clean
hexo d -g

开启文章末尾版权声明

新建my-copyright.swig文件
目录：blog目录/themes/next/layout/_macro/,添加内容如下：

{% 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="https://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="https://unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.css">

  <p><span>本文标题:</span>{{ page.title }}</a></p>
  <p><span>文章作者:</span>{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</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 %}

新建my-post-copyright.styl文件
目录：blog目录/themes/next/source/css/_common/components/post/添加内容如下：

.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: #333333; // title color
  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: #0593d3; // link color
  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;
}

修改post.swig文件
目录：blog目录/themes/next/layout/_macro/,添加以下内容：

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

修改post.styl文件
目录：blog目录/themes/next/source/css/_common/components/post/,最后一行添加以下内容：
1
@import "my-post-copyright"
设置文章开启版权属性
对于每一篇文章，需要在开头设置以下内容：（如果不想写，请参见本节最下方的注）
1
copyright: true #新增,开启
重新生成网站并上传
执行以下hexo命令，完成hexo的重新生成及上传。
1
2
hexo clean
hexo d -g

注：如果偷懒不想写copyright，或希望以前写的文章都含有版权说明，则可以修改blog目录/themes/next/layout/_macro/my-copyright.swig第一句判断语句为：

1	{% if page.copyright or not page.copyright%}