喜大普奔，Cuteen4 于昨天上线了！今天有小伙伴留言说想适配哔哔。开整！
demo: https://typecho.heson10.com/index.php/9.html
准备工作
- Leancloud创建存储空间
- 微信公众号绑定
具体方法之前有说。点我直达
创建bb.php
在主题目录\usr\themes\Cuteen下新建bb.php模板，加入以下代码：
<?php
/**
* 哔哔页面
* @package custom
*/
$this->need('base/head.php');
$this->need('base/navbar.php');
?>
<div class="row justify-content-center <?= Ctx::SidebarArray()[0] ?>">
<?= Ctx::Sidebar($this) ?>
<div id="content" class="col-lg-9">
<section class="post-ctx">
<?=Ctx::HeroTitleNoImg($this)?>
<article id="post">
<?= Ctx::Post($this,$this->user->hasLogin()) ?>
<main id="app">
<article class="message lan"><div class="message_body">共计发送 {{count}} 条说说</div></article>
<div class="timenode" v-for="item in contents" v-cloak>
<div class="meta">
<p><time v-bind:datetime="item.attributes.time">{{item.attributes.time}}</time></p>
</div>
<div class="body">
<p v-html='item.attributes.content'></p>
</div>
</div>
<div class="load-ctn">
<a class="btn btn-success" role="button" v-on:click="loadMore" v-if="contents" v-cloak>再翻翻</a>
<p class="tip" v-else>别急，加载呢</p>
</div>
</main>
</article>
<footer id="post-info">
</footer>
</section>
<style>
@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- */
}
#app img{display: block;}
.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";
}
/* 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;
}
/*bb暗黑样式*/
.dark-mode .timenode meta p{
color: #fff;
}
.dark-mode .timenode p,.dark-mode .timenode li{
color: #555;
}
.dark-mode .timenode blockquote p{
color:#cfcfcf
}
.dark-mode .timenode p a{
color: rgb(36, 122, 62);
}
.dark-mode .timenode .body {
background: #c4c4c4;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leancloud-storage@4.5.3/dist/av-min.js"></script>
<script src="<?= StaticPath . 'js/bb.js'; ?>"></script>
<section id="comments" class="post-comment mt-4">
<header class="post-nav">
<span class="item"><svg class="icon mr-1" aria-hidden="true"><use
xlink:href="#talk"></use></svg>页面评论</span>
</header>
<hr id="comment-hr">
<?php $this->need('base/comment.php'); ?>
</section>
</div>
</div>
<?php $this->need('base/footer.php'); ?>
加入bb.js
在主题目录下的Static\Js文件夹中新建bb.js文件，加入以下代码：
注意要修改自己的appid、appkey等参数
var {
Query
} = AV;
AV.init({
appId: "0KzOX4vC7Jsk6vzUGNeEiUaI-gzGzoHsz", //修改leancloud appid
appKey: "HwCiWuxfpvKiLm4teCUgTIba",//修改leancloud appkey
serverURLs: 'https://bbapi.heson10.com' //修改api地址 https://开头
});
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);
}
}
})
getData(0);
query.count().then(function (count) {
app.count = count;
}, function (error) { });
//友好地显示时间
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 urlToLink(str) {
// var re = /(http|ftp|https):\/\/[\w-]+(.[\w-]+)+([\w-.,@?^=%&:/~+#]*[\w-\@?^=%&/~+#])?/g;
var re = /\bhttps?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|gif))\S+/g;
var re_forpic = /\bhttps?:\/\/.*?(\.gif|\.jpeg|\.png|\.jpg|\.bmp|\.webp)/g;
var re_forpic_vx = /^http:\/\/mmbiz\.qpic\.cn[^\s]*/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 + "' /> ";
});
str = str.replace(re_forpic_vx, function (imgurl) {
return "<img src='" + imgurl + "' /> ";
});
return str;
};
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) { });
};
Typecho后台的设置
新增一个哔哔页面
使用bb模板
开启了pjax的童鞋
请在Base\footer.php文件的这个地方：
添加以下代码：
getData(0);
query.count().then(function (count) {
app.count = count;
}, function (error) { });