哔哔！换个姿势在静态博客上发短博文（Hexo-Volantis适配）

Heson

技术交流

发布于：2020年10月9日

次浏览

要在静态博客上发送短博文，不像wordpress和typecho新建个栏目那么简单。

之前博客整的是artitalk（说说，想进一步了解，点我），已经有短博文的那种体验了，而且还能支持发送markdown、图片、音乐等等功能。感觉唯一的缺点就是：发文不是很方便，需要在博客上登陆。(至少我觉得很麻烦)

后来看到 @熊野的那篇《哔哔点啥，换个舒服的姿势》，顿时感觉爱了，这就是我梦寐以求发送短博文的姿势。

🎀系列文章

10月19日：《BB短博文Hexo-Matery主题适配》

10月20日：《BB短博文Hexo-Next主题(8.0+)适配》

10月21日：《BB短博文Hexo-Butterfly主题适配》

10月30日：《Typecho-Cuteen主题哔哔适配》

💖效果图

发文效果图，引用熊野大佬的图
黑石博客融合效果图：

🍔食用方法

Leancloud创建存储空间

登陆leancloud创建应用
进入应用后，点击创建 Class
将「 Class 名称」命名为 content
点击刚刚创建的content Class，点击添加列并创建名称为content的列，类型为String，注意列注释也要填写（随意填）
记录appid，masterkey，api域名

因为我用的是国区版本，api绑定域名需要备案域名。

国际版leancloud不需要绑定域名，api地址为：
```
appid前八位.api.lncldglobal.com
```

微信公众号绑定

由 @林帅给的leancloud对接公众号的源码，我搭建在自己公众号上了。

关注下面公众号：

按照公众号的提示的命令进行绑定：

//bindCurrentUser:你的AppID,你的MasterKey,https://你的api域名

完成后会提示绑定成功。

Hexo博客适配

这里主要介绍volantis主题（4.0版本已测试）的适配。我这里的代码是在 @熊野的基础上，增加了图片发文功能（直接发送图片外链地址即可）

新建bb.ejs模板

在themes\volantis\layout中新建bb.ejs，代码如下：

<%- partial('_pre') %>
<%- partial('_partial/side') %>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
  <%- partial('_partial/article', {post: page, index: false}) %>
</div>

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leancloud-storage@4.5.3/dist/av-min.js"></script>
<script type="text/javascript">
  var {
    Query
  } = AV;
  AV.init({
    appId: "<%= theme.plugins.bbtime.appId %>",
    appKey: "<%= theme.plugins.bbtime.appKey %>",
    serverURLs: '<%= theme.plugins.bbtime.serverURLs %>'
  });

  var query = new AV.Query('content');

  var app = new Vue({
    el: '#app',
    data: {
      page: 0,
      count: 0,
      contents: []
    },
    methods: {
      loadMore: function (event) {
        getData(++this.page);
      }
    }
  })
  //友好地显示时间，如果主题开启了theme.lastupd.friendlyShow: true ，则删掉以下 timeago 函数
  function timeago(dateTimeStamp) { 
        var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示 
        var hour = minute * 60; 
        var day = hour * 24; 
        var week = day * 7; 
        var month = day * 30; 
        var now = new Date().getTime(); //获取当前时间毫秒 
        var diffValue = now - dateTimeStamp; //时间差 
        if (diffValue < 0) { 
            return; 
        } 
        var minC = diffValue / minute; //计算时间差的分，时，天，周，月 
        var hourC = diffValue / hour; 
        var dayC = diffValue / day; 
        var weekC = diffValue / week; 
        var monthC = diffValue / month; 
        if (monthC >= 1 && monthC <= 3) { 
            result = " " + parseInt(monthC) + " 月前" 
        } else if (weekC >= 1 && weekC <= 3) { 
            result = " " + parseInt(weekC) + " 周前" 
        } else if (dayC >= 1 && dayC <= 6) { 
            result = " " + parseInt(dayC) + " 天前" 
        } else if (hourC >= 1 && hourC <= 23) { 
            result = " " + parseInt(hourC) + " 小时前" 
        } else if (minC >= 1 && minC <= 59) { 
            result = " " + parseInt(minC) + " 分钟前" 
        } else if (diffValue >= 0 && diffValue <= minute) { 
            result = "刚刚" 
        } else { 
            var datetime = new Date(); 
            datetime.setTime(dateTimeStamp); 
            var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1; 
            var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate(); 
            result = Nmonth + "-" + Ndate 
        } 
        return result; 
    } 
  function urlToLink(str) {
    //增加发图片功能
    var re = /\bhttps?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|gif))\S+/g;
    var re_forpic = /\bhttps?:\/\/.*?(\.gif|\.jpeg|\.png|\.jpg|\.bmp|\.webp)/g;
    str = str.replace(re, function (website) {
      return "<a href='" + website + "' target='_blank'> <i class='iconfont icon-lianjie-copy'></i>链接 </a>";
    });
    str = str.replace(re_forpic, function (imgurl) {
      return "<img src='" + imgurl + "'  /> ";
    });
    return str;
  }

  function getData(page = 0) {
    query.descending('createdAt').skip(page * 10).limit(10).find().then(function (results) {
      if (results.length == 0) {
        alert('之前没发表过说说了')
      } else {
        let resC = results;
        reqData = false;
        resC.forEach((i) => {
          let dateTmp = new Date(i.createdAt);
          i.attributes.time = timeago(dateTmp);
          i.attributes.content = urlToLink(i.attributes.content);
          app.contents.push(i);
        })
      }

    }, function (error) { });
  }

  getData(0);

  query.count().then(function (count) {
    app.count = count;
  }, function (error) { });


</script>

修改article.ejs

找到themes\volantis\layout\_partial\article.ejs如下图位置所示：

加上如下代码：

<% if (page.layout == 'bb') { %>
  <style>
    @font-face {
      font-family: "iconfont";
      src: url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.eot?t=1586882866168');
      /* IE9 */
      src: url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.eot?t=1586882866168#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALcAAsAAAAAB2gAAAKPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqCUII8ATYCJAMMCwgABCAFhG0HQBuEBsiuMRkynL4YFCHtLKs4b+k7/80U8DwHIB6+xtr7u3vniDZI6tmnkyDS8NC5iFgJlE7pTPcO8e5b+803aYQy8YtH1JPKyZzY3ttb1EonioVGSBAiRJp4JV9cFppCxLpe2z8sUs37O4QEDFRM0lFeAw4XN6bQPG06zTG8DRwHFOBeGEVWIjE+mP8wduVFPCbQNK4ktN8/OgFJhbEqEFemLkEyFVcUVqoL1ZKDRbyIqafb9AA8+9+PX41IklQyY+PBSZ8KnR+9iBx0OxZcp8PxvGDHyFgACnFY6j8QCfMLIppKPmoCrGtW8OG/y0eufLX/8AiJqDKa22AGWpMzUth6p6aARySQQRUUL4AnSBmuyvIwPdbz21OX5ybO5duOJifaLl6cvkrd1HR7kWEy6yikff29PvgO17V/Tf/9f/oN3PDqz22a719IYlZJHQetpLY08MV6fwFDrF0B6F4XyB3/FyEEnZnU2XGtVwHvpxtA1d6pftKB4AcoWo4U1QQbiiy35Xow27whbwK2NNFlhAc99zeOtM4S6ikFQ1IzhqxuglAoC6ho2UBV3Raa5g0cbxnCRURpYM4pQOh3h6TXG7J+j4RCeULFqFdU9UcETYfRdGHLVJjpHk6SIBXlTTQV5mmWS6SD1jHSVx2JJ1U+a4p4YKawvrSSLQ2QR3yMLcGa3hBCQ40zF/vBc+Q4DH3OLFJExRDCb64un5S9qaIwF9L2cEQiEBWSbUImBePR3PFCOvf5MUS3yiHhNR0VySmEC5jTo7qKWgvCgN5r1XEtrwTW6BoEQYM0HONC/cBLHDPPIL98noUohAqjR7uvWVV1HlVbfWV+o/t8J6DJOJ4jRY6idmVKnmVS1q8tK8zfBAAA') format('woff2'),
        url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.woff?t=1586882866168') format('woff'),
        url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.ttf?t=1586882866168') format('truetype'),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
        url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.svg?t=1586882866168#iconfont') format('svg');
      /* iOS 4.1- */
    }

    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .icon-lianjie:before {
      content: "\e6a3";
    }

    .icon-lianjie-copy:before {
      content: "\e6a4";
    }
  </style>
  <main id="app">
    <p class="tip">共计发送 {{count}} 条说说</p>
    <div class="timenode" v-for="item in contents" v-cloak>
      <div class="meta">
        <p><time v-bind:datetime="item.attributes.time">{{item.attributes.time}}</time></p>
      </div>
      <div class="body">
        <p v-html='item.attributes.content'></p>
      </div>
    </div>
  </main>
  <% } %>

修改主题配置_config.yml

找到主题配置的plugins：，在下面加入：

  ## 哔哔功能配置
  ## 关注公众号 "黑石哔哔"，发送: //bindCurrentUser:你的APPID,你的MASTERKEY,你的RESTAPI   
  ## 可用leancloud国际版，国际版api为 https://appid前八位.api.lncldglobal.com 
  bbtime:
    appId: 你的appId
    appKey: 你的appKey
    serverURLs: https://你的api

创建bb页面

输入终端命令：

hexo new page bb

hexo就在source文件夹下创建了bb/index.md

修改index.md的frontmater下的layout为bb：

---
title: 黑石说
layout: bb
---

开启了pjax的博客请ban掉bb

  pjax:
    enable: true
    timeout: 5000        # The timeout in milliseconds for the XHR requests. Set to 0 to disable the timeout.
    cacheBust: false     # When set to true, Pjax appends a timestamp  to skip the browser cache.
    animation: nprogress # nprogress, circle
    banUrl:              # 被屏蔽的 url 地址将不启用 pjax 跳转，可以在控制台下使用 window.location.pathname 获取
      # - /artitalk/     # artitalk 不支持 pjax
        - /bb/           # bb 不支持 pjax

完成修改！请享用！

volantis哔哔演示地址：https://www.heson10.com/volantis/bb/

独立页面制作源码：https://github.com/ibearye/talk/tree/master/hosting

独立页面演示地址：https://bb.heson10.com

🎁鸣谢

感谢 @熊野大佬的哔哔源码，让我换了个姿势发送短博文。

感谢 @林大帅发给我的leancloud对接公众号的源码，让我又能开心的折腾。（顺便帮你分流😁）

更新代码

10月18日：

网友 @北海轻歌反馈加在其他主题的时候，只显示条数，不显示内容。

原因是没有加上timeago()函数，部分volantis主题没开启友好显示时间功能时也会出现这个情况

解决方法为：在getData()函数前加上如下代码：

//友好地显示时间
function timeago(dateTimeStamp) { 
        var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示 
        var hour = minute * 60; 
        var day = hour * 24; 
        var week = day * 7; 
        var month = day * 30; 
        var now = new Date().getTime(); //获取当前时间毫秒 
        var diffValue = now - dateTimeStamp; //时间差 
        if (diffValue < 0) { 
            return; 
        } 
        var minC = diffValue / minute; //计算时间差的分，时，天，周，月 
        var hourC = diffValue / hour; 
        var dayC = diffValue / day; 
        var weekC = diffValue / week; 
        var monthC = diffValue / month; 
        if (monthC >= 1 && monthC <= 3) { 
            result = " " + parseInt(monthC) + " 月前" 
        } else if (weekC >= 1 && weekC <= 3) { 
            result = " " + parseInt(weekC) + " 周前" 
        } else if (dayC >= 1 && dayC <= 6) { 
            result = " " + parseInt(dayC) + " 天前" 
        } else if (hourC >= 1 && hourC <= 23) { 
            result = " " + parseInt(hourC) + " 小时前" 
        } else if (minC >= 1 && minC <= 59) { 
            result = " " + parseInt(minC) + " 分钟前" 
        } else if (diffValue >= 0 && diffValue <= minute) { 
            result = "刚刚" 
        } else { 
            var datetime = new Date(); 
            datetime.setTime(dateTimeStamp); 
            var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1; 
            var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate(); 
            result = Nmonth + "-" + Ndate 
        } 
        return result; 
    }

10月19日：

新增Matery版本适配：点我传送

新增next和butterfly主题，见系列文章。

10月27日：

更改友好显示时间代码：见下方评论区。