🌟 功能简介

本文记录了如何在 Butterfly 主题中实现仿“安和鱼”风格的即刻短文滚动条。该功能包括：

  1. 首页动态滚动条：展示最新短文，支持自动向上滚动。
  2. 独立详情页：点击滚动条跳转至完整的短文瀑布流页面。
  3. 统一数据源：只需维护一个 shuoshuo.yml 文件即可全站同步。

🛠️ 配置步骤

1. 准备数据文件

在 source/_data/ 目录下创建 shuoshuo.yml，用于存放你的短文内容：

1
2
3
4
- content: "这是我的第一条即刻短文！"
  date: "2026-02-12"
- content: "仿安和鱼风格的滚动条真不错。"
  date: "2026-02-12"

2. 创建布局文件

在 themes/butterfly/layout/includes/custom/ 目录下创建 essay_bar.pug：

1
2
3
4
5
6
7
8
9
10
11
12
if site.data.shuoshuo && is_home()
  #essay-bar.essay-bar
    .essay-bar-content
      .essay-bar-label
        i.fas.fa-paper-plane
        span 即刻
      .essay-bar-list
        each item in site.data.shuoshuo
          .essay-bar-item
            span.essay-bar-text= item.content
      a.essay-bar-more(href=url_for('/essay/'))
        i.fas.fa-angle-right

3. 注入布局

修改 themes/butterfly/layout/includes/layout.pug，在 header 之后引入：

1
2
3
4
#body-wrap(class=pageType)
  include ./header/index.pug
  if is_home()
    include ./custom/essay_bar.pug

4. 添加 CSS 样式

在 source/css/custom.css 中添加以下代码实现毛玻璃和动画：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.essay-bar {
    max-width: 1200px;
    margin: 20px auto 0;
    padding: 0 15px;
}
.essay-bar-content {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    height: 45px;
    overflow: hidden;
}
/* ... 更多样式见 custom.css ... */

5. 添加 JS 逻辑

在 source/js/custom.js 中添加自动滚动逻辑，并支持 PJAX：

1
2
3
4
5
6
7
8
function initEssayBar() {
    const essayBar = document.querySelector('.essay-bar-list');
    if (!essayBar) return;
    const items = essayBar.querySelectorAll('.essay-bar-item');
    // ... 滚动逻辑 ...
}
document.addEventListener('pjax:complete', initEssayBar);
document.addEventListener('DOMContentLoaded', initEssayBar);

6. 创建详情页

执行命令或手动创建 source/essay/index.md：

1
2
3
4
5
---
title: 即刻短文
type: "shuoshuo"
aside: false
---

📝 维护说明

今后发布新短文，只需修改 source/_data/shuoshuo.yml 即可，首页和详情页会自动同步更新。