博客主题更新：文章与代码块阅读体验优化
内容提要
博主更新了博客主题，优化阅读体验：字体加载不再闪烁，文章页宽限780px并支持目录滚动；移动端新增可折叠目录；代码块带语言标签、复制按钮和折叠功能；首页列表微调，文章底部加前后篇导航，右下角有猫爪返回顶部按钮；颜色统一用CSS变量管理，并清理了旧代码。
延伸解读
字体加载优化
文章提到字体和图标字体之前被重复加载，且页面加载后才切换字体，导致首屏闪烁。现在将字体CSS直接放入页面头部，既消除了闪烁，又减少了请求次数。这提醒我们，网页字体加载策略对用户体验影响显著，合理设置加载顺序和缓存可以提升性能。
阅读宽度与目录设计
文章页宽度限制在780px，避免大屏幕上文字过长影响阅读；侧边目录随滚动而移动，方便长文导航。移动端则新增可折叠目录，解决了小屏无法快速跳转的问题。这种响应式设计思路值得借鉴：根据设备特性调整布局，优先保证核心阅读功能。
代码块交互增强
代码块增加了语言标签、复制按钮和折叠功能，长代码可折叠以减少页面占用。移动端代码块全宽显示，改善横向滚动体验。这些细节对技术博客尤为重要，能显著提升代码阅读和复制的便利性，减少用户操作成本。
维护性改进
颜色和圆角统一用CSS变量管理，便于后续调整主题；同时清理了无用代码和错误引用。这种重构不仅提升代码可维护性，也减少潜在bug。对于长期维护的博客，定期清理和规范化样式是值得推荐的做法。
Q&A
博客主题更新后，字体加载闪烁问题是如何解决的？
之前字体加载两次且页面加载后才切换，导致首屏闪烁。现在将字体CSS直接加载在页面头部，避免了闪烁，并减少了请求次数。
文章页面的内容宽度限制是多少？
文章页面的内容宽度限制为780px，避免在大屏幕上阅读时过于拉伸。
移动端目录是如何实现的？
移动端在标题下方新增了一个可折叠的目录块，点击后才展开，不占空间，方便长文章跳转。
代码块新增了哪些功能？
代码块新增了工具栏，包括左上角显示语言标签，右上角复制按钮（点击后变为“已复制”），以及超过24行可折叠的功能。
首页文章列表做了哪些调整？
首页列表在标题前加了小圆点，行间用淡虚线分隔，悬停时标题变橙色；手机上日期移到标题下方。
文章底部新增了什么导航？
文章底部新增了上一篇/下一篇导航，显示标题，若无对应文章则自动隐藏，方便连续阅读。
返回顶部按钮有什么特点？
返回顶部按钮位于右下角，是一个猫爪图标，滚动一定距离后出现，点击可平滑回到顶部。
颜色管理方面做了哪些优化？
颜色和圆角统一使用CSS变量管理，方便后续调整主题色，无需全局搜索修改。
