hexo 博客小功能添加-评论、萌妹纸、相册、字数统计...

前言

前段时间个人博客全新上线(阿里域名+GitPages+hexo+Yelee) 搭建的博客我的博客,基础的功能已经实现了，想着既然有了自己的博客就要好好的维护(折腾)一下，于是便参考着别人的博客添加一些额外的小功能。

首先我的博客是基于yelee风格，作者也是在 Hexo-Theme-Yilia的基础上进行修改，增加了一些新的功能，个人也是喜欢这种简洁的风格，觉得还不错就使用了该主题，在此表示对作者无私贡献的感谢！展示一下该主题风格的特性:

-	New
1	嵌入边栏的文章目录
2	透明化背景，随机背景大图
3	页内跳转按钮
4	文章版权等信息显示
5	文章导航切换按钮与文章迷你列表
6	网站计数
7	多语言支持
8	本地站内实时搜索
9	动态加载评论

具体的使用可以参考一下官方使用介绍。

为了给博客添加一些有趣的功能，就四处查资料，借鉴别人的博客，陆陆续续添加了一些小的功能，在此介绍一下添加的过程，或许对于感兴趣的您有所帮助，后续会陆续添加…

目前添加了:

评论
相册
文章字数统计和阅读时长
网易云音乐
鼠标点击效果
PDF 预览
添加可爱的妹子
添加网站运行时间

来必力评论

介绍

yelee 原生就已经支持了 Disqus、多说和友言，具体的使用可以参考yelee-评论系统,但是，鉴于多说已经关闭，友言支持又不太友好，于是一开始就集成了Disqus。不过后来发现手机上展示不出来，一研究原来还得翻墙，这显然不够友好，上网了查了查还有网易云跟帖和来必力两个评论系统，对比了一下，最终选择了来必力。

来必力首页

数据分析

无论是功能还是数据分析还是UI都很不错。

集成

因为原先的主题没有集成来必力，所以需要自己去集成，作为一个 Android 程序员，对这方面一窍不通，所以只能按部就班，照着其他的评论系统处理。

1. 主题站点添加 uid

打开theme/yelee/_config.yml，添加配置信息。

 livere:on: truelivere_uid: Your uid

2. 创建评论 ejs 文件

在themes/yelee/layout/_partial/comments文件夹创建livere.ejs文件，拷贝上图的代码。

<section class="livere" id="comments"><!-- 来必力City版安装代码 --><div id="lv-container" data-id="city" data-uid="Your uid"><script type="text/javascript">(function(d, s) {var j, e = d.getElementsByTagName(s)[0];if (typeof LivereTower === 'function') { return; }j = d.createElement(s);j.src = 'https://cdn-city.livere.com/js/embed.dist.js';j.async = true;e.parentNode.insertBefore(j, e);})(document, 'script');</script><noscript> 为正常使用来必力评论功能请激活JavaScript</noscript></div><!-- City版安装代码已完成 -->
</section>

3. 配置文章内的评论部分内容

打开themes/yelee/layout/_partial/article.ejs。

article

添加红色框标记的代码，到这就可以进行评论了，效果如下:

大家可以到我的留言板进行留言?。

相册

介绍

如果你跟我一样，对前端一窍不通，但是还是想添加相册功能，就去看看别人已经实现的案例，然后进行模仿~?。yilia的作者已经实现了，效果很不错，不妨可以学习一下，我也是照着资料借鉴了一下。

集成

1. 创建可以点击链接

如果想单独创建一个可以单击的链接，方法是相同的，首先进入您的博客目录执行

hexo new page photos

立即在source下生成photos/index.md文件，然后在主题站点的配置文件theme/yelee/_config.yml中添加点击的文案和跳转到位置。

2. 拷贝他人的 photos 内容

可以参考别人做好的博客，找到他的博客备份博客备份,下载source/photos下的所有文件，拷贝到你对应的位置。

拷贝配置

一般只需要修改ins.js文件的render()函数。这个函数式用来渲染数据的，里面配置了展示图片的链接地址。

图片链接地址

这个时候界面已经出来，接下来就是放置您的图片。

3. 处理图片并引入图片

接下来就是最后一步，也是最重要的一步了，使用python写的脚本，生成一套大图和一套小图，然后上传到Github上，随即生成json文件，这个文件保存在source/photos/data.json。

脚本可以直接下载下载地址，整个文件目录：

文件目录

if __name__ == "__main__":cut_photo()        # 裁剪图片，裁剪成正方形，去中间部分compress_photo()   # 压缩图片，并保存到mini_photos文件夹下git_operation()    # 提交到github仓库handle_photo()     # 将文件处理成json格式，存到博客仓库中

主要的执行的就是上面的代码，前提需要您的电脑装 python。

最后执行

hexo clean (清理之前的 HTML 等)
hexo g (生成 HTML 文件)
hexo s (看看效果)

查看一下效果。

字数统计和阅读时长

介绍

Next 是已经集成了这个功能，所以还是得需要咱们自己完成，首先看一下官网的使用帮助hexo-wordcount.

集成

1. 安装 hexo-wordcount

npm i --save hexo-wordcount

先安装插件。

2. 文件配置

在yelee/layout/_partial/post/word.ejs下创建word.ejs文件：

<div style="margin-top:10px;"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-meta-item-text">  字数统计: </span><span class="post-count"><%= wordcount(post.content) %>字</span></span></span><span class="post-time">&nbsp; | &nbsp;<span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-meta-item-text">  阅读时长: </span><span class="post-count"><%= min2read(post.content) %>分</span></span></span>
</div>

然后在 themes/yelee/layout/_partial/article.ejs中添加

article 配置

word_count 是主题_config.yml中配置是否需要添加字数统计功能控制 flag，no_word_count即配置文章是否需要显示字数统计的功能。

大功告成~看一下效果：⤵️

首页展示

内容展示

网易云音乐

介绍

作为一名Android开发者，最少不了的两个软件，一个是Android Studio，还有一个就是网易云音乐，那博客也要添加这个功能。

集成

集成起来就很简单了，MarkDown 是支持 h5 代码的，所以打开网易云,输入你想要的歌曲，点击对应歌曲的生成外链播放器。

前提是有版权哈，然后拷贝相应的代码即可。

拷贝代码

效果请点击我的相册

鼠标点击效果

废话不多说，直接看如何集成。

1. 拷贝需要的文件

进入到我的备份，拷贝文件。

点击效果文件

拷贝resources下的所有文件到您对应的目录。

2. 添加配置

打开themes/yelee/layout/_partial/after-footer.ejs文件，添加刚刚添加文件的配置。

看一下效果：

鼠标点击效果.gif

PDF 预览

如果想要在自己的博客中添加书籍的预览，实现起来也很简单，前人已经做好了…

1. 安装

$ npm install --save hexo-pdf

2. 使用

链接

{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}

本地

{% pdf ./bash_freshman.pdf %}

3. 效果

可进入我的博客书籍进行查看。源码

萌妹子添加

也是偶然之间发现可以添加可爱的妹纸或者是萌宠，发现挺好玩的，而且作者提供了很多模型供你选择，没事的时候还可以逗一逗 ?

1. 获取

npm install --save hexo-helper-live2d

2. 配置

在站点的 _config.yml 下配置

live2d:enable: truescriptFrom: localmodel:use: live2d-widget-model-wankodisplay:position: rightwidth: 150height: 300mobile:show: true

use 用来配置模型，目前有很多模型可以选择。模型

也有对应模型的预览效果。我的博客

模型预览1

预览2

预览3

预览4

源码地址

网站运行时间添加

实时展示你的博客已经运行了多长时间了，我还是蛮喜欢这个功能的，随着时间的增长，和你的博客访问量形成照样，成就感也会增添不少。

添加

在 hexo/themes/[your theme]/layout 文件夹下找到你的 footer 文件，即脚布局文件，在对应的位置添加一下代码。

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>var now = new Date(); function createtime() { var grt= new Date("02/14/2018 12:49:00");//此处修改你的建站时间或者网站上线时间now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "; document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; }
setInterval("createtime()",250);</script>

运行效果

运行预览

如果遇到什么问题，希望我可以帮助到你，我的博客