即刻短文部署,原教程Hexo的Butterfly魔改:即刻短文静态部署版,本文在原有基础上进行了拓展。

注:如有新功能本文会继续进行更新。2024/07/03

列表 是否支持
图片
链接
音乐
瀑布流
首页滚动
位置信息

预览

即刻短文-随风起:分享知识与美好时光

创建数据

source/_data目录下创建essay.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- class_name: 即刻短文
essay_list:
- content: 文章推荐卡片教程推出
image: https://cdn.bywind.xyz/img/cover/image-20221221154442479.png
link: https://blog.bywind.xyz/posts/ab6e072d.html
location: 山西
date: 2022-12-21
- content: 关于本站
link: https://blog.bywind.xyz/about/
location: 天津
date: 2022-12-20
- content: 即刻短文头图换成视频,更显动态感
date: 2022-12-19 23:07:23
- content: 李荣浩的歌还是那么好听,两人配合太棒了!
music:
server: tencent
id: 001wG84E4bOj3V
date: 2022-12-19 08:07:23

配置参数介绍

参数 含义
content 即刻短文内容
image 图片
link 链接
music.server 音乐服务商(tencentQQ,netease网易云,,kugou酷狗, xiami虾米)
music.id 音乐id
location 位置信息
date 日期

创建md页面

创建md页面,在控制台输入hexo new page essay,生成文件在source/essay/index.md

1
2
3
4
5
6
7
8
---
title: 即刻短文
date: 2022-12-20 22:06:17
comments: true
aside: false
top_img: false
type: essay
---

创建页面文件

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.author-content.author-content-item.essayPage.single.essayVideo
.card-content
.author-content-item-tips 即刻短文
span.author-content-item-title 分享生活的小确幸
.content-bottom
.tips 使用 即刻短文静态部署版 构建
.banner-button-group
a.banner-button(onclick='pjax.loadUrl("/about/")', data-pjax-state)
i.fas.fa-circle-chevron-right
span.banner-button-text 部署项目
#bber
section.timeline.page-1
ul#waterfall.list.show
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
.bber-content-img
a.fancybox(target='_blank', rel='noopener', href=item.image, data-fancybox='gallery', data-caption)
img.bber-content-image-self(src=item.image)
if item.music
.bber-music
meting-js(server=item.music.server, type='song', id=item.music.id, mutex='true', preload='none', theme='var(--bywind-main)', data-lrctype='0')
hr
.bber-bottom
.bber-info
.bber-info-time
i.fa-solid.fa-calendar-days
- var datedata = new Date(item.date).toISOString()

time.datatime(datetime= item.date)= datedata
if item.link
a.bber-content-link(href=item.link, target="_blank", rel="external nofollow", title="跳转到短文指引的链接")
i.fas.fa-link
| 链接
- let location = item.location ? item.location : 山西
.bber-info-address
i.hnfont.icon-location-fill
span=location
a.bber-reply(onclick=`rm.rightMenuCommentText('${item.content}')`)
i.fa-solid.fa-message

#bber-tips(style='color: var(--bywind-secondtext);')
| - 只展示最近30条短文 -

修改Page文件

修改themes/butterfly/layout/page.pug

1
2
3
4
5
6
7
    case page.type
when 'tags'
include includes/page/tags.pug
when 'link'
include includes/page/flink.pug
+ when 'essay'
+ include includes/page/essay.pug

首页即刻(可选)

  1. 新建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='')

  2. 引入到主页

    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
  3. 引入样式文件

    1
    2
    3
    4
    5
    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">
    - <script src="https://cdn.staticaly.com/gh/haonan15/CDN@main/source/waterfall.min.js"></script> # 瀑布流
  4. 添加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
    },
    });
    }

css补充

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#bber>section>ul>li>div .bber-info-time ,
#bber > section > ul > li > div .bber-info-address{
color: var(--bywind-fontcolor);
font-size: 0.7rem;
background-color: var(--bywind-gray-op);
padding: 0 8px;
border-radius: 20px;
cursor: default;
display: flex;
align-items: center;
}

#bber>section>ul>li>div .bber-info-time i ,
#bber > section > ul > li > div .bber-info-address i{
margin-right: 8px;
font-size: 16px;
}
#bber > section > ul > li > div .bber-info-address {
margin-left: 0.5rem;
}