本项目已经停止维护，但仍能正常使用，不再进行答疑。新版本项目入口

根据林木木的哔哔教程第二弹熟悉的味道，不一样配方中的首页展示滚动条进行魔改了一下，结合之前发布的Butterfly下自定义加载页底部滚动文字方法做成了现在的首页展示哔哔的样式。

效果预览

Demo

查看如何配置bb

Hexo的Butterfly适配个人动态（哔哔 for 腾讯云），在博客上发朋友圈

Hexo的Butterfly主页适配哔哔动态，博客主页展示滚动消息

Bug

使用本教程会产生问题，目前还没有能力解决，如果你解决了欢迎告知我。如果想要体验无bug的首页哔哔，可以查看熟悉的味道，不一样配方这篇文章的内容。

你可能会遇到：

  • 滚动完第9条后回滚到第1条动画不流畅。

说在前面

本文基于熟悉的味道，不一样配方对Butterfly的补充说明。重复部分不再赘述。

其中没有包含的部分为腾讯云的相关配置部分。

创建ui文件

创建themes/butterfly/layout/includes/bbTimeList.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#bbTimeList.bbTimeList
    #bber-talk.js-pjax(onclick="location='/bb/'")
        ul#con1
        ul#con2
    .js-pjax
        script(src='/zhheo/showbb_in_index.js',data-pjax='',defer='')
        script(type='text/javascript').
            var area = document.getElementById('bber-talk');
            var con1 = document.getElementById('con1');
            var con2 = document.getElementById('con2');
            var mytimer1 = null;
            var mytimer = null;
            var time = 500 / 60;
            con2.innerHTML = con1.innerHTML;
            function scrollUp () {
            if (area.scrollTop >= (con1.offsetHeight)) {
                area.scrollTop = 0;
            } else {
                if (area.scrollTop % 25 == 0) {
                        clearInterval(mytimer);
                        clearInterval(mytimer1);
                    mytimer1 = setTimeout(function () {
                        mytimer = setInterval(scrollUp, time);
                    }, 5000);
                }
                area.scrollTop++;
                }
            }
            mytimer = setInterval(scrollUp, time);

引入到主页

编辑themes/butterfly/layout/index.pug

1
2
3
4
5
6
7
block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
    include includes/categoryList.pug
+    include includes/bbTimeList.pug
    +postUI
    include includes/pagination.pug

创建js文件

创建themes/butterfly/source/zhheo/showbb_in_index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
function getbbdata(){
  let bbsurl = "https://你的json地址"
  
  var httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
  httpRequest.open('GET', bbsurl, true);//第二步：打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
  httpRequest.send();//第三步：发送请求  将请求参数写在URL中
  /**
   * 获取数据后的处理程序
   */
  httpRequest.onreadystatechange = function () {
  if (httpRequest.readyState == 4 && httpRequest.status == 200) {
      var json = httpRequest.responseText;//获取到json字符串，还需解析
      var obj = eval('(' + json + ')');
      // console.log(obj.data)
      const bbArray = obj.data.map(e => {
      return {
          'date': e.date,
          'content': e.content,
          'from': e.from
      }
      })
      // console.log(fundsArray)
      saveToLocal.set('zhheo-bb', JSON.stringify(bbArray), 5 / (60 * 24))
      const data = saveToLocal.get('zhheo-bb');
      generateBBHtml(JSON.parse(data))
  }
  };
}


var generateBBHtml = array => {
    let result = ''

    if (array.length) {
      for (let i = 0; i < array.length; i++) {
        result += `<li class='li-style'>${array[i].content}</li>`;
      }
    } else {
      result += '!{_p("aside.card_funds.zero")}';
    }
    
    let $dom = document.querySelector('#bber-talk #con1');
    $dom.innerHTML = result;
    window.lazyLoadInstance && window.lazyLoadInstance.update();
    window.pjax && window.pjax.refresh($dom);
  }

var bbInit = () => {
// console.log('运行')
if (document.querySelector('#bber-talk #con1')) {
    const data = saveToLocal.get('zhheo-bb');
    if (data) {
    generateBBHtml(JSON.parse(data))
    } else {
    getbbdata()
    }
}
}

bbInit();
document.addEventListener('pjax:complete', bbInit);

添加样式

样式仅供参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/* 主页哔哔bb */
#bber-talk {
  width: 100%;
  height: 25px;
  line-height: 25px;
  overflow: hidden;
}

#bber-talk #con1, #bber-talk #con2{
  min-height: 25px;
  width: 100%;
}

.li-style {
  width: 100%;
  height: 25px;
  text-align: center;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: 0.3s;
}

.li-style:hover{
  color: var(--heo-hovertext);
}

ul,li{
  list-style:none;
  display:block;
  margin: 0;
  padding: 0;
}

#bbTimeList{
  background: var(--heo-card-bg);
  color: var(--heo-fontcolor);
  margin-top: 1rem;
  padding: 0.6rem 1rem 0.5rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--heo-shadow-lightblack);
  display: flex;
}

/* 哔哔前往 */
.bber-gotobb{
  line-height: 25px;
  margin-left: 8px;
  transition: 0.3s;
}

.bber-gotobb:hover{
  color: var(--heo-hovertext);
  transition: 0.3s;
}

/* 哔哔标志 */
.icon-bblogo{
  font-size: 2rem;
  font-size: 2rem;
  line-height: 22px;
  margin-right: 8px;
  transition: 0.3s;
}

.icon-bblogo:hover{
  color: var(--heo-hovertext);
  transition: 0.3s;
}

大功告成

已经成功配置首页哔哔了！赶紧发条哔哔庆祝一下吧！