这篇文章介绍了如何在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 ; }
大功告成 已经成功配置首页哔哔了!赶紧发条哔哔庆祝一下吧!