BB短博文Hexo-Butterfly主题适配 - 黑石博客

🎀系列文章

我又双叒叕来了！这次是Hexo-Butterfly主题的哔哔适配。

之前，哔哔功能已经适配了Volantis（ejs模板）、Matery（ejs模板）、Next（njk模板），越来越多的小伙伴已经用上了哔哔功能。

今天在NEXT主题群里，@bynote 小伙伴问道：

ok，没问题👌开整！

Butterfly这款主题用的是pug模板（对代码缩进有极端的要求），跟之前适配工作的不太一样，代码需要调整很多。先上效果图：

💛💛💛💛教程开始↓↓↓↓↓↓↓💛💛💛💛

准备工作

leancloud创建存储空间
关注微信公众号，绑定api

前面两篇文章都有介绍，这里不啰嗦。👉点我

创建bb.pug模板

在themes\butterfly\layout\includes\page\下创建bb.pug模板，填如下代码：

if top_img === false
  h1.page-title= page.title



style(type="text/css").   
    @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";
    }


!= page.content


main#app
  p.tip 共计发送 {{count}} 条说说
  .timenode(v-for="item in contents" v-cloak)
    .meta
      p
        time(v-bind:datetime="item.attributes.time") {{item.attributes.time}}
    .body
      p(v-html='item.attributes.content')


script(src='https://cdn.bootcss.com/vue/2.6.11/vue.min.js')
script(src='https://cdn.jsdelivr.net/npm/leancloud-storage@4.5.3/dist/av-min.js')
script.
    var {
    Query
  } = AV;
  AV.init({
    appId: "!{theme.bbtime.appId}",
    appKey: "!{theme.bbtime.appKey}",
    serverURLs: '!{theme.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);
      }
    }
  })

  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 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 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) { });

修改page.pug

在themes\butterfly\layout\page.pug中，如下位置

加上如下代码**(注意代码缩进)**：

      when 'bb'
        include includes/page/bb.pug

添加css样式

丢进themes\butterfly\source\css\index.styl里面

/* bb样式 */
div.timenode {
    position: relative;
  }
  div.timenode:before,
  div.timenode:after {
    content: '';
    z-index: 1;
    position: absolute;
    background: rgba(68,215,182,0.5);
    width: 2px;
    left: 7px;
  }
  div.timenode:before {
    top: 0px;
    height: 6px;
  }
  div.timenode:after {
    top: 26px;
    height: calc(100% - 26px);
  }
  div.timenode:last-child:after {
    height: calc(100% - 26px - 16px);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
  }
  div.timenode .meta,
  div.timenode .body {
    max-width: calc(100% - 24px);
  }
  div.timenode .meta {
    position: relative;
    color: var(--color-meta);
    font-size: 0.875rem;
    line-height: 32px;
    height: 32px;
  }
  div.timenode .meta:before,
  div.timenode .meta:after {
    content: '';
    position: absolute;
    top: 8px;
    z-index: 2;
  }
  div.timenode .meta:before {
    background: rgba(68,215,182,0.5);
    width: 16px;
    height: 16px;
    border-radius: 8px;
  }
  div.timenode .meta:after {
    background: #44d7b6;
    margin-left: 2px;
    margin-top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    transform: scale(0.5);
    transition: all 0.28s ease;
    -moz-transition: all 0.28s ease;
    -webkit-transition: all 0.28s ease;
    -o-transition: all 0.28s ease;
  }
  div.timenode .meta p {
    font-weight: bold;
    margin: 0 0 0 24px;
  }
  div.timenode .body {
    margin: 4px 0 16px 24px;
    padding: 16px;
    border-radius: 8px;
    background: var(--color-block);
    display: inline-block;
  }
  div.timenode .body:empty {
    display: none;
  }
  div.timenode .body >*:first-child {
    margin-top: 0.25em;
  }
  div.timenode .body >*:last-child {
    margin-bottom: 0.25em;
  }
  div.timenode .body .highlight {
    border: 1px solid #e4e4e4;
  }
  div.timenode:hover .meta {
    color: var(--color-text);
  }
  div.timenode:hover .meta:before {
    background: rgba(255,87,34,0.5);
  }
  div.timenode:hover .meta:after {
    background: #ff5722;
    transform: scale(1);
  }
  div.timenode .body {
    margin: 0 0 0 24px;
    padding: 16px;
    border-radius: 8px;
    background: #f6f6f6;
    display: inline-block;
}

修改主题配置_config.yml

在主题配置中加入（注意要顶格）：

## 哔哔功能配置
## 关注公众号 "哔哔点啥"，发送: //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: 黑石说
type: bb
---

这个地方是tpye不是layout，跟之前的不一样，注意注意注意！

里面的文字可以自己随意加，会显示在哔哔的上方。

开启了pjax功能的，请ban掉bb页面

完毕！