当前位置: 首页 > news >正文

关于fluid打字机问题的解决记录

解决了一个在配置博客时遇到的关于fluid中首页标题使用打字机随机选择的问题,过程记录于此~

问题起因:

配置博客时需要给博客整个标题,看到标题可以做成打字机(slogan)形式,也就是会缓缓把内容一个字一个字显示出来的形式,于是就启用了这个功能,随即看到如下所示的设置,于是我满怀欣喜的加入了随机选择功能,下文中的text就是我首页目前随机显示的内容。

  # 首页副标题的独立设置# Independent config of home page subtitleslogan:enable: true# 为空则按 hexo config.subtitle 显示,支持列表格式来实现随机选择一行文字显示# If empty, text based on `subtitle` in hexo config, support list format to random selection of a row for display# 替换了原来的多行格式text: - "为什么每一次点开都要被这玩意硬控一次"- "记录存在,记录这美好又不美好的每一天"- "泥泞的下水道倒映着漫天星光"

哎,您猜怎么着,居然首页把上面text中的所有内容全部显示出来啦(现在复现问题需要我回溯文件,但是我是懒鬼😭),也就是说直接在博客首页显示了:

“为什么每一次点开都要被这玩意硬控一次记录存在,记录这美好又不美好的每一天泥泞的下水道倒映着漫天星光”

这么长的一段话,真的很抽象。

问题一阶段

于是寻找原因和解决方法。我首先拿着单页配置文件问了AI,AI表示:这是因为我输入的时候用了tab键,要换成空格,实在不行就不用空格直接用[....]的格式。

试了很多次,没用。

config-not-the-cause

随查看项目的issue,看看有没有和我一样碰到问题的人,一看还真有:slogan随机选择写法,但是没人回答,遂继续研究。

在查看项目文件的时候,突然发现最新的release是1.9.8,日期是2024年的,而最新的,刚刚更新支持slogan随机选择的_config.yml文件,是6个月前,也就是25年5月份的。这让我有了个想法,是不是发行版还不支持这个功能?

于是顺藤摸瓜,找到了fluid库中新支持slogan随机选择的文件typed.ejs,和本地的typed.ejs一比对,果然不一样。

(本地的位于:根目录\node_modules\hexo-theme-fluid\layout_partials\plugins\typed.ejs

于是将本地文件更新为这个还未发布的最新文件,效果就像你们现在所看到的我的博客的目录一样啦,可以随机显示一段文字~

问题二阶段

上文都写着问题一阶段了,那当然有问题二阶段😭,我将一阶段的问题整理后回复给了提出那个issue的朋友,没想到没过几天那位朋友就发现了新的问题:换成最新的文件之后所有的页面标题都变成了随机显示的文字了😭。效果如下,这篇博客是我用来测试博客功能的那篇博客,可以看到中间应该显示标题的地方显示的是“为什么每一次点开都要被这玩意硬控一次”。

image-20251124151740464

天塌了,那怎么行,遂重新开始研究问题所在。首先从配置文件下手,观察配置文件,如下所示:

  # 一些好玩的功能# Some fun featuresfun_features:# 为 subtitle 添加打字机效果# Typing animation for subtitletyping:enable: true# 打印速度,数字越大越慢# Typing speed, the larger the number, the slowertypeSpeed: 70# 游标字符# Cursor charactercursorChar: "~"# 是否循环播放效果# If true, loop animationloop: false# 在指定页面开启,不填则在所有页面开启# Enable in specified page, all pages by default# Options: home | post | tag | category | about | links | page | 404scope: []

看到底下有在指定页面开启的功能,大喜过望,遂立即填入home,想只在主页开启随机功能😋。修改后果然有效,但是其他所有页面的打字机效果不见了😡,全部变成了静态显示,没有一个字一个字显示的效果了。

正好能够分析整个项目的ai配置好了,把整个项目丢给它让它分析,结果没想到还真有效果:

Github copliot: 根据你的问题描述和当前工作区的内容,问题的根源在于 typed.ejs 文件的逻辑未正确区分首页和文章页,导致随机 Slogan 的打字效果在文章页也被应用。

遂分析typed.ejs文件,简单来说它的逻辑如下:

<% if (is_home() && theme.index.slogan.api && theme.index.slogan.api.enable) { %>// 逻辑 A: 调用了API的逻辑~...
<% } else if (Array.isArray(theme.index.slogan.text) && theme.index.slogan.text.length > 0) { %>// 逻辑 B: 配置了数组时,无论是哪个页面,都是随机显示...
<% } else { %>// 逻辑 C: 其他情况(包括文章页),显示传入的 text (即标题)typing(text);
<% } %>

原来是逻辑B出现了问题,那就好说了,对逻辑B加上对是否是主页的判断就可以了,最后解决方法就是在逻辑B中加入了个is_home判断。

/* ↓↓↓ 注意这里加上了 is_home() && ↓↓↓ */
<% } else if (is_home() && Array.isArray(theme.index.slogan.text) && theme.index.slogan.text.length > 0) { %>

最后完美解决,当然,也不能说完美,如果有人想在其他页也实现随机显示的话,就需要继续修改代码逻辑,但是考虑到在配置文件中,随机显示的功能是放在首页下的,所以我也没有再多修改功能和逻辑,毕竟对我来说这么大的项目改得越多越可能出错,更何况是这么小的功能。

后记

已经提交了pr,这件事之前没怎么用过github的代码仓库维护功能的我还算是一次不错的历练,也希望自己在技术上能够更快更多的成长,毕竟前面的日子我欠下了太多~

最后祝读到这篇文章的你天天开心~

后续

提的pr被合并到主分支了,虽然也就改了一行代码,但也算做出了自己的贡献吧,还是很开心的。

one-line-pr-merged

本文配图使用 Avilia Blog Illustrations 流程生成。

http://www.gsyq.cn/news/1436420.html

相关文章:

  • 告别混乱日程:在统信UOS中用WeekToDo打造你的专属GTD工作流
  • UVa 346 Getting Chorded
  • 咸阳奥克斯空调维修加冷媒|人民中路老店 30 分钟上门 - GrowthUME
  • langchain如何调用模型?一文详解
  • 量化系统难题1_复权后的日k数据_已解决
  • 2026年4月PE钢带波纹管实力厂家推荐,PE穿线管/MPP电力管/PVC排水管,PE钢带波纹管源头厂家口碑推荐 - 品牌推荐师
  • Xenia Canary高级配置指南:5个核心技巧深度优化Xbox 360游戏模拟体验
  • 论文通关利器!常用的AI写作辅助网站,成稿速度破纪录
  • 人民中路万家乐维修老店 咸阳专业热水器售后服务中心 - GrowthUME
  • 基于PIR与ISD1820的120dB可定制语音报警系统设计与实现
  • Windows Cleaner:一款智能实用的Windows系统优化工具
  • 免费解锁Wand专业版:3分钟快速指南与手机远程控制教程
  • 量化系统难题2_结构
  • 基于Arduino的多传感器空气质量监测站DIY全攻略
  • 2026西安大克重金条回收哪家最安全?本地7家门店实测,唐王珠宝大盘直收当面秒结 - 西安闲转记
  • 【紧急预警】Gemini 2.5.2补丁已悄然上线!3个高危breaking change正在影响金融/医疗类LLM流水线
  • Windows 10 彻底卸载 OneDrive 的终极指南:释放系统资源与隐私保护
  • 深度解析开源自动化工具:BetterNCM安装器实战指南
  • FinalBurn Neo终极教程:如何在5分钟内搭建完美的街机模拟环境
  • 2026 北京漏水检测 2大靠谱商家优选-精准定位测漏-全城上门检测服务-口碑公司推荐 - GrowthUME
  • 别再只问哪个AI模型更强了,2026年真正拉开差距的是向量引擎
  • 创业团队如何建立客户成功体系
  • IDEA帮我写代码,我只需要按Tab
  • Skills 最大的价值,不是你想的那个
  • 如何从零构建高仿12306系统:SpringBoot3+Java17分布式架构实战指南
  • 20252806 2025-2026-2 《网络攻防实践》第十周作业
  • Keyviz:5分钟学会实时键鼠可视化,让你的操作透明化
  • DIY电动背部按摩器:用直流减速电机与偏心轮原理自制放松神器
  • P13981 数列分块入门 6
  • AI Agent Harness Engineering 任务优先级排序算法:让智能体学会高效时间管理