HexoPython文集Android Other

『博客搭建』—— hexo 博客小功能添加-评论、萌妹纸、相册、

2018-02-27  本文已影响1096人  下位子

前言

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

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

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

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

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

目前添加了:

来必力评论

介绍

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文件，拷贝上图的代码。

<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: 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 文件，即脚布局文件，在对应的位置添加一下代码。

<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>

运行效果

time record.gif

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

上一篇 下一篇

猜你喜欢

热点阅读