这篇文章介绍了如何在博客主页展示滚动动态,使用了冰老师同款Swiper进行滚动,相比旧版本滚动更加流畅,没有疯狂滚动bug。文章提供了创建dom、引入到主页、创建js文件和引入css等步骤,并提供了更新日志和参考文章。
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
投诉
本项目已经停止维护,但仍能正常使用,不再进行答疑。新版本项目入口
第一个写的测试版有几个问题,这个版本中使用冰老师那年今日 同款Swiper来进行滚动,滚动更加丝滑,并且没有pjax的疯狂滚动问题。并且鉴于Swiper有更多的扩展性,这个功能还有更多发挥空间。
样式预览
相比旧版本 相比旧版本 增加特性
查看如何配置bb Hexo的Butterfly适配个人动态(哔哔 for 腾讯云),在博客上发朋友圈
Hexo的Butterfly主页适配哔哔动态,博客主页展示滚动消息
创建dom 创建themes/butterfly/layout/includes/bbTimeList.pug
1 2 3 4 5 6 7 #bbTimeList.bbTimeList.container i.bber-logo.iconfont.icon-bblogo(onclick="location='/essay/'",title="即刻短文",style="font-size: 2rem;") #bbtalk.swiper-container #bber-talk.swiper-wrapper(onclick="location='/essay/'") .js-pjax script(src='https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js',data-pjax='') script(src='/zhheo/showbb_in_index.js',data-pjax='',defer='')
引入到主页 编辑themes/butterfly/layout/index.pug
1 2 3 4 5 6 7 block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts include includes/categoryList.pug + include includes/bbTimeList.pug +postUI include includes/pagination.pug
创建js文件 创建themes/butterfly/source/zhheo/showbb_in_index.js
,并填写api地址。
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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 function getbbdata ( ) { var bbsurl = "https://7a68-zhheo-0g8unj30bfbeb210-1302424805.tcb.qcloud.la/json/bber.json?sign=6162122afe14a6b7d3f837bb79b02fd9&t=1612691873" var httpRequest = new XMLHttpRequest(); httpRequest.open('GET' , bbsurl, true ); httpRequest.send(); httpRequest.onreadystatechange = function ( ) { if (httpRequest.readyState == 4 && httpRequest.status == 200 ) { var json = httpRequest.responseText; var obj = eval ('(' + json + ')' ); const bbArray = obj.data.map(e => { return { 'date' : e.date, 'content' : e.content, 'from' : e.from } }) saveToLocal.set('zhheo-bb' , JSON .stringify(bbArray), 5 / (60 * 24 )) const data = saveToLocal.get('zhheo-bb' ); generateBBHtml(JSON .parse(data)) } }; } var generateBBHtml = array => { var $dom = document .querySelector('#bber-talk' ); var result = '' if (array.length) { for (let i = 0 ; i < array.length; i++) { var itemcontent = array[i].content var newitemcontent = itemcontent.replace(/(https?:[^:<>"]*\/)([^:<>"]*)(\.((png!thumbnail)|(png)|(jpg)|(webp)|(jpeg)|(gif)))/g ,' [图片] ' ) result += `<div class='li-style swiper-slide'>${newitemcontent} </div>` ; } } else { result += '!{_p("aside.card_funds.zero")}' ; } var $dom = document .querySelector('#bber-talk' ); $dom.innerHTML = result; window .lazyLoadInstance && window .lazyLoadInstance.update(); window .pjax && window .pjax.refresh($dom); var swiper = new Swiper('.swiper-container' , { direction: 'vertical' , loop: true , autoplay: { delay: 3000 , disableOnInteraction: true , }, }); } var bbInit = () => {if (document .querySelector('#bber-talk' )) { const data = saveToLocal.get('zhheo-bb' ); if (data) { generateBBHtml(JSON .parse(data)) } else { getbbdata() }; } } bbInit(); document .addEventListener('pjax:complete' , bbInit);
引入css 在themes/butterfly/_config.yml
中的inject
属性的head
里添加
1 2 3 inject: head: - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
并写入css
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 #bber-talk { width : 100% ; height : 25px ; line-height : 25px ; } #bber-talk .li-style { width : 100% ; height : 25px ; text-align : center; -webkit-line-clamp: 1 ; -webkit-box-orient: vertical; overflow : hidden; text-overflow : ellipsis; transition : 0.3s ; } .li-style :hover { color : #49b1f5 ; } ul ,li { list-style :none; display :block; margin : 0 ; padding : 0 ; } #bbTimeList { background : var (--card-bg); color : var (--font-color); margin-top : 1rem ; padding : 0.6rem 1rem 0.5rem 1rem ; border-radius : 12px ; cursor : pointer; display : flex; }
更新日志
参考文章 熟悉的味道,不一样配方
Codepen Demo