想要添加一个自定义侧边栏卡片，显示书摘目录的随机一条。

1. 书摘数据源

放在目录：source/_data/excerpt.yml
内容格式大致为：

1
2
3
- content: "第一条记录"
- content: "第二条记录"
- ……

2. 主题配置

找到_config.butterfly.yml文件内的aside栏目，添加自定义的卡片项：

1
2
3
4
5
6
7
8
9
10
aside:
  enable: true
  ...
  card_announcement:
    enable: false
    content: "你好"
  # 新增：
  card_excerpt:
    enable: true
    content: "默认文本"

3. pug文件配置

3.1 找到目录themes/butterfly/layout/widget，这里存放着每种卡片的独立代码，新增card_excerpt.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
if theme.aside.card_excerpt.enable
  .card-widget.card-excerpt
    .item-headline
      i.fas.fa-book
      span= _p('aside.card_excerpt')
    - const excerpts = site.data.excerpt || []
    script.
      // 客户端随机选择
      const excerpts = !{JSON.stringify(excerpts)};
      const defaultContent = !{JSON.stringify(theme.aside.card_excerpt.content || '')};
      
      function getRandomExcerpt() {
        if (excerpts.length > 0) {
          const randomIndex = Math.floor(Math.random() * excerpts.length);
          return excerpts[randomIndex].content;
        }
        return defaultContent;
      }
      
      // 页面加载后显示随机摘录
      document.addEventListener('DOMContentLoaded', function() {
        const excerptElement = document.getElementById('random-excerpt');
        if (excerptElement) {
          excerptElement.innerHTML = getRandomExcerpt();
        }
      });
    
    // 在需要显示的位置
    #random-excerpt
      | #{theme.aside.card_excerpt.content} // 默认内容，会被JS替换

3.2 找到文件themes/butterfly/languages/widget/index.pug，根据其它卡片的位置放置自定义卡片：

1
2
3
4
5
……
!=partial('includes/widget/card_author', {}, {cache: true})
!=partial('includes/widget/card_excerpt', {}, {cache: true}) // 我添加的行
!=partial('includes/widget/card_announcement', {}, {cache: true})
……

Pug原名Jade，是一种为了更高效、更优雅地生成 HTML 而设计的模板引擎/语法，通常运行在 Node.js 环境中。

4. 配置卡片标题

找到文件themes/butterfly/layout/zh-CN.yml，找到aside目录，添加自定义卡片的标题：

1
2
3
4
5
6
aside:
  ...
  card_xx: ...
  ...
  # 新增：
  card_excerpt: 我的卡片

其它语言文件按需添加卡片标题。

End.🐧