bber 哔哔闪念

想记录某一瞬间，就哔哔几句。

效果预览

特性

当前版本 v1.4.5

增加 QQ 音乐或网易云音乐的歌曲 / 歌单分享，说说页面在线播放
调整了说说出现图片时，顶部空白过大问题
调整了 “再翻翻”，增加阴影和 hover 效果
调整顶部 “My BiBi” 为 “闪念”
更换一种 timeago 方法，解决 “两周前”、“三周前” 等部分情况下显示实际日期的 bug
修复头像尺寸异常的 bug
bber 说说首页轮播效果，链接、音乐、图片的美化展示
支持 Markdown 格式图片链接或 URL

创建应用

注册腾讯云云开发CloudBase
进入云开发控制台，新建环境，请按需配置环境。
进入环境-登录授权，启用匿名登录
进入环境-安全配置，将网站域名添加到WEB安全域名
进入数据库，新建数据库集合，命名 talks，权限设置为 所有用户可读，仅管理员可写

云函数部署

新建 bb 函数

函数名称 bber （可自定义），进入 函数代码 编辑，复制 index.js 代码丢入 index.js，然后确定。
点击文件 - 新建文件，复制 package.json 代码丢入 package.json，点击 保存并安装依赖。
进入环境-HTTP访问服务，新建，路径与云函数名匹配。

现在访问一下，提示 key 不匹配，成功！

1	https://你后台显示的.ap-shanghai.app.tcloudbase.com/bber

注意：第一时间修改云函数中 bber 这个预设的「自定义apikey」

新建 bb-talk 函数

首先新建个云函数 bber-talk，打开 index.js 代码复制进去保存，新建并打开 package.json 代码复制进去保存并安装依赖。

新建 bb-list 函数

首先新建个云函数 bber-list，打开 index.js 代码复制进去保存，新建并打开 package.json 代码复制进去保存并安装依赖。

获取API地址

第一次配置需要尝试发一条bb，浏览器直接访问修改好的url：

1	https://你后台显示的.ap-shanghai.app.tcloudbase.com/bber?key=云函数里设置的默认为bber&from=这条哔哔的来源&text=xxx

发送一条哔哔之后在云存储的位置能够复制临时链接

首页 bber 轮播

依赖 jQuery

添加以下 js 代码，自己新建或加到已有的 js 文件中，其中跳转 URL 和 json URL 换成你自己的。最后记得在主题配置文件 inject 里引入

$(document).ready(function(){
  if ( $("#bber-talk").length > 0 ) {
    var jsonUrl = ''
    jsonUrl = "https://626c-blogpkly-13278c-1258453354.tcb.qcloud.la/json/bber.json"
    $.getJSON(jsonUrl+"?t="+Date.parse( new Date()),function(res){
      var bberHtml = ''
      $.each(res.data, function(i, item){
        var d = new Date(item.date)
        var date = d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate() +' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds()
        var dataTime = timeago.format(date, 'zh_CN');
        var newdataTime = '<span class="datatime">'+dataTime+'</span>'
        bberHtml += '<li class="item item-'+(i+1)+'">'+'<a href="https://guole.fun/bb/" style="color: var(--font-color);/*font-weight: normal;*/">'+newdataTime+'： '+urlToLink(item.content)+'</a></li>'
      });
      $('#bber-talk').append('<span class="index-talk-icon" style="margin-right: 5px"><svg viewBox="0 0 550 550" width="15" height="15"><path d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288z"></path></svg></span><ul class="talk-list">'+bberHtml+'</ul>')
    });
    function urlToLink(str) {
      var img_tag = /(<br>)|([[\s\S]*])|(\()|(\))/g;
      var re_forimg =/\<[img|IMG].*?src=[\'|\"](https\:\/\/.*?(?:[\.jpg|\.jpeg|\.png|\.gif|\.bmp]))[\'|\"].*?[\/]?>/g;
      var music = /(y.qq.com)|(music.163.com)/g;
      var music_url = /[a-zA-z]+:\/\/[^\s]*/g;
      if (music.test(str)) {
        str =str.replace(music_url,function () {
          return '<svg viewBox="0 0 1024 1024" width="18" height="18"><path d="M960 0H1024v736c0 88.3712-100.283733 160-224 160S576 824.3712 576 736s100.283733-160 224-160c62.685867 0 119.3472 18.397867 160 48.042667V256l-512 113.783467v494.216533c0 88.3712-100.283733 160-224 160S0 952.3712 0 864s100.283733-160 224-160c62.685867 0 119.3472 18.397867 160 48.042667V128L960 0z"></path></svg>音乐分享';
        });
      } else {}
      str =str.replace(re_forimg,'$1');
      var re_formd = /^!\[(.*)\]\((.*)\)/g;
      str = str.replace(re_formd,'$2');
      str = str.replace(img_tag,"");
      var re =/\bhttps?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|gif))\S+/g;
      var re_forpic =/\bhttps?:\/\/.*?(\.gif|\.jpe?g|\.png|\.bmp|\.webp)/g;
      str =str.replace(re,function (website) {
        return '<svg viewBox="0 0 1025 1024" width="21" height="21"><path d="M333.06186 733.061768c-58.347896 52.210106-97.040127 49.051159-136.467091 9.492188l-45.156456-48.462758c-39.427988-39.541575-39.427988-103.667058 0-143.226029l193.260585-193.848986c39.426965-39.558971 103.355973-39.558971 142.78396 0l35.679617 35.794228c30.457686 30.555923 37.398772 75.762521 20.801768 112.997564l86.286202 66.040089c59.149145-59.33027 59.149145-155.517983 0-214.830857L523.162476 249.600755c-59.133795-59.33027-155.010423-59.33027-214.160591 0L44.350342 515.071965c-59.133795 59.313897-59.133795 155.50161 0 214.830857l107.08797 107.415428c59.133795 59.313897 155.026796 59.313897 214.176964 0l102.161774-105.647155-72.980151-70.034053L333.06186 733.061768zM987.196021 285.394982 880.1234 177.979554c-59.149145-59.33027-155.026796-59.33027-214.176964 0 0 0 4.223185-1.064238-57.988716 61.343113l71.113641 68.167542 31.604812-34.877345c39.427988-39.541575 103.356996-39.541575 142.78396 0l35.69599 35.8106c39.427988 39.541575 39.427988 103.667058 0 143.226029L714.818517 632.847345c-39.427988 39.541575-103.340623 39.541575-142.768611 0l-29.395494-48.462758c-61.883419-46.25344-42.865273-57.317427-37.611619-88.544639L426.548044 418.130076c-59.150168 59.33027-59.150168 155.517983 0 214.830857l107.072621 107.432825c59.149145 59.312874 155.026796 59.312874 214.176964 0l239.398392-240.166895C1071.582967 402.924769 987.196021 285.394982 987.196021 285.394982z"></path></svg>';
      });
      str =str.replace(re_forpic,function (imgurl) {
        return '<svg viewBox="0 0 1024 1024" width="21" height="21"><path d="M821.6 120.93333333H195.4c-74.1 0-134.2 60.1-134.2 134.2v492c0 74.1 60.1 134.2 134.2 134.2h626.2c74.1 0 134.2-60.1 134.2-134.2v-492c0-74.1-60.1-134.2-134.2-134.2zM251.3 255.13333333c30.9 0 55.9 25 55.9 55.9s-25 55.9-55.9 55.9-55.9-25-55.9-55.9 25-55.9 55.9-55.9z m614.6 559.1H153.3c-37.3 0-58.2-43.1-35.1-72.4L302.1 508.33333333c17.9-22.7 52.4-22.7 70.3 0l76.5 97.2 148.6-260c17.2-30.1 60.5-30.1 77.7 0L904.8 747.33333333c17 29.8-4.5 66.9-38.9 66.9z"></path></svg>';
      });
      return str;
    }
    function Roll (){
      var list_li = $('.talk-list li'),cur_li = list_li.first(),last_li = list_li.last();
      last_li.after(cur_li);
    };
    setInterval(Roll,3000);
  }
});

可以新建或添加以下代码到已有的自定义 css 文件中。最后记得在主题配置文件 inject 里引入

/* bber轮播 */
#bber-talk{background:var(--card-bg);color:var(--fontcolor);padding:0.6rem 1rem 0.5rem 1rem;border-radius:12px;cursor:auto;box-shadow:var(--card-box-shadow);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;overflow:hidden;transition:all 0.3s;margin-bottom:1rem;z-index: 10;position: relative;}
#bber-talk:not(a){font-weight:bold;}
#bber-talk svg{fill: currentColor;vertical-align: middle;display: inline;margin-right:5px;}
#bber-talk .talk-list{margin: 0;padding: 0;max-height: 1.6rem;overflow: hidden;margin-bottom: 0.2rem;transition: all 1s ease-in-out;}
#bber-talk .talk-list :hover{color: #49b1f5 !important;transition: all .15s ease-in-out;}
#bber-talk .talk-list li.item a {cursor:pointer;}
#bber-talk .talk-list li {list-style: none;width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

找到 /themes/butterfly/layout/index.pug 文件，在 #recent-posts.recent-posts 这一行下，添加以下内容，注意缩进：

#recent-posts.recent-posts
  #bber-talk
    script(src='/js/jquery.min.js')
    script(src='/js/timeago.min.js')

文件放到主题目录的 /source/js/ 下。

jQuery 下载 timeago 下载

说说页面（闪念）

新建一个 bb（说说）独立页面，然后直接复制粘贴以下内容：

<div id='speak'>
<link rel="stylesheet" href="https://scarf.oss-cn-beijing.aliyuncs.com/css/APlayer.min.css">
<script type="text/javascript" src="/js/timeago.min.js" charset="utf-8" ></script>
<script type="text/javascript" src="https://scarf.oss-cn-beijing.aliyuncs.com/js/ispeak-bber.min.js" charset="utf-8" ></script>
<script>
ispeakBber
    .init({
        el: '#speak', // 容器选择器
        name: '哔哔叨叨 🌈', // 显示的昵称
        envId: 'hello-cloudbase-7gmn7i4x22450c3e', // 环境id
        region: 'ap-shanghai', // 腾讯云地址，默认为上海
        limit: 7, // 每次加载的条数，默认为5
        avatar: 'https://sscarf.com/img/avatar.jpg', // 头像地址
        fromColor:'rgb(245, 150, 170)', // 下方标签背景颜色 默认 rgb(245, 150, 170)
        loadingImg: 'https://scarf.oss-cn-beijing.aliyuncs.com/img/loading.gif', // 自定义loading的图片，示例值为默认值
        dbName:'talks' // 数据的名称，默认talks，避免有人的命名不是这个，所以加入此配置字段。
    })
    .then(function() {
        // 哔哔加载完成后的回调函数，你可以写你自己的功能
        console.log('哔哔 加载完成')
    })
</script>
</div>