为博客加一些有趣的功能

这个地方留白好久了,从创建到现在大概留的有二十天左右了,实在是因为最近沉迷于一款steam上的单机游戏,不可自拔。现在终于抽出来时间来补充这个地方的空白,实属不易。

主题

主题介绍

hexo可供选择的主题可太多了。用的最多的大概就是next主题了。但是我在hexo的可选主题中,浏览了好久。最终选择了fluid这款主题。不要问,问了就是一见钟情。

hexo主题链接

这个链接里有挂载到hexo上的所有主题。

fluid主题

但是由于我是使用的fluid主题。所以之后的所有介绍都围绕这个主题为例。并且fluid的相关文档都比较完善,小白使用起来也更方便一些。

fluid主题github链接

下载命令:

git clone https://github.com/fluid-dev/hexo-theme-fluid.git

在你的博客文件夹下的theme文件夹内,新建fluid文件夹,并且在文件夹中使用git bash执行这句话就OK了。其他主题类似。

必要配置

必要配置也没有什么,主要是修改hexo博客目录下的_config.yml文件夹下,将默认的主题,修改为fluid即可。

theme: fluid  # 指定主题
language: zh-CN  # 指定语言,会影响主题显示的语言,按需修改

帮助文档

在之前已经说了,fluid的配置文档很完善,很详细。 不会吧不会吧,不会有人忘记了吧

用户指南

评论

评论模块

怎么说呢,文档是很完善的,我也是根据文档来增加的评论。fluid支持的评论模块比较多。

用的最多的就是uttrances和valine两个模块了。

由于我使用的是valine评论模块,只介绍valine的配置。

uttrances模块使用链接

valine评论模块

评论嘛,肯定是给文章进行评论。

首先在fluid下的_config.yml里,post下的comments改成这样就OK了

comments:  # 评论
    enable: true  # 开启评论
    type: valine  # 指定使用的评论模块  available: disqus | valine | gitalk | utterances | changyan | livere | remark42

valine文档链接

valine的颜值,怎么说呢,个人觉得还是比较好看的,评论支持发送表情,还可以留下姓名、邮箱等。具体使用就可以看本文章下面的评论功能。

valine依赖的是leanCloud的数据库。将所有的评论都存储在数据库中。而将你的博客文章和数据库连起来。则是通过appid和appkey两个来确定的。具体流程就是注册个leanCloud账号,账号里创建一个免费的数据库,然后将数据库生成的id和key填到主题下的 _config.yml即可。

valine前提

使用valine的话,就需要进行绑定域名和网站备案。没有的话,就是用上面的那个评论模块吧。

leancloud操作

注册leancloud账号

不会吧,你都要建博客了,竟然还不会在一个平台注册一个账号?我可是不信的。leancloud官网链接

创建应用

找到创建应用按钮,点进来是这样的页面

img

选择开发版就足够了,这样是免费的,而且满足需求。

appid和appkey

创建成功后,在应用右上角进入设置。在设置中寻找域名绑定进行绑定。在应用keys中,找到appid和appkey放入fluid的配置文件中即可。

运行时间

基于1.8.3版本

网站运行时间,怎么说呢, 当然是我抄的,我还是改了一点点嘛,可以在fluid的官方文档中找到。

需要修改footer.ejs文件,如果你不太懂的话可以去百度,当然不懂也不影响你去修改。该文件位于themes/fluid/layout/_partial ,你只需要在里面加一个div标签就可以了。里面原本是有两个div标签,你放的顺序影响着显示的顺序。直接将下列代码复制即可。

<div>
  <span id="timeDate">载入天数...</span>
  <span id="times">载入时分秒...</span>
  <script>
  var now = new Date();
  function createtime(){
      var grt= new Date("10/01/2020 8:00: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 = "本站已经运行&nbsp"+dnum+"&nbsp天";
      document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒啦~~";
  }
  setInterval("createtime()",250);
  </script>
</div>

嗯,完啦,就是这么简单

基于1.8.5以后的版本

其实本质上没有太大区别,只是在此版之后fluid开发组将页脚在config.yml中可配置,所以可以通过配置文件进行修改,在官方配置文档中有详细介绍。

增加一言

怎么说呢,我也在这里做了好久的工作,最初的想法是首页打印扇贝的每日一句,但是奈何水平太次,试了n多方法却还是没有成功。

下面是大佬做的一言和一日诗词博客讲解

链接

挺详细的,如果有部分代码看不懂的话也是直接复制就可以的,最要的就是需要自己yml文件中需要手动添加hitokoto这个键值。我最开始以为是直接有的,然后找了半天。

下面是我搜索到的每日一句的资料,如果你想使用的话,希望对你有所帮助。

next主题讲解扇贝每日一句链接

python自己搭建的博客每日一句链接

帅一点

这个其实挺简单的。总的来说就三步

  1. 创建js文件在源文件夹
  2. 在源文件夹中写入代码
  3. 外部引用该文件
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array
        ("帅一点", "再帅一点", "再再帅一点", "再再再帅一点","再再再再帅一点", "再再再再再帅一点", "再再再再再再帅一点","再再再再再再再帅一点", "帅到头了,丑回去重新帅");/**改成你需要的文字*/
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 5,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
           "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
      3000,
      function() {
          $i.remove();
      });
    });
    setTimeout('delay()', 2000);
});

function delay() {
    $(".buryit").removeAttr("onclick");
}

外部引用的话就是在fluid的config.yml中找到custom_js,然后在里面修改为你的存放路径,我是创建这个文件在js文件夹下,文件名为click.js

如下

# 指定自定义 .js 文件路径,支持列表;路径是相对 source 目录,如 /js/custom.js 对应存放目录 source/js/custom.js
# Specify the path of your custom js file, support list. The path is relative to the source directory, such as `/js/custom.js` corresponding to the directory `source/js/custom.js`
custom_js: 
  - /js/click.js
  - /js/cursor.js
  - /js/yinghua.js

链接是博主click.js的源代码

小星星以及樱花特效

点击下载小星星js

点击下载樱花特效js

将下载好的js文件放入指定目录,然后像上一小结那样即可。