ispeak-bber前端美化增强版，支持歌曲分享

一些感动瞬间，很想记录下来，之前使用的bber很强大，但是在音乐分享方面没有支持，最近摸鱼，就折腾出来了。

包含

支持hexo主题，特别是Butterfly的首页轮播bber
支持自定义说说页面，直接播放分享的QQ音乐/网易云音乐，歌单或歌曲

效果演示

效果预览

说说页面在线播放

点击查看我的说说页面

/bb/

特性

当前版本 v1.4.5

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

首页bber轮播实现

代码实现流程

依赖jQuery

添加以下js代码，自己新建或加到已有的js文件中，其中跳转URL和json URL换成你自己的。（自己新建的，记得blog/_config.butterfly.yml中inject里引入）

var pathName = window.document.location.pathname
if (pathName === '/') {
  $(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);
      }
    });
} else {}

可以新建或添加以下代码到已有的自定义css文件中。（自己新建的，记得blog/_config.butterfly.yml中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:-0.2rem;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.3rem;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')

文件放到blog/source/js/目录下。

jQuery下载 timeago下载

说说页面使用

代码实现流程

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

<!--  自言自语  -->
<div id='speak'>
<link rel="stylesheet" href="https://jsd.guole.fun/npm/aplayer/dist/APlayer.min.css">
<script type="text/javascript" src="/js/timeago.min.js" charset="utf-8" ></script>
<script type="text/javascript" src="https://jsd.guole.fun/gh/kuole-o/bber-ispeak@main/dist/ispeak-bber.min.js" charset="utf-8" ></script>
<script>
ispeakBber
    .init({
        el: '#speak', // 容器选择器
        name: '夜的第八章 🦄', // 显示的昵称
        envId: 'blogpkly-13278c', // 环境id
        region: 'ap-shanghai', // 腾讯云地址，默认为上海
        limit: 7, // 每次加载的条数，默认为5
        avatar: 'https://cdn.guole.fun/img/gl.jpg', // 头像地址
        fromColor:'rgb(245, 150, 170)', // 下方标签背景颜色 默认 rgb(245, 150, 170)
        loadingImg: 'https://7.dusays.com/2021/03/04/d2d5e983e2961.gif', // 自定义loading的图片，示例值为默认值
        dbName:'talks' // 数据的名称，默认talks，避免有人的命名不是这个，所以加入此配置字段。
    })
    .then(function() {
        // 哔哔加载完成后的回调函数，你可以写你自己的功能
        console.log('哔哔 加载完成')
    })
</script>
</div>

文件放到blog/source/js/目录下。

timeago下载

使用方法

分享QQ音乐

分享歌曲
在QQ音乐中，选择要分享的歌曲——复制链接——发给文件传输助手，点开这个链接，微信中获取当前页面链接，将这个URL直接发给bber云函数
注：如果是手机中点击链接，则会得到一条类似https://i.y.qq.com/v8/playsong.html?ADTAG=cbshare&_wv=1&appshare=android_qq&appsongtype=1&appversion=10170011&channelId=10036163&hosteuin=oKoA7inioKn5oz%2A%2A&openinqqmusic=1&platform=11&songmid=000srYoG1nhunX&type=0https://y.qq.com/n/ryqq/songDetail/000srYoG1nhunX?songtype=0&ADTAG=h5_playsong这样的链接；PC端，则是这样的https://y.qq.com/n/ryqq/songDetail/000srYoG1nhunX?songtype=0&ADTAG=h5_playsong

分享歌单
在QQ音乐中，选择要分享的歌单——分享给微信好友——微信传输助手，点击这个分享结果，微信中获取当前页面链接，将这个URL直接发给bber云函数
注：如果是手机中点击链接，则会得到一条类似https://i.y.qq.com/n2/m/share/details/taoge.html?platform=11&appshare=android_qq&appversion=10170011&hosteuin=oKoA7inioKn5oz**&id=7828767579&ADTAG=wxfshare这样的链接；PC端，则是这样的https://y.qq.com/n/ryqq/playlist/7828767579