
Heo即刻短文:分享自我与精彩生活
即刻短文部署,原教程Hexo的Butterfly魔改:即刻短文静态部署版,本文在原有基础上进行了拓展。
注:如有新功能本文会继续进行更新。
列表 | 是否支持 |
---|---|
图片 | ✅ |
链接 | ✅ |
音乐 | ✅ |
瀑布流 | ✅ |
首页滚动 | ✅ |
预览
创建数据
在source/_data
目录下创建essay.yml
1 | - class_name: 即刻短文 |
配置参数介绍
参数 | 含义 |
---|---|
content | 即刻短文内容 |
image | 图片 |
link | 链接 |
music.server | 音乐服务商(tencent QQ,netease 网易云,,kugou 酷狗, xiami 虾米) |
music.id | 音乐id |
date | 日期 |
创建md页面
创建md页面,在控制台输入hexo new page essay
,生成文件在source/essay/index.md
1 | --- |
创建页面文件
在themes/butterfly/layout/includes/page
目录下创建essay.pug
1 | .author-content.author-content-item.essayPage.single.essayVideo |
修改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#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.content
if item.image
- contentText= item.content + ' [图片]'
else if item.music
- contentText= 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
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.staticaly.com/gh/haonan15/CDN@main/source/waterfall.min.js"></script> # 瀑布流添加js
在自定义js中添加
1
2
3
4
5
6
7
8
9
10if (document.querySelector('#bber-talk')) {
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
loop: true,
autoplay: {
delay: 3000,
pauseOnMouseEnter: true
},
});
}
- 感谢你赐予我前进的力量
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用 CC BY-NC-SA 4.0 协议,完整转载请注明来自 随风起!
评论
匿名评论
隐私政策
✅ 你无需删除空行,直接评论以获取最佳展示效果