关于更新主题之后出现的若干问题的请教

[WuSiren]

原始版本信息：

hexo-cli: 4.3.2
node: 20.18.1
butterfly: 3.7.0

以上版本一直使用良好，因近日发现gallery标签外挂{% gallery %}不能像以前一样正常显示本地图片集合，于是考虑更新主题版本至最新的5.5.4。
参照之前3.7.0版本所使用的_config.butterfly.yml文件对5.5.4版本的_config.butterfly.yml文件进行了基本配置之后，发现新版本主题运行良好，但相比以前，存在如下问题：

1. 标签外挂{% gallery %}仍然不能正常显示图片集合，而如果使用{% gallery true %}的语法，则可以正常显示。
2. 主页次标题的每日一言不再显示，_config.butterfly.yml中的相关代码如下，供参考：

# The subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Customize typed.js
  # https://github.com/mattboldt/typed.js/#customization
  typed_option: # 这个地方不知道该怎么填，还望指教🤔
  # Source - Call the third-party service API (Chinese only)
  # It will show the source first, then show the content of sub （subtitle 會先顯示 source , 再顯示 sub 的內容）
  # Choose: false/1/2/3
  # false - disable the function
  # 1 - hitokoto.cn 
  # 2 - https://api.aa1.cn/doc/yiyan.html 調用一言網的一句話（簡體）
  # 3 - jinrishici.com 調用今日詩詞（簡體）
  source: 3
  # If you close the typewriter effect, the subtitle will only show the first line of sub
  sub: 一二三四五，六七八九十。

3. 主页背景图相比以前的明亮色彩，新版本的变暗了（像蒙了一层黑纱），能否自行调亮？
4. 页面右下角按钮没有调整字体大小的“+”"-"符号了，不能调字体大小了吗？
5. 之前分割线是一个动态剪刀效果，现在分割线变成了一条普通的灰色线，如何调整？

首先感谢butterfly主题的各位辛苦的开发和维护人员！
鄙人暂时发现以上几点问题，鄙人深知这些问题有的可能是bug，但更多的可能是因为本人失忆了忘记当初是怎么配置的了，还望各位前辈能给予解答，另外从3.7.0->5.5.4有哪些重要功能更新，还望熟悉主题代码的前辈能大致指点一二，在此一并谢过！🤝🤝

[dosubot[bot]]

Hi @WuSiren! I'm Dosu and I’m helping the hexo-theme-butterfly team.

关于你升级 Butterfly 主题到 5.5.4 后遇到的几个问题，下面是详细解答和配置建议：

1. gallery 标签问题
   新版本 gallery 标签已重构，默认 {% gallery %} 不再显示本地图片集合，需使用 {% gallery true %} 才能正常显示本地图片。此为主题设计变更，属于正常现象。参考

2. 主页次标题每日一言不显示 & typed_option 配置

• 主题 5.5.4 的 subtitle 配置有变化，effect: true 实际是关闭打字动画，只显示静态文字；要启用打字动画，需设置 effect: false。参考

• typed_option 用于自定义 Typed.js 动画参数，推荐如下写法（可根据需要调整）：

  subtitle:
    enable: true
    effect: false  # 启用打字动画
    typed_option:
      loop: true
      typeSpeed: 100
      backSpeed: 50
    source: 3      # 3 为今日诗词 API
    sub:
      - 一二三四五，六七八九十。
      - Never put off till tomorrow what you can do today

• 所有主题相关配置（包括 subtitle 和 CDN）必须写在 Hexo 根目录下的 _config.butterfly.yml，而不是 themes/butterfly/_config.yml。参考

3. 主页背景图变暗
   新版本默认会加一层黑色遮罩（mask），可通过如下配置关闭遮罩，恢复明亮效果：

mask:
  header: false
  footer: true

4. 右下角字体大小按钮消失
   字体大小调整按钮（“+”“-”）已在 3.4.0 版本被移除，5.5.4 不再支持此功能。参考

5. 分割线剪刀效果变成灰线
   分割线已改为普通灰线，想自定义可用 hr_icon 配置指定 FontAwesome 图标，或通过自定义 CSS 恢复剪刀动画。例如：

hr_icon:
  enable: true
  icon: "\uf0c4"  # 例如剪刀图标的 unicode

若需动画效果，需自行添加 CSS。

6. 3.7.0 → 5.5.4 重要功能更新

• gallery 标签重构，支持懒加载和新布局
• 新增 chart.js 图表标签
• 搜索、评论系统、UI 组件全面升级
• 支持 mermaid 流程图
• 主页布局和 cover 配置更灵活
• 移除部分旧功能（如字体大小按钮）
• 性能和移动端适配优化
  详细变更可查阅官方 changelog

如需进一步定制效果，可继续补充具体需求。

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[WuSiren]

（你是认真的吗？）

1. • 好吧。谢谢。
2. • 并没有解决问题。
3. • 可行。但是如何让博客主页的header不带遮罩，而博客文章页面的header带有灰色遮罩？
4. • 好吧。谢谢。
5. • 并没有解决问题，能否给出详细教程？谢谢。
6. • 好吧。谢谢。
7. • 之前版本博客文章页面的题目在header的正中间，现在跑到了header的左下角，请问如何还放在中间？

[dosubot[bot]]

针对你的第2点和第5点，详细解答如下：

---

2. 主页次标题每日一言/打字效果不显示

这个问题在 Butterfly 5.5.4 主要有以下几个常见坑：

1. effect 必须为 false 才能启用打字动画
   effect: true 只显示静态文字，effect: false 才会加载 Typed.js 动画和每日一言接口。参考

2. 所有主题相关配置必须写在 Hexo 根目录的 _config.butterfly.yml
   写在 themes/butterfly/_config.yml 是无效的，且不能有重复的 subtitle 字段。参考

3. typed_option 必须是 YAML 格式的对象
   例如：

   typed_option:
     loop: true
     typeSpeed: 100
     backSpeed: 50

   loop 只能写在 typed_option 里，不能直接写在 subtitle 下。参考

4. source: 3 表示调用今日诗词 API
   你可以用 1（hitokoto.cn）、2（yiyan）、3（jinrishici.com），也可以 false 只显示 sub 内容。

5. Typed.js CDN 问题
   如果 subtitle 依然不显示，可能是 Typed.js 没有加载成功。推荐在 _config.butterfly.yml 里加上：

   CDN:
     third_party_provider: custom
     option:
       typed: https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js

   然后 hexo clean && hexo g，并检查 public/index.html 里有无 Typed.js 的 <script> 标签。参考

6. YAML 缩进和格式
   YAML 格式错误会导致配置失效，务必检查缩进和冒号后有空格。

7. 不要有重复 subtitle 字段
   有些编辑器或 AI 会自动插入 subtitle 字段，导致冲突，务必只保留一个。

推荐配置示例：

subtitle:
  enable: true
  effect: false
  typed_option:
    loop: true
    typeSpeed: 100
    backSpeed: 50
  source: 3
  sub:
    - 一二三四五，六七八九十。
    - Never put off till tomorrow what you can do today

CDN:
  third_party_provider: custom
  option:
    typed: https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js

配置后执行 hexo clean && hexo g，如仍无效，检查浏览器控制台有无 Typed.js 加载报错。

---

5. 分割线剪刀动画效果详细教程

Butterfly 5.5.4 默认只支持静态 FontAwesome 图标（如剪刀），没有内置动画。你可以通过如下方式自定义：

1. 配置剪刀图标

在 _config.butterfly.yml 添加/确认：

hr_icon:
  enable: true
  icon: "\uf0c4"   # 剪刀 unicode，FontAwesome 6/7
  icon_top: -10px  # 图标垂直偏移

2. 自定义剪刀动画 CSS

在 source/css/_custom/custom.styl（没有就新建）添加如下代码，实现剪刀左右移动的动画：

hr.custom-hr::before {
  animation: scissor-move 1.2s infinite alternate;
}

@keyframes scissor-move {
  0%   { left: 5%;  transform: rotate(-10deg);}
  100% { left: 95%; transform: rotate(10deg);}
}

如果你想让剪刀只在 hover 时动，把 animation 那行改成：

hr.custom-hr:hover::before {
  animation: scissor-move 1.2s infinite alternate;
}

3. 调整分割线样式（可选）

如果想让分割线更细或更像旧版，可以加：

hr.custom-hr {
  border-width: 1px;
  border-style: dashed;
}

4. 重新生成

保存后执行 hexo clean && hexo g，刷新页面即可看到动画效果。

---

如还有细节问题，欢迎贴出你的实际配置片段。

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[jerryc127]

问问题前请先查看文档

2. sub 的写法改成这样

sub:
    - 'ddddd'

5. hr_icon 和 beautify 的设置要打开

post_meta:
  # Home Page
  page:
    # Choose: created / updated / both
    date_type: created
    # Choose: date / relative
    date_format: relative
    categories: true
    tags: true
    label: true
  post:
    # Choose: left / center
    position: left
    # Choose: created / updated / both
    date_type: both
    # Choose: date / relative
    date_format: relative
    categories: true
    tags: true
    label: true

post 的 position 改成 center

[WuSiren]

感谢 @jerryc127 的回复！

1. • 好吧。谢谢。
2. • 改了sub的写法之后，依然不起作用呢？
3. • 就这样吧。
4. • 好吧。谢谢。
5. • 这个还是没有解决，能详细一些吗？bot说的靠谱吗？
6. • 好吧。谢谢。
7. • 之前版本博客文章页面的题目在header的正中间，现在跑到了header的左下角，请问如何还放在中间？

[jerryc127]

自己f12看报错

[WuSiren]

Ah! I'm sosososo sorry! 谢谢！

[WuSiren]

Ah! I'm sosososo sorry! 谢谢！

[WuSiren]

Ah! I'm sosososo sorry! 谢谢！

[WuSiren]

现在只差剪刀分割线问题了🤔能否提示一下大制做法？

[WuSiren]

解决了，谢谢