给bber换个皮肤

简单介绍

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

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

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

样式参考：微博

快速开始

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

<div id='speak-bber'></speak>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ispeak-bber@1.1.1-beta/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主题附赠的浏览器插件源码，改装成了一个发送哔哔的发射台。

接口地址：也就是云函数的接口地址
示例：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 字段，原意为哔哔来源，但我更倾向于标签的定义。

浏览器如何安装插件

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

添加首页轮播

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

- 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

必须包含的内容如下：

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