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

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

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

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

预览

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

创建数据

在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
      date: 2022-12-21
    - content: 关于本站
      link: https://blog.bywind.xyz/about/
      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	音乐服务商（`tencent`QQ，`netease`网易云，,`kugou`酷狗, `xiami`虾米）
music.id	音乐id
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
                                            | 链接
                                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

首页即刻（可选）

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

引入到主页

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

引入样式文件

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> # 瀑布流

添加js

在自定义js中添加

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