近日，cuteen主题作者那有人留言：

Cuteen4 适配更新

12月4日：

支持Cuteen4。 点我直达。

关于Typecho适配哔哔

今天（10月30日）完成基本功能适配，在hexo哔哔版本的基础上，新增了当前页面直接ajax加载未显示的哔哔。可能有小伙伴问了，为什么hexo不用这个功能？因为和valine评论系统的api冲突了，暂时没能找出初始两个AV的方法。😅

效果页面：https://typecho.heson10.com/index.php/9.html （cuteen4 12月4日更新）

已知bug🎃：

食用方法

准备工作

Leancloud创建存储空间

• 登陆leancloud创建应用（国区版本,绑定api的域名需备案 https://www.leancloud.cn/ ，国际版本：https://leancloud.app/ 有共享api，不需要备案域名，效果一样 ）

• 进入应用后，点击创建 Class

• 将「 Class 名称」命名为 content

  

• 点击刚刚创建的content Class，点击添加列并创建名称为content的列，类型为String，注意列注释也要填写（随意填）

  

• 记录appid，masterkey，api域名

  

  

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

  国际版leancloud不需要绑定域名，api地址为：

  appid前八位.api.lncldglobal.com

  微信公众号绑定

  关注下面公众号：

  

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

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

  完成后会提示绑定成功。

创建bb.php模板

在主题目录\usr\themes\Cuteen下新建bb.php模板，加入以下代码：

<?php 
/**
 * 哔哔页面
 * 
 * @package custom 
 * 黑石修改
 * https://www.heson10.com
 */
?>
<?php
$this->need('Base/head.php');
$this->need('Base/navbar.php');
$this->need('Base/hero.php');
?>
<div class="card-box clearfix  <?php echo Helper::options()->indeximg ? '' : 'pt4' ?> mx-auto">
    <div class="card-content mx-auto <?php echo Helper::options()->indeximg || $this->options->qjcbl ? '' : 'mt2' ?>" <?php echo $this->options->qjcbl && in_array('1', $this->options->cblxswz) ?  "" : "style='max-width: 850px'" ?>>

        <?php if ($this->options->qjcbl && $this->options->qjcblfx == 0 && in_array('1', $this->options->cblxswz)) : ?>
            <div class="qjcbl md-hide lg-col lg-col-3 mt1">
                <?php $this->need('Base/sidebar.php'); ?>
            </div>
        <?php endif ?>
        <div class="xs-col-12 cuteup lg-col <?php echo $this->options->qjcbl && in_array('1', $this->options->cblxswz) ?  "lg-col-9" : "lg-col-12" ?>  <?php echo Cuteen::isMobile() ? '' : 'mt1' ?>">
            <div class="mybox m1 <?php echo Helper::options()->indeximg ? '' : 'mt2' ?>">
                <div class="Post_content_box">
                    <?php if (!Helper::options()->indeximg) : ?>
                        <div class="detail-title-wrap">
                            <div class="wznydbt mt1 mb3"><?php $this->title() ?></div>
                            <div <?php echo Cuteen::isMobile() ? 'style="line-height:1.8"' : '' ?> class="flex justify-between <?php echo Cuteen::isMobile() ? 'flex-column' : 'pb2' ?>">
                                <nav class="breadcrumb h6">
                                    <ul class="flex">
                                        <li class="flex items-center pr1"> <svg class="icon" aria-hidden="true">
                                                <use xlink:href="#icon-shouye"></use>
                                            </svg><a href="<?php $this->options->siteUrl(); ?>" title="<?php $this->options->title(); ?>">首页</a></li>
                                        <li class="flex items-center"> <svg class="icon" aria-hidden="true">
                                                <use xlink:href="#icon-biaoqian1"></use>
                                            </svg>独立页面</li>
                                    </ul>
                                </nav>
                                <div class="flex flex-wrap">

                                    <span class="h6 flex items-center mr1">
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-huo"></use>
                                        </svg>
                                        <?php Cuteen::getPostviews($this) ?>
                                    </span>
                                    <span class="h6 flex items-center mr1">
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-bidianliang"></use>
                                        </svg>
                                        <?php Cuteen::getWordCount($this->cid) ?> 字
                                    </span>
                                    <span class="h6 flex items-center mr1">
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-pinglun"></use>
                                        </svg>
                                        <?php $this->commentsNum('暂无评论', '%d 条评论'); ?>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <hr>
                    <?php endif ?>
                  <article id="Post_wysiwyg" class="duta">
          <?php echo Cuteen::parseAll($this->content); ?>

                  <main id="app">
                  <article class="message lan"><div class="message_body">共计发送 {{count}} 条说说</div></article>

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

        <div class="load-ctn">
        <a class="btn lv" v-on:click="loadMore" v-if="contents" v-cloak>再翻翻</a>
        <p class="tip" v-else>别急，加载呢</p>
        </div>
                  </main>
             </article>
        </div>
    </div>
    <?php $this->need('Base/comment.php'); ?>
</div>
<?php if ($this->options->qjcbl && $this->options->qjcblfx == 1 && in_array('1', $this->options->cblxswz)) : ?>
            <div class="qjcbl md-hide lg-col lg-col-3 mt1">
                <?php $this->need('Base/sidebar.php'); ?>
            </div>
        <?php endif ?>
<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- */
    }
  #app img{display: block;}
    .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>
<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>
<?php echo '<script src="' . CUTEEN_STATIC_PATH . '/Js/bb.js"></script>'; ?>        
        </div>
    </div>
</div>
<?php $this->need('Base/footer.php'); ?>

加入bb.js

在主题目录下的Static\Js文件夹中新建bb.js文件，加入以下代码：

注意要修改自己的appid、appkey等参数

var {
    Query
  } = AV;
  AV.init({
    appId: "xxxxxx", //修改leancloud appid
    appKey: "xxxxx",//修改leancloud appkey
    serverURLs: 'https://' //修改api地址 https://开头
  });

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


  getData(0);


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




  //友好地显示时间
  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 = /(http|ftp|https):\/\/[\w-]+(.[\w-]+)+([\w-.,@?^=%&:/~+#]*[\w-\@?^=%&/~+#])?/g; 
    var re = /\bhttps?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|gif))\S+/g;  
    var re_forpic = /\bhttps?:\/\/.*?(\.gif|\.jpeg|\.png|\.jpg|\.bmp|\.webp)/g; 
    var re_forpic_vx = /^http:\/\/mmbiz\.qpic\.cn[^\s]*/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 + "'  /> ";
    });
    str = str.replace(re_forpic_vx, 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) { });
  };

增加css样式

在Static\Css\Main.css中加入：

/* 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;
}

/*bb暗黑样式*/
.DarkMode .timenode meta p{
    color: #fff;
}
.DarkMode .timenode p,.DarkMode .timenode li{
    color: #555;
}
.DarkMode .timenode blockquote p{
    color:#cfcfcf
}
.DarkMode .timenode p a{
    color: rgb(36, 122, 62);
}
.DarkMode .timenode .body {
    background: #c4c4c4;
}

Typecho后台的设置

• 新增一个哔哔页面

  

• 使用bb模板

开启了pjax功能的小伙伴看这里

-如果后台开启了pjax的功能：

请在Base\footer.php文件的这个地方：

添加以下代码：

  getData(0);

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

修改后如图：

🎀系列文章

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

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

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

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