.png?imageMogr2/format/webp)
建站记录 | 重构partⅠ：逃离jQuery、功能重构和新增
背景
众所周知博客的本质就是自我折腾，虽然早就想开始处理这个已经被我改的非常屎山的主题，苦于一直没有找到合适的契机。
于是，我不动手，自然有人帮我动手，帮我动手的就是该主题大量引用的一个国内cdn源——失效了。这直接导致了这个博客大量的JS功能失效，尤为致命的是懒加载、图片灯箱、首页滚动……哦原来是几乎所有功能都失效了呀！
但是发现问题的时候已经是半夜了，于是只能简单的重新链接到新的cdn源来假装忽视了这个问题。结合我在文章
第一步：逃离jQuery
计划的第一步是彻底排除主题中的jQuey实现、依赖和功能。这一步操作起来很繁琐，因为主题在很多有用和没用的段落中都使用了大量的jQuery选择器语法，这导致手工去改还不如重新实现一个主题。于是尝试了使用号称代码能力媲美Claude的Qwen3-coder进行辅助。我要求其列举出所有的jQuery语法代码所在区域，并逐个替换为原生JS实现。在这一步里，我先不考虑依赖jQuery的其他库，只重写依赖jQuery语法和表达的部分。
这一步完成之后，我尝试直接移除所有的jQuery引入，并不出所料的发现了一些“罢工”的三方库。在这些三方库里，最令我匪夷所思的是主题引入了FancyBox库，又通过Halo的插件进入了lightgallery.js库：嗯？于是直接大刀阔斧的对fancybox进行了功能性移除，并转而直接调用原生的lightgallery.js。在这里还发现一个小问题，不知为何通过插件引入的lightgallery.js似乎对pjax动态加载响应没做适配，最后选择在主题中重新引入该库作为一个替代性的解决方案。
第二步：动态封面
既然已经进行了大刀阔斧的改变，不如趁机实现一下想象了好久的动态封面功能！我原先的封面结构是毛玻璃区域+标题+覆盖封面图，虽然最终效果还不错，但是总感觉挡住了精心挑选的封面一大块区域非常遗憾。在某次友链闲逛时，发现一个大佬的博客使用了动态封面，通过将简化标题直接渲染在封面上层，配上鼠标移入的动效，实现了非常夺目的效果。虽然我的博客整体风格并非他那样的扁平化色块，但在封面上层渲染额外内容的方案启发了我。
于是出现了如今这个文章列表里的动态封面，在保留了原有的毛玻璃+简要标题的基础上，增加了鼠标移入后隐藏，展示完整封面图的效果。这个封面对主题支持的上方、左右侧封面位置都做了良好的适配，并且一定程度上实现了响应式设计，在移动设备上也有不错的效果。美中不足的是还想实现一个字体无极变化适配的功能，但是又担心引入额外JS来实现过于冗余，暂时搁置了。
第三步：纪念日功能重构
原有的纪念日使用了简陋的api、csv加载数据以及页内HTML块实现，既不优雅也不安全可维护性也差。这次干脆彻底大刀阔斧的扩展了整个api功能，改为更可靠的数据库存储以及模板化实现。同时，给自己和同样参与博客编写的小伙伴设计了一个管理后台，更方便的操作和编辑节日以及生日。
重写了非常简陋的前端页面，改用模板化方案配置节日渲染。其实这部分还有更进一步的野心，用动态url加载不同日的节日/生日内容，但是探索了半天发现主题实现的可能性很低，而编写halo插件需要使用的java——一门对我而言永远的停留在大学课堂里的语言。同时对纪念日的存储方式做了重构，现在支持以公历日期、农历日期和第几月的第几周来动态的调用节日/生日，降低了我的维护成本。
不成一章：整理样式表和JS
我其实很好奇为什么一个主题里有这么多的内部样式表和内部JS——甚至有很大一部是在不同模板里独立实现。很难具体的概括这部分的工作内容，非要说的话就是把一堆反复实现的功能做了归一化——你敢想象调用评论列表并替换里面的HTML标签的功能在不同的页面里足足实现了三遍之多——甚至每一遍还都不一样！
下一步是……
下一步的计划不太明确，可能会往精简JS、简化功能等方面去做。考虑来考虑去，如果最后要把该主题向着自用的方向修改，许多配置性的功能都可以简化或是去除；同时，要对一些样式的不统一进行修改，譬如每次访问都在折磨我的圆角不统一的问题。博客开屏也有修改的计划，但是暂时也没有想出太好的可以和当前文章列表风格适配的开屏画面，等我再多去逛一些博客借鉴一下！
下一步的两大重点分别是：
1.开屏画面
造成我lighthouse的First Contentful Paint告警的罪魁祸首。
2.关于页面
计划用halo新提供的author路由代替并重写模板。
碎碎念：其实为接入EdgeOne也付出了一些努力踩了一些坑，但是这部分我觉得可以
另水一篇博客没有必要展开细讲，暂时就跳过吧~
