为你的博客增加一些有趣的功能

最新推荐文章于 2022-01-17 14:07:27 发布

Moliam!

最新推荐文章于 2022-01-17 14:07:27 发布

阅读量740

点赞数 2

分类专栏： hexo

本文链接：https://blog.csdn.net/weixin_44529321/article/details/109193243

版权

hexo 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

为你的博客增加一些有趣的功能

主题
评论
运行时间
增加一言

这个地方留白好久了，从创建到现在大概留的有二十天左右了，实在是因为最近沉迷于一款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官网链接

创建应用

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

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

appid和appkey

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

运行时间

网站运行时间，怎么说呢， ~~当然是我抄的~~，我还是改了一点点嘛，可以在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>