BB短博文Hexo-Butterfly主题适配
我又双叒叕来了！这次是Hexo-Butterfly主题的哔哔适配。
之前，哔哔功能已经适配了Volantis（ejs模板）、Matery（ejs模板）、Next（njk模板），越来越多的小伙伴已经用上了哔哔功能。
今天在NEXT主题群里，@bynote 小伙伴问道：
ok，没问题👌开整！
Butterfly这款主题用的是pug模板
💛💛💛💛教程开始↓↓↓↓↓↓↓💛💛💛💛
准备工作
- leancloud创建存储空间
- 关注微信公众号，绑定api
前面两篇文章都有介绍，这里不啰嗦。👉点我
创建bb.pug模板
在themes\butterfly\layout\includes\page\下创建bb.pug模板，填如下代码：
if top_img === false
h1.page-title= page.title
style(type="text/css").
@font-face {
font-family: "iconfont";
src: url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.eot?t=1586882866168');
/* IE9 */
src: url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.eot?t=1586882866168#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALcAAsAAAAAB2gAAAKPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqCUII8ATYCJAMMCwgABCAFhG0HQBuEBsiuMRkynL4YFCHtLKs4b+k7/80U8DwHIB6+xtr7u3vniDZI6tmnkyDS8NC5iFgJlE7pTPcO8e5b+803aYQy8YtH1JPKyZzY3ttb1EonioVGSBAiRJp4JV9cFppCxLpe2z8sUs37O4QEDFRM0lFeAw4XN6bQPG06zTG8DRwHFOBeGEVWIjE+mP8wduVFPCbQNK4ktN8/OgFJhbEqEFemLkEyFVcUVqoL1ZKDRbyIqafb9AA8+9+PX41IklQyY+PBSZ8KnR+9iBx0OxZcp8PxvGDHyFgACnFY6j8QCfMLIppKPmoCrGtW8OG/y0eufLX/8AiJqDKa22AGWpMzUth6p6aARySQQRUUL4AnSBmuyvIwPdbz21OX5ybO5duOJifaLl6cvkrd1HR7kWEy6yikff29PvgO17V/Tf/9f/oN3PDqz22a719IYlZJHQetpLY08MV6fwFDrF0B6F4XyB3/FyEEnZnU2XGtVwHvpxtA1d6pftKB4AcoWo4U1QQbiiy35Xow27whbwK2NNFlhAc99zeOtM4S6ikFQ1IzhqxuglAoC6ho2UBV3Raa5g0cbxnCRURpYM4pQOh3h6TXG7J+j4RCeULFqFdU9UcETYfRdGHLVJjpHk6SIBXlTTQV5mmWS6SD1jHSVx2JJ1U+a4p4YKawvrSSLQ2QR3yMLcGa3hBCQ40zF/vBc+Q4DH3OLFJExRDCb64un5S9qaIwF9L2cEQiEBWSbUImBePR3PFCOvf5MUS3yiHhNR0VySmEC5jTo7qKWgvCgN5r1XEtrwTW6BoEQYM0HONC/cBLHDPPIL98noUohAqjR7uvWVV1HlVbfWV+o/t8J6DJOJ4jRY6idmVKnmVS1q8tK8zfBAAA') format('woff2'),
url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.woff?t=1586882866168') format('woff'),
url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.ttf?t=1586882866168') format('truetype'),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.svg?t=1586882866168#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-lianjie:before {
content: "\e6a3";
}
.icon-lianjie-copy:before {
content: "\e6a4";
}
!= page.content
main#app
p.tip 共计发送 {{count}} 条说说
.timenode(v-for="item in contents" v-cloak)
.meta
p
time(v-bind:datetime="item.attributes.time") {{item.attributes.time}}
.body
p(v-html='item.attributes.content')
script(src='https://cdn.bootcss.com/vue/2.6.11/vue.min.js')
script(src='https://cdn.jsdelivr.net/npm/leancloud-storage@4.5.3/dist/av-min.js')
script.
var {
Query
} = AV;
AV.init({
appId: "!{theme.bbtime.appId}",
appKey: "!{theme.bbtime.appKey}",
serverURLs: '!{theme.bbtime.serverURLs}'
});
var query = new AV.Query('content');
var app = new Vue({
el: '#app',
data: {
page: 0,
count: 0,
contents: []
},
methods: {
loadMore: function (event) {
getData(++this.page);
}
}
})
function urlToLink(str) {
//增加发图片功能
var re = /\bhttps?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|gif))\S+/g;
var re_forpic = /\bhttps?:\/\/.*?(\.gif|\.jpeg|\.png|\.jpg|\.bmp|\.webp)/g;
str = str.replace(re, function (website) {
return "<a href='" + website + "' target='_blank'> <i class='iconfont icon-lianjie-copy'></i>链接 </a>";
});
str = str.replace(re_forpic, function (imgurl) {
return "<img src='" + imgurl + "' /> ";
});
return str;
}
//友好地显示时间
function timeago(dateTimeStamp) {
var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
var hour = minute * 60;
var day = hour * 24;
var week = day * 7;
var month = day * 30;
var now = new Date().getTime(); //获取当前时间毫秒
var diffValue = now - dateTimeStamp; //时间差
if (diffValue < 0) {
return;
}
var minC = diffValue / minute; //计算时间差的分，时，天，周，月
var hourC = diffValue / hour;
var dayC = diffValue / day;
var weekC = diffValue / week;
var monthC = diffValue / month;
if (monthC >= 1 && monthC <= 3) {
result = " " + parseInt(monthC) + " 月前"
} else if (weekC >= 1 && weekC <= 3) {
result = " " + parseInt(weekC) + " 周前"
} else if (dayC >= 1 && dayC <= 6) {
result = " " + parseInt(dayC) + " 天前"
} else if (hourC >= 1 && hourC <= 23) {
result = " " + parseInt(hourC) + " 小时前"
} else if (minC >= 1 && minC <= 59) {
result = " " + parseInt(minC) + " 分钟前"
} else if (diffValue >= 0 && diffValue <= minute) {
result = "刚刚"
} else {
var datetime = new Date();
datetime.setTime(dateTimeStamp);
var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
result = Nmonth + "-" + Ndate
}
return result;
}
function getData(page = 0) {
query.descending('createdAt').skip(page * 10).limit(10).find().then(function (results) {
if (results.length == 0) {
alert('之前没发表过说说了')
} else {
let resC = results;
reqData = false;
resC.forEach((i) => {
let dateTmp = new Date(i.createdAt);
i.attributes.time = timeago(dateTmp);
i.attributes.content = urlToLink(i.attributes.content);
app.contents.push(i);
})
}
}, function (error) { });
}
getData(0);
query.count().then(function (count) {
app.count = count;
}, function (error) { });
修改page.pug
在themes\butterfly\layout\page.pug中，如下位置
加上如下代码**(注意代码缩进)**：
when 'bb'
include includes/page/bb.pug添加css样式
丢进themes\butterfly\source\css\index.styl里面
/* bb样式 */
div.timenode {
position: relative;
}
div.timenode:before,
div.timenode:after {
content: '';
z-index: 1;
position: absolute;
background: rgba(68,215,182,0.5);
width: 2px;
left: 7px;
}
div.timenode:before {
top: 0px;
height: 6px;
}
div.timenode:after {
top: 26px;
height: calc(100% - 26px);
}
div.timenode:last-child:after {
height: calc(100% - 26px - 16px);
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
div.timenode .meta,
div.timenode .body {
max-width: calc(100% - 24px);
}
div.timenode .meta {
position: relative;
color: var(--color-meta);
font-size: 0.875rem;
line-height: 32px;
height: 32px;
}
div.timenode .meta:before,
div.timenode .meta:after {
content: '';
position: absolute;
top: 8px;
z-index: 2;
}
div.timenode .meta:before {
background: rgba(68,215,182,0.5);
width: 16px;
height: 16px;
border-radius: 8px;
}
div.timenode .meta:after {
background: #44d7b6;
margin-left: 2px;
margin-top: 2px;
width: 12px;
height: 12px;
border-radius: 6px;
transform: scale(0.5);
transition: all 0.28s ease;
-moz-transition: all 0.28s ease;
-webkit-transition: all 0.28s ease;
-o-transition: all 0.28s ease;
}
div.timenode .meta p {
font-weight: bold;
margin: 0 0 0 24px;
}
div.timenode .body {
margin: 4px 0 16px 24px;
padding: 16px;
border-radius: 8px;
background: var(--color-block);
display: inline-block;
}
div.timenode .body:empty {
display: none;
}
div.timenode .body >*:first-child {
margin-top: 0.25em;
}
div.timenode .body >*:last-child {
margin-bottom: 0.25em;
}
div.timenode .body .highlight {
border: 1px solid #e4e4e4;
}
div.timenode:hover .meta {
color: var(--color-text);
}
div.timenode:hover .meta:before {
background: rgba(255,87,34,0.5);
}
div.timenode:hover .meta:after {
background: #ff5722;
transform: scale(1);
}
div.timenode .body {
margin: 0 0 0 24px;
padding: 16px;
border-radius: 8px;
background: #f6f6f6;
display: inline-block;
}修改主题配置_config.yml
在主题配置中加入（注意要顶格）：
## 哔哔功能配置
## 关注公众号 "黑石哔哔"，发送: //bindCurrentUser:你的APPID,你的MASTERKEY,你的RESTAPI
## 可用leancloud国际版，国际版api为 https://appid前八位.api.lncldglobal.com
bbtime:
appId: 你的appId
appKey: 你的appKey
serverURLs: https://你的api创建bb页面
输入终端命令：
hexo new page bbhexo就在source文件夹下创建了bb/index.md
修改index.md的frontmater下的layout为bb：
---
title: 黑石说
type: bb
---这个地方是tpye不是layout，跟之前的不一样，注意注意注意！
里面的文字可以自己随意加，会显示在哔哔的上方。
开启了pjax功能的，请ban掉bb页面
完毕！
🎀系列文章
10月19日：《BB短博文Hexo-Matery主题适配》
10月20日：《BB短博文Hexo-Next主题(8.0+)适配》
10月21日：《BB短博文Hexo-Butterfly主题适配》
10月30日：《Typecho-Cuteen主题哔哔适配》
博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议
