哔哔！换个姿势在静态博客上发短博文
转载请声明出处哦~，本篇文章发布于黑石博客：https://heson.me
本文链接：https://heson.me/life/1.html
要在静态博客上发送短博文，不像wordpress和typecho新建个栏目那么简单。
之前博客整的是artitalk（说说，想进一步了解，点我），已经有短博文的那种体验了，而且还能支持发送markdown、图片、音乐等等功能。感觉唯一的缺点就是：发文不是很方便，需要在博客上登陆。(至少我觉得很麻烦)
后来看到 @熊野 的那篇《哔哔点啥，换个舒服的姿势》，顿时感觉爱了，这就是我梦寐以求发送短博文的姿势。
💖效果图
-
发文效果图，引用熊野大佬的图
-
黑石博客融合效果图：
🍔食用方法
Leancloud创建存储空间
-
登陆leancloud创建应用
-
进入应用后，点击
创建 Class -
将「 Class 名称」命名为 content
-
点击刚刚创建的content Class，点击
添加列并创建名称为content的列，类型为String
-
记录appid，masterkey，api域名
因为我用的是国区版本，api绑定域名需要备案域名。
国际版leancloud不需要绑定域名，api地址为：
appid前八位.api.lncldglobal.com
微信公众号绑定
由 @林帅 给的leancloud对接公众号的源码，我搭建在自己公众号上了。
关注下面公众号：
按照公众号的提示的命令进行绑定：
//bindCurrentUser:你的AppID,你的MasterKey,https://你的api域名
完成后会提示绑定成功。
Hexo博客适配
这里主要介绍volantis主题（4.0版本已测试）的适配。我这里的代码是在 @熊野 的基础上，增加了图片发文功能（直接发送图片外链地址即可）
新建bb.ejs模板
在themes\volantis\layout中新建bb.ejs，代码如下：
<%- partial('_pre') %>
<%- partial('_partial/side') %>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
<%- partial('_partial/article', {post: page, index: false}) %>
</div>
<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 type="text/javascript">
var {
Query
} = AV;
AV.init({
appId: "<%= theme.plugins.bbtime.appId %>",
appKey: "<%= theme.plugins.bbtime.appKey %>",
serverURLs: '<%= theme.plugins.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 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) { });
</script>
修改article.ejs
找到themes\volantis\layout\_partial\article.ejs如下图位置所示：
加上如下代码：
<% if (page.layout == 'bb') { %>
<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- */
}
.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>
<main id="app">
<p class="tip">共计发送 {{count}} 条说说</p>
<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>
</main>
<% } %>
修改主题配置_config.yml
找到主题配置的plugins：，在下面加入：
## 哔哔功能配置
## 关注公众号 "哔哔点啥"，发送: //bindCurrentUser:你的APPID,你的MASTERKEY,你的RESTAPI
## 可用leancloud国际版，国际版api为 https://appid前八位.api.lncldglobal.com
bbtime:
appId: 你的appId
appKey: 你的appKey
serverURLs: https://你的api
创建bb页面
输入终端命令：
hexo new page bb
hexo就在source文件夹下创建了bb/index.md
修改index.md的frontmater下的layout为bb：
---
title: 黑石说
layout: bb
---
开启了pjax的博客请ban掉bb
pjax:
enable: true
timeout: 5000 # The timeout in milliseconds for the XHR requests. Set to 0 to disable the timeout.
cacheBust: false # When set to true, Pjax appends a timestamp to skip the browser cache.
animation: nprogress # nprogress, circle
banUrl: # 被屏蔽的 url 地址将不启用 pjax 跳转，可以在控制台下使用 window.location.pathname 获取
# - /artitalk/ # artitalk 不支持 pjax
- /bb/ # bb 不支持 pjax
完成修改！请享用！
volantis哔哔演示地址：https://heson.me/volantis/bb/
独立页面制作源码：https://github.com/ibearye/talk/tree/master/hosting
独立页面演示地址：https://bb.heson.me
浙公网安备 33010602011771号