Typecho-Cuteen主题哔哔适配
近日，cuteen主题作者那有人留言：
很好，又来活了。二话不说，开干😎
关于Typecho适配哔哔
今天（10月30日）完成基本功能适配，在hexo哔哔版本的基础上，新增了当前页面直接ajax加载未显示的哔哔。可能有小伙伴问了，为什么hexo不用这个功能？因为和valine评论系统的api冲突了，暂时没能找出初始两个AV的方法。😅
效果页面：https://typecho.heson10.com/index.php/14.html
已知bug🎃：
食用方法
准备工作
Leancloud创建存储空间
登陆leancloud创建应用（国区版本,绑定api的域名需备案 https://www.leancloud.cn/ ，国际版本：https://leancloud.app/ 有共享api，不需要备案域名，效果一样 ）
进入应用后，点击
创建 Class将「 Class 名称」命名为 content
点击刚刚创建的content Class，点击
添加列并创建名称为content的列，类型为String，注意列注释也要填写（随意填）
记录appid，masterkey，api域名
因为我用的是国区版本，api绑定域名需要备案域名。
国际版leancloud不需要绑定域名，api地址为：
appid前八位.api.lncldglobal.com微信公众号绑定
关注下面公众号：
按照公众号的提示的命令进行绑定：
//bindCurrentUser:你的AppID,你的MasterKey,https://你的api域名完成后会提示
绑定成功。
创建bb.php模板
在主题目录\usr\themes\Cuteen下新建bb.php模板，加入以下代码：
<?php
/**
* 哔哔页面
*
* @package custom
* 黑石修改
* https://www.heson10.com
*/
?>
<?php
$this->need('Base/head.php');
$this->need('Base/navbar.php');
$this->need('Base/hero.php');
?>
<div class="card-box clearfix <?php echo Helper::options()->indeximg ? '' : 'pt4' ?> mx-auto">
<div class="card-content mx-auto <?php echo Helper::options()->indeximg || $this->options->qjcbl ? '' : 'mt2' ?>" <?php echo $this->options->qjcbl && in_array('1', $this->options->cblxswz) ? "" : "style='max-width: 850px'" ?>>
<?php if ($this->options->qjcbl && $this->options->qjcblfx == 0 && in_array('1', $this->options->cblxswz)) : ?>
<div class="qjcbl md-hide lg-col lg-col-3 mt1">
<?php $this->need('Base/sidebar.php'); ?>
</div>
<?php endif ?>
<div class="xs-col-12 cuteup lg-col <?php echo $this->options->qjcbl && in_array('1', $this->options->cblxswz) ? "lg-col-9" : "lg-col-12" ?> <?php echo Cuteen::isMobile() ? '' : 'mt1' ?>">
<div class="mybox m1 <?php echo Helper::options()->indeximg ? '' : 'mt2' ?>">
<div class="Post_content_box">
<?php if (!Helper::options()->indeximg) : ?>
<div class="detail-title-wrap">
<div class="wznydbt mt1 mb3"><?php $this->title() ?></div>
<div <?php echo Cuteen::isMobile() ? 'style="line-height:1.8"' : '' ?> class="flex justify-between <?php echo Cuteen::isMobile() ? 'flex-column' : 'pb2' ?>">
<nav class="breadcrumb h6">
<ul class="flex">
<li class="flex items-center pr1"> <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shouye"></use>
</svg><a href="<?php $this->options->siteUrl(); ?>" title="<?php $this->options->title(); ?>">首页</a></li>
<li class="flex items-center"> <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-biaoqian1"></use>
</svg>独立页面</li>
</ul>
</nav>
<div class="flex flex-wrap">
<span class="h6 flex items-center mr1">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-huo"></use>
</svg>
<?php Cuteen::getPostviews($this) ?>
</span>
<span class="h6 flex items-center mr1">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bidianliang"></use>
</svg>
<?php Cuteen::getWordCount($this->cid) ?> 字
</span>
<span class="h6 flex items-center mr1">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-pinglun"></use>
</svg>
<?php $this->commentsNum('暂无评论', '%d 条评论'); ?>
</span>
</div>
</div>
</div>
<hr>
<?php endif ?>
<article id="Post_wysiwyg" class="duta">
<?php echo Cuteen::parseAll($this->content); ?>
<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 lv" v-on:click="loadMore" v-if="contents" v-cloak>再翻翻</a>
<p class="tip" v-else>别急，加载呢</p>
</div>
</main>
</article>
</div>
</div>
<?php $this->need('Base/comment.php'); ?>
</div>
<?php if ($this->options->qjcbl && $this->options->qjcblfx == 1 && in_array('1', $this->options->cblxswz)) : ?>
<div class="qjcbl md-hide lg-col lg-col-3 mt1">
<?php $this->need('Base/sidebar.php'); ?>
</div>
<?php endif ?>
<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";
}
</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>
<?php echo '<script src="' . CUTEEN_STATIC_PATH . '/Js/bb.js"></script>'; ?>
</div>
</div>
</div>
<?php $this->need('Base/footer.php'); ?>加入bb.js
在主题目录下的Static\Js文件夹中新建bb.js文件，加入以下代码：
注意要修改自己的appid、appkey等参数
var {
Query
} = AV;
AV.init({
appId: "xxxxxx", //修改leancloud appid
appKey: "xxxxx",//修改leancloud appkey
serverURLs: 'https://' //修改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) { });
};
增加css样式
在Static\Css\Main.css中加入：
/* 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暗黑样式*/
.DarkMode .timenode meta p{
color: #fff;
}
.DarkMode .timenode p,.DarkMode .timenode li{
color: #555;
}
.DarkMode .timenode blockquote p{
color:#cfcfcf
}
.DarkMode .timenode p a{
color: rgb(36, 122, 62);
}
.DarkMode .timenode .body {
background: #c4c4c4;
}Typecho后台的设置
新增一个哔哔页面
使用bb模板
开启了pjax功能的小伙伴看这里
如果后台开启了pjax的功能：
请在Base\footer.php文件的这个地方：
添加以下代码：
getData(0);
query.count().then(function (count) {
app.count = count;
}, function (error) { });修改后如图：
🎀系列文章
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) 协议
