在butterfly主题添加一个副标题，并能够输出自定义的随机语录

目前已经有许多在主题中接入一言来实现输出随机语录，但是对于自定义语录库的教程，暂未看到能够明了的讲清楚如何实现这一功能的

通过参考Butterfly主题首页副标题自定义随机句子 – Eamon’s Blog和deepseek完成了此功能

# 注意在所有操作前都要确保备份

1.创建语录库

在博客的根目录下的source下(注意不是主题下的source)创建subtitle.json，在里面放句子

格式如下：

[“争知我，倚阑杆处，正恁凝愁！”,

“衣懒换，酒难赊。可怜此夕看梅花。”,

“为伊判作梦中人，索向画图清夜唤真真。”

]

2.修改pug文件

在主题的文件夹下找到layout\includes\thrid-party\subtitle.pug

划到最下面会有一个case source开头的代码下面有多个when开头的分支和default开头的分支

将default及以下的代码替换为如下的代码

default
  script.
    // 获取默认内容作为后备
    var defaultQuote = !{JSON.stringify(subContent[0] || '')};
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 尝试从 subtitle.json 获取内容
      fetch('/subtitle.json')
        .then(response => {
          if (!response.ok) {
            throw new Error('网络响应不正常');
          }
          return response.json();
        })
        .then(quotes => {
          // 确保 quotes 是数组且有内容
          if (Array.isArray(quotes) && quotes.length > 0) {
            // 随机选择一条语录
            var randomIndex = Math.floor(Math.random() * quotes.length);
            displayQuote(quotes[randomIndex]);
          } else {
            // 如果 quotes 无效，使用默认内容
            displayQuote(defaultQuote);
          }
        })
        .catch(error => {
          console.error('加载自定义语录失败:', error);
          // 出错时使用默认内容
          displayQuote(defaultQuote);
        });
    });

    // 显示语录的函数
    function displayQuote(quote) {
      var subtitleElement = document.getElementById("subtitle");
      if (subtitleElement) {
        subtitleElement.innerHTML = quote;
      }
    }

# 注意，deepseek提示这段代码需要与上面的when语句对齐，至于没有对齐是否能完成此功能，未进行测试

3.配置博客的配置文件

在博客的根目录下打开_config.yml文件，查找

subtitle:
enable: true

确保enable后的是true开启

4.关于打字机效果

在enable下面会有effect，后面也为true则为开启

但是实际实现中共没有能做到这个效果，在浏览器控制台中会有报错