
Heo版即刻短文
文章摘要
HrnAI
文章摘要初始化中...
Butterfly主题添加Heo版本的即刻短文
介绍作者JayHrn
生成本文简介
推荐相关文章
前往主页
看看其他文章
前一段时间就看到了即刻短文 | 张洪Heo,一直以来想要有这种可以发一句话的地方,配置过小康的,但是奈何总是卡在分支那一步,总是报错,问过其他人发现都是按照教程就可以配置好,由于这是静态,可能每次发一两句话就要重新部署,对于某些人来说可能不太方便,如果需要可以参照KK Api进行部署,按照文档走基本不会有任何问题。
当然这是一篇关于即刻短文的教程,不会就这么结束了,如果你也想拥有Heo版的即刻短文,可以参考如下教程,原教程来自Hexo的Butterfly魔改:即刻短文静态部署版 | 张洪Heo (zhheo.com),本教程基于原教程进行补充。
效果
具体效果可以查看即刻短文 |JayHrn - 分享科技与热爱生活
魔改步骤
创建基本示例数据
创建source/_data/essay.yml
,内容可以参考如下写法
1 | - class_name: 即刻短文 |
内容 | 含义 |
---|---|
content | 短文内容 |
date | 发表日期 |
image | 图片 |
link | 链接 |
新建页面
新建themes/butterfly/layout/includes/page/essay.pug
1 | .title-and-tips |
新建md页面,使用指令hexo new page essay
1 | --- |
修改Page页面
修改themes/butterfly/layout/page.pug
,注意对齐
1 | case page.type |
创建首页轮播
新建
themes/butterfly/layout/includes/bbTimeList.pug
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23#bbTimeList.bbTimeList.container
i.bber-logo.iconfont.icon-heidong(onclick=`pjax.loadUrl("/essay/")` title="即刻短文")
#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="查看全文")
.js-pjax
script(src='https://cdn1.tianli0.top/npm/swiper/swiper-bundle.min.js' data-pjax='')
script.
new Swiper('.swiper-container', {
direction: 'vertical',
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: true,
// pauseOnMouseEnter: !0 //鼠标放上去不轮播
}
})其中
pauseOnMouseEnter
可以自己选择是否开启引入到主页
1
2
3
4
5
6
7block content
include ./includes/mixins/post-ui.pug
#recent-posts.recent-posts
include includes/categoryList.pug
+ include includes/bbTimeList.pug
+postUI
include includes/pagination.pug可根据自己主题布局进行改变位置
引入样式文件
1
2
3
4
5inject:
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">
- <script src="https://cdn.jsdelivr.net/gh/Jayhrn/CDN/waterfall.min.js"></script> # 实现短文瀑布流需要使用
具体即刻短文页面样式可以自取,若部分图标没有出现,请自行更换或f12获取
还有部分Heo版本的即刻短文样式没有实现,例如引入音乐等,如果有需要可以自行前往参考。
- 感谢你赐予我前进的力量
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用CC BY-NC-SA 4.0 协议,完整转载请注明来自JayHrn
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果