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: true
   livere_uid: Your uid

2. 创建评论 ejs 文件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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. 创建可以点击链接

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

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

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

文件目录

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

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

最后执行

1
2
3
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文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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. 安装

1
$ npm install --save hexo-pdf

2. 使用

链接

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

本地

1
{% pdf ./bash_freshman.pdf %}

3. 效果

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

效果

萌妹子添加

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

1. 获取

1
npm install --save hexo-helper-live2d

2. 配置

在站点的 _config.yml 下配置

1
2
3
4
5
6
7
8
9
10
11
live2d:
enable: true
scriptFrom: local
model:
use: live2d-widget-model-wanko
display:
position: right
width: 150
height: 300
mobile:
show: true

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

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

模型预览1

预览2

预览3

预览4

源码地址

网站运行时间添加

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

添加

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>

运行效果

运行预览

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


赏我 e(=2.72) 元咖啡钱吧,您的支持将鼓励我继续创作!



文章目录
  1. 1. 前言
  2. 2. 来必力评论
    1. 2.1. 介绍
    2. 2.2. 集成
      1. 2.2.1. 1. 主题站点添加 uid
      2. 2.2.2. 2. 创建评论 ejs 文件
      3. 2.2.3. 3. 配置文章内的评论部分内容
  3. 3. 相册
    1. 3.1. 介绍
    2. 3.2. 集成
      1. 3.2.1. 1. 创建可以点击链接
      2. 3.2.2. 2. 拷贝他人的 photos 内容
      3. 3.2.3. 3. 处理图片并引入图片
    3. 3.3. 字数统计和阅读时长
    4. 3.4. 介绍
    5. 3.5. 集成
      1. 3.5.1. 1. 安装 hexo-wordcount
    6. 3.6. 2. 文件配置
  4. 4. 网易云音乐
    1. 4.1. 介绍
    2. 4.2. 集成
  5. 5. 鼠标点击效果
    1. 5.0.1. 1. 拷贝需要的文件
    2. 5.0.2. 2. 添加配置
  • 6. PDF 预览
    1. 6.1. 1. 安装
    2. 6.2. 2. 使用
    3. 6.3. 3. 效果
  • 7. 萌妹子添加
    1. 7.1. 1. 获取
    2. 7.2. 2. 配置
  • 8. 网站运行时间添加
    1. 8.1. 添加
    2. 8.2. 运行效果
  • 您是第 位小伙伴 | 本站总访问量 | 已经写了 83.0k 字啦

    载入天数...载入时分秒...