当前位置: 首页 > 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.jsqmd.com/news/925089/

相关文章:

  • 【Gemini企业部署黄金 checklist】:97%团队忽略的5项合规性配置与安全审计红线
  • 基于Arduino Leonardo的DIY游戏控制器:为残障人士打造低成本辅助设备
  • 告别混乱日程:在统信UOS中用WeekToDo打造你的专属GTD工作流
  • UVa 346 Getting Chorded
  • 电路设计入门:从欧姆定律到PCB实战,点亮你的硬件创造之旅
  • 咸阳奥克斯空调维修加冷媒|人民中路老店 30 分钟上门 - GrowthUME
  • 如何永久保存微信聊天记录:5分钟掌握WeChatMsg完整数据备份方案
  • langchain如何调用模型?一文详解
  • 电路设计入门:从零开始制作光控夜灯与数字逻辑电路
  • 量化系统难题1_复权后的日k数据_已解决
  • Arduino与伺服马达制作简易互动宠物:从原理到实践
  • VMware macOS解锁神器:3步开启苹果系统虚拟化之旅
  • 抖音音乐下载终极指南:免费开源工具实现批量处理与高效管理
  • 告别Windows字体丑!3步获取苹果苹方字体提升文档颜值
  • 2026年4月PE钢带波纹管实力厂家推荐,PE穿线管/MPP电力管/PVC排水管,PE钢带波纹管源头厂家口碑推荐 - 品牌推荐师
  • 多模态基础、图文大模型原理
  • 电路设计入门:从原理图到PCB,手把手教你制作可调光LED灯
  • Xenia Canary高级配置指南:5个核心技巧深度优化Xbox 360游戏模拟体验
  • 人民中路万家乐维修老店 咸阳专业热水器售后服务中心 - GrowthUME
  • 论文通关利器!常用的AI写作辅助网站,成稿速度破纪录
  • 基于PIR与ISD1820的120dB可定制语音报警系统设计与实现
  • AI应用的质量保障:从测试到监控的完整流程
  • 【限时解禁】Gemini韩文多音节动词时态识别盲区(独家逆向Token映射表),首批领取仅剩87份
  • 免费解锁Wand专业版:3分钟快速指南与手机远程控制教程
  • Windows Cleaner:一款智能实用的Windows系统优化工具
  • OCR + 大模型融合方案
  • 量化系统难题2_结构
  • 终极指南:如何高效获取国家中小学智慧教育平台电子课本PDF文件
  • 基于Arduino与L293D的直流电机PWM调速与光控系统设计
  • Gemini内容日历规划实战指南:从零搭建可复用、可度量、可迭代的智能排期系统