这篇文章介绍了如何在Hexo 的Butterfly主题 中适配哔哔动态 ,实现博客主页展示滚动消息 的效果。文章中详细介绍了创建ui文件 、引入到主页、创建js文件 以及添加样式 等步骤,帮助读者轻松实现该功能。同时,也提到了可能会遇到的Bug ,并指出了解决方法。
发送
本项目已经停止维护,但仍能正常使用,不再进行答疑。新版本项目入口
根据林木木的哔哔教程第二弹熟悉的味道,不一样配方 中的首页展示滚动条进行魔改了一下,结合之前发布的Butterfly下自定义加载页底部滚动文字方法 做成了现在的首页展示哔哔的样式。
效果预览
Demo
查看如何配置bb Hexo的Butterfly适配个人动态(哔哔 for 腾讯云),在博客上发朋友圈
Hexo的Butterfly主页适配哔哔动态,博客主页展示滚动消息
Bug 使用本教程会产生问题,目前还没有能力解决,如果你解决了欢迎告知我。如果想要体验无bug的首页哔哔,可以查看熟悉的味道,不一样配方 这篇文章的内容。
你可能会遇到:
说在前面 本文基于熟悉的味道,不一样配方 对Butterfly的补充说明。重复部分不再赘述。
其中没有包含的部分为腾讯云的相关配置部分。
创建ui文件 创建themes/butterfly/layout/includes/bbTimeList.pug
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 #bbTimeList.bbTimeList #bber-talk.js-pjax(onclick="location='/bb/'") ul#con1 ul#con2 .js-pjax script(src='/zhheo/showbb_in_index.js',data-pjax='',defer='') script(type='text/javascript'). var area = document.getElementById('bber-talk'); var con1 = document.getElementById('con1'); var con2 = document.getElementById('con2'); var mytimer1 = null; var mytimer = null; var time = 500 / 60; con2.innerHTML = con1.innerHTML; function scrollUp () { if (area.scrollTop >= (con1.offsetHeight)) { area.scrollTop = 0; } else { if (area.scrollTop % 25 == 0) { clearInterval(mytimer); clearInterval(mytimer1); mytimer1 = setTimeout(function () { mytimer = setInterval(scrollUp, time); }, 5000); } area.scrollTop++; } } mytimer = setInterval(scrollUp, time);
引入到主页 编辑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
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 function getbbdata ( ){ let bbsurl = "https://你的json地址" 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 => { let result = '' if (array.length ) { for (let i = 0 ; i < array.length ; i++) { result += `<li class='li-style'>${array[i].content} </li>` ; } } else { result += '!{_p("aside.card_funds.zero")}' ; } let $dom = document .querySelector ('#bber-talk #con1' ); $dom.innerHTML = result; window .lazyLoadInstance && window .lazyLoadInstance .update (); window .pjax && window .pjax .refresh ($dom); } var bbInit = ( ) => {if (document .querySelector ('#bber-talk #con1' )) { const data = saveToLocal.get ('zhheo-bb' ); if (data) { generateBBHtml (JSON .parse (data)) } else { getbbdata () } } } bbInit ();document .addEventListener ('pjax:complete' , bbInit);
添加样式 样式仅供参考
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 #bber-talk { width : 100% ; height : 25px ; line-height : 25px ; overflow : hidden; } #bber-talk #con1 , #bber-talk #con2 { min-height : 25px ; width : 100% ; } .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 : var (--heo-hovertext); } ul ,li { list-style :none; display :block; margin : 0 ; padding : 0 ; } #bbTimeList { background : var (--heo-card-bg); color : var (--heo-fontcolor); margin-top : 1rem ; padding : 0.6rem 1rem 0.5rem 1rem ; border-radius : 12px ; cursor : pointer; box-shadow : var (--heo-shadow-lightblack); display : flex; } .bber-gotobb { line-height : 25px ; margin-left : 8px ; transition : 0.3s ; } .bber-gotobb :hover { color : var (--heo-hovertext); transition : 0.3s ; } .icon-bblogo { font-size : 2rem ; font-size : 2rem ; line-height : 22px ; margin-right : 8px ; transition : 0.3s ; } .icon-bblogo :hover { color : var (--heo-hovertext); transition : 0.3s ; }
大功告成 已经成功配置首页哔哔了!赶紧发条哔哔庆祝一下吧!