简单介绍

此项目只是一个前端皮肤,其功能受限于后端云函数。因此我已经将哔哔迁移speak。此皮肤项目不在维护!!!

此项目仅仅作为哔哔点啥数据的前端页面展示,并不会修改及影响任何关于云函数的内容。

注:前端解析不在使用 markdown 语法解析,但支持![]() 语法的图片。

示例页面:小康的 bb 页面

image-20210324110323140

样式参考:微博

快速开始

请先确保按照其教程成功部署后,在你的 markdown 文件写入如下内容即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id='speak-bber'></speak>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/ispeak-bber.min.js" charset="utf-8" ></script>
<script>
ispeakBber
.init({
el: '#speak-bber',
name: 'DreamyTZK 🦄', // 显示的昵称
envId: '腾讯云开发环境id', // 环境id
region: 'ap-shanghai', // 腾讯云地址,默认为上海
limit: 10, // 每次加载的条数,默认为5
avatar: 'https://cdn.jsdelivr.net/npm/kang-static@latest/avatar.jpg',
fromcolor:'rgb(245, 150, 170)'
})
.then(function() {
console.log('ispeak 加载完成')
})
</script>

按照注释需求填写对应的信息即可。

发布哔哔的新方式

此插件仅适用于 chrome 内核的浏览器。

发布哔哔的方式很简单,即调用接口请求数据即可。作者提供了一种微信发布哔哔的方式,参考张洪的教程又解锁了通过快捷指令Utools发布哔哔的方式。但这三种方式对我来说均有些不足,因此参考handsome主题附赠的浏览器插件源码,改装成了一个发送哔哔的发射台。

image-20210324111051857

  • 接口地址:也就是云函数的接口地址

    示例:https://环境id.ap-shanghai.app.tcloudbase.com/bber,参考木木的教程进行获取。

  • key

    自定义的 key

  • 7bu 图床 token

    插件允许ctrl+v拖拽方式进行上传图片到7bu 图床,因此你可以设置 token,如果设置会将图片上传到自己的账户下,不设置则会匿名上传。

    token 获取参考:https://7bu.top/index/api.html

  • from

    对应接口 from 字段,原意为哔哔来源,但我更倾向于标签的定义。

浏览器如何安装插件

  1. 使用 Edge 浏览器安装ispeak-bber插件
  2. 填写对应字段,然后发送哔哔

添加首页轮播

添加首页轮播借助了butterfly 主题自定义组件的功能实现,通过在自定义组件处加载 JavaScript 生成首页的轮播展示。示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- class_name: latestBB
id_name:
name: 最新吐槽
icon: fas fa-bolt
order: 2
html: |
<div class="swiper-container swiper-container-aside">
<div class="swiper-wrapper swiper-weapper-aside"></div>
</div>
<a class="bb-btn button--animated" href="/bb/" title="查看全部"><i class="far fa-hand-point-right fa-fw"></i> 查看更多 </a>
<script>
window.kkBBConfig = {
limit: 9,
blog:'/bb/',
api_url:
'https://636f-comment-5gj5t55m7efcd73d-1251136071.tcb.qcloud.la/json/bber.json'
}
</script>
<script src="https://cdn.jsdelivr.net/npm/butterfly-bber-swiper/dist/index.min.js"></script>
  • latestBB

    容器 class 名,请保持latestBB不要更改

  • html

    必须包含的内容如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    - class_name: latestBB
    html: |
    <div class="swiper-container swiper-container-aside">
    <div class="swiper-wrapper swiper-weapper-aside"></div>
    </div>
    <script>
    window.kkBBConfig = {
    // 如果使用API 那么此字段表示读取的数量
    limit: 9,
    // 点击后跳转的链接
    blog:'/bb/',
    // api地址,可以是json文件地址 也可以是api地址
    api_url:
    'https://636f-comment-5gj5t55m7efcd73d-1251136071.tcb.qcloud.la/json/bber.json'
    }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/butterfly-bber-swiper/dist/index.min.js"></script>

    其他可根据自己的需求今天添加。

  • 其他

    其他未提及字段非本项目必须字段,因此不做解释,可参考官方文档:https://butterfly.js.org/posts/ea33ab97/