博主本人自认为是个分享欲很强的人,一些感动瞬间,很想记录下来。之前使用的bber很强大,但是在音乐分享方面没有支持,本来想周末搞,结果今天事儿不多,就摸鱼改出来了。

包含

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

效果演示

效果预览

特性

当前版本 v1.4.5

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

首页bber轮播实现

代码实现流程

依赖jQuery

添加以下js代码,自己新建或加到已有的js文件中,其中跳转URLjson URL换成你自己的。(自己新建的,记得blog/_config.butterfly.ymlinject里引入)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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.ymlinject里引入)

1
2
3
4
5
6
7
8
/* 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这一行下,添加以下内容,注意缩进:

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

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

说说页面使用

代码实现流程

新建一个bb(说说)独立页面,然后直接复制粘贴以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--  自言自语  -->
<div id='speak'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/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://cdn.jsdelivr.net/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/目录下。

使用方法

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

分享网易云音乐

网易云音乐要简单些,无论歌单还是歌曲,选择复制链接,去除无关字符,将URL发给云函数即可。
bber分享歌曲示例

可能遇到的问题

  1. 分享网易云音乐歌单,页面空白不显示
    确实如此。我排查了相关代码,应该没错,似乎是meting.js的问题,暂且搁置

  2. 页面没有出现aplayer效果
    首先在主题配置文件中,将aplayer自动插入打开;再说说页面顶部信息里,增加aplayer: true

  3. 同一首歌曲/歌单,同个音乐源,分享2次及以上,只有第一次会展示。主要是id相同了

  4. 其他非butterfly主题如何使用
    自行摸索

关联阅读: