简单介绍

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

注:前端解析使用了markd进行解析markdown。因此发布哔哔时可以使用markdown语法

示例页面:小康的bb页面

image-20210324110323140

样式参考:微博

快速开始

请先确保按照其教程成功部署后,在你的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主题附赠的浏览器插件源码,改装成了一个发送哔哔的发射台。

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字段,原意为哔哔来源,但我更倾向于标签的定义。

项目地址:https://gitlab.com/DreamyTZK/chrome-ispeak-bber

浏览器如何安装插件

  1. 下载源代码,保存到任意目录。

  2. 打开浏览器的扩展程序页面:chrome://extensions/

  3. 打开开发者模式,然后点击加载已解压的扩展程序

    image-20210324112839961

  4. 选择刚才的文件目录根目录即可

    image-20210324113010198

修改默认from,打开html中的popup.html,修改第68行的value值即可。

添加首页轮播

添加首页轮播借助了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>

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

  • 其他

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