Heo版即刻短文

前一段时间就看到了即刻短文 | 张洪Heo，一直以来想要有这种可以发一句话的地方，配置过小康的，但是奈何总是卡在分支那一步，总是报错，问过其他人发现都是按照教程就可以配置好，由于这是静态，可能每次发一两句话就要重新部署，对于某些人来说可能不太方便，如果需要可以参照KK Api进行部署，按照文档走基本不会有任何问题。

当然这是一篇关于即刻短文的教程，不会就这么结束了，如果你也想拥有Heo版的即刻短文，可以参考如下教程，原教程来自Hexo的Butterfly魔改：即刻短文静态部署版 | 张洪Heo (zhheo.com)，本教程基于原教程进行补充。

效果

具体效果可以查看即刻短文 |Jayhrn - 分享科技与热爱生活

魔改步骤

创建基本示例数据

创建source/_data/essay.yml，内容可以参考如下写法

- class_name: 即刻短文
  essay_list:
    - content: 用了Heo的即刻短文，很舒服
      date: 2022-08-13
    - content: Markdown教程推出
      date: 2022-08-12
      image: https://pic.rmb.bdstatic.com/bjh/965866510655a628f2c37b93846520a93213.png
    - content: 现在即刻短文已经纯本地化部署完成，不再依赖任何第三方服务了
      date: 2022-08-12
      link: https://blog.jayhrn.com/
    - content: 好开心
      date: 2022-08-05 06:08:54

内容	含义
content	短文内容
date	发表日期
image	图片
link	链接

新建页面

新建themes/butterfly/layout/includes/page/essay.pug

.title-and-tips
    h1.page-title(style='display: inline;')= page.title
    .page-tips 静态部署版
#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
                                        a.bber-content-img(href=item.image, target="_blank")
                                            img(src=item.image)
                            .bber-bottom
                                .bber-info
                                    - 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=`rightMenuCommentText('${item.content}')`)
                                  i.fa-solid.fa-message

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

新建md页面，使用指令hexo new page essay

---
title: 即刻短文
date: 2022-09-15 14:21:00
comments: true
aside: false
type: essay
---

修改Page页面

修改themes/butterfly/layout/page.pug，注意对齐

case page.type
  when 'tags'
    include includes/page/tags.pug
  when 'link'
    include includes/page/flink.pug
  when 'categories'
    include includes/page/categories.pug
+  when 'essay'
+    include includes/page/essay.pug

创建首页轮播

新建themes/butterfly/layout/includes/bbTimeList.pug

#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可以自己选择是否开启

引入到主页

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.jsdelivr.net/gh/Jayhrn/CDN/waterfall.min.js"></script> # 实现短文瀑布流需要使用