Heo即刻短文：分享自我与精彩生活

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

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

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

预览

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

创建数据

在source/_data目录下创建essay.yml

- 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

---
title: 即刻短文
date: 2022-12-20 22:06:17
comments: true
aside: false
top_img: false
type: essay
---

创建页面文件

在themes/butterfly/layout/includes/page目录下创建essay.pug

.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

    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

   #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. 引入到主页

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

   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中添加

   if (document.querySelector('#bber-talk')) {
         var swiper = new Swiper('.swiper-container', {
           direction: 'vertical', 
           loop: true,
           autoplay: {
           delay: 3000,
           pauseOnMouseEnter: true
         },
         });
       }

css补充

#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;
}