腾讯云已经跑路了,挂在腾讯云函数的twikoo已经私有部署了,还剩下一个即刻短文还跑在腾讯云开发的服务上。

找了黑石原来的leancloud方案,主要黑石的公众号是订阅号不是服务号,发起来很麻烦,没有开源无法私有部署。

难道真的要像木木学习魔改Twikoo?

在改友链的时候突然想到为什么不能用与butterfly相同的yml生成方式呢?

这个文章就简单发一下生成逻辑和代码。

本教程仅作为开源使用,需要有一定魔改基础。具体参考哔哔

即刻短文静态部署版测试中,本文可能会不定时更新。

什么是即刻短文

相比发博客文章需要考虑选题、编写详细的内容,即刻短文可以提供一个快捷的短文字解决方案,避免博客短文章过多造成的整站文章质量下降。

与黑石哔哔有何不同?

有一个表格介绍一下

不同之处 黑石哔哔 即刻短文(静态部署版) 即刻短文(旧版)
部署服务 leancloud动态部署 静态部署 腾讯云动态部署
费用 免费 免费 首月免费
服务位置 ✅leancloud ✅本地 腾讯云
发表方式 指定公众号绑定后发布 修改本地yml文件发布 ✅get请求
加载速度 js请求leancloud数据 ✅静态html读取 js请求json数据
支持媒体 图片 ✅图片、音乐、链接 图片
第三方支持 图片灯箱 ✅图片灯箱、瀑布流、回复动态、首页滚动 回复动态、首页滚动

创建数据

创建source/_data/essay.yml

我这里提供一些示例数据:

1
2
3
4
5
6
7
8
9
10
11
12
- class_name: 即刻短文
essay_list:
- content: 即刻短文用上了木木发的waterfall的js,瀑布流真令人愉悦
date: 2022-08-12
- content: iOS16现在感觉已经很稳定了,bug比较少,令人讨厌的就是一个是切换横竖屏抖音和b站都有点问题,然后就是软件请求剪贴板弹窗真的烦
date: 2022-08-12
- content: 现在即刻短文已经纯本地化部署完成,不再依赖任何第三方服务了
date: 2022-08-12
- content: 在整理转载文章的时候发现很多文章原文都无法访问了,所以本地保存网页是非常重要的
date: 2022-08-05T06:08:54.978Z
- content: adguardhome真的不能设置太久的缓存时间,否则非常容易卡和无响应。然后就是注意添加白名单
date: 2022-08-04T10:10:09.984Z

创建页面文件

创建themes/butterfly/layout/includes/page/essay.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.title-and-tips
h1.page-title(style='display: inline;')= page.title
.page-tips 静态部署版
#bber
section.timeline.page-1
ul#waterfall.list
each i in site.data.essay
each item, index in i.essay_list
if index < 30
li.item
.bber-content
p.datacont= item.content
if item.image
a.bber-content-img(href=item.image, target="_blank")
img(src=item.image)
.bber-bottom
.bber-info
- var datedata = new Date(item.date).toISOString()
time.datatime(datetime= item.date)= datedata
#bber-tips(style='color: var(--heo-secondtext);')
| - 只展示最近30条短文 -

创建md文件

创建source/essay/index.md

1
2
3
4
5
6
7
---
title: 即刻短文
date: 2020-07-22 22:06:17
comments: true
aside: false
type: essay
---

修改Page文件

修改themes/butterfly/layout/page.pug

case page.type子项里面添加

1
2
when 'essay'
include includes/page/essay.pug

首页BB(可选)

创建dom

编辑themes/butterfly/layout/includes/bbTimeList.pug

1
2
3
4
5
6
7
8
9
10
11
12
#bbTimeList.bbTimeList.container
i.bber-logo.iconfont.icon-bblogo(onclick=`pjax.loadUrl("/essay/")`,title="即刻短文",style="font-size: 2rem;")
#bbtalk.swiper-container.swiper-no-swiping(tabindex="-1")
#bber-talk.swiper-wrapper(onclick=`pjax.loadUrl("/essay/")`)
each i in site.data.essay
each item, index in i.essay_list
if index < 10
- var contentText = item.image ? item.content + ' [图片]' : item.content
.li-style.swiper-slide= contentText

i.bber-gotobb.fas.fa-arrow-circle-right(onclick=`pjax.loadUrl("/essay/")`,title="查看全文")
script(src='https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js',data-pjax='')

引入到主页

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

引入css

themes/butterfly/_config.yml中的inject属性的head里添加

1
2
3
4
inject:
head:
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/js-heo@1.0.11/bb/showbb_in_index.css">

执行js

执行滚动函数,这个可以插入到任意js中,保证每次加载页面执行即可。

1
2
3
4
5
6
7
8
9
10
if (document.querySelector('#bber-talk')) {
var swiper = new Swiper('.swiper-container', {
direction: 'vertical', // 垂直切换选项
loop: true,
autoplay: {
delay: 3000,
pauseOnMouseEnter: true
},
});
}