📢 新文章推送 · 每周更新优质内容 · 订阅更新 →
向下滚动

Lumin Blog 优化

博客细节优化

22 篇文章
博客新文章订阅通知功能上线(纯前端实现)

博客新文章订阅通知功能上线(纯前端实现)

Lumin 主题新增站内新文章订阅通知功能,纯前端实现,零后端、零数据库、零邮件配置,通过 RSS 与 localStorage 实现文章更新感知

404页面增加搜索框降低跳出率

404页面增加搜索框降低跳出率

介绍在 404 页面添加搜索表单的设计方案,让访客在 404 页面可以直接输入关键词触发全站搜索,减少页面跳出并改善用户体验

CSS性能优化:transition:all 替换为精确属性

CSS性能优化:transition:all 替换为精确属性

介绍将 CSS 文件中所有 transition:all 替换为精确过渡属性的优化方案,按选择器类型分类替换,解释 transition:all 的性能缺陷,并展示替换数据统计

键盘焦点轮廓恢复与无障碍优化

键盘焦点轮廓恢复与无障碍优化

介绍如何恢复并自定义全局键盘焦点轮廓样式,使用 :focus-visible 伪类为键盘用户提供清晰的焦点指示器,同时适配暗色模式,替换浏览器默认 outline 为自定义虚线边框加柔和光晕效果

文章标题锚点链接功能实现

文章标题锚点链接功能实现

介绍为文章 H2/H3/H4 标题自动添加锚点链接按钮的功能实现,hover 标题时显示 # 链接按钮,点击复制完整 URL 到剪贴板并显示确认图标

文章图片悬停放大蒙层效果

文章图片悬停放大蒙层效果

在已有 Fancybox 灯箱功能基础上,为文章正文图片增加悬停蒙层和放大镜图标交互效果,使用 CSS 伪元素和过渡动画提升用户操作感知

文章页随机推荐功能实现

文章页随机推荐功能实现

将文章底部的相关文章改为跨分类随机推荐,使用 Hugo 内置 shuffle 函数实现全站文章随机展示,提升内容发现能力

硬编码颜色迁移为CSS变量

硬编码颜色迁移为CSS变量

介绍将 CSS 中硬编码的颜色值统一替换为 CSS 自定义属性的技术方案,涵盖多个核心选择器的迁移细节,确保暗色模式自动切换且主题维护更加便捷

尊重用户偏好:prefers-reduced-motion 动画减弱支持

尊重用户偏好:prefers-reduced-motion 动画减弱支持

介绍如何使用 prefers-reduced-motion 媒体查询响应用户系统的动画减弱偏好,在用户开启减少动态效果后全局禁用动画、关闭闪烁效果并隐藏粒子特效

博客侧边栏模块化设计与配置

博客侧边栏模块化设计与配置

介绍 Hugo 博客侧边栏的模块化设计架构,支持 12 种可配置小部件的显示顺序、参数定制和独立样式

沉浸阅读模式的前端实现

沉浸阅读模式的前端实现

为博客文章页实现一键无干扰沉浸阅读模式,隐藏导航和侧边栏,优化排版和间距,支持快捷键退出

全局音乐播放器开发实践

全局音乐播放器开发实践

在 Hugo 博客中集成 APlayer 实现全局音乐播放器,支持跨页面播放状态同步、黑胶唱片动画、歌词同步和迷你挂件

Hugo 静态站点 SEO 全方位优化指南

Hugo 静态站点 SEO 全方位优化指南

从 robots.txt、sitemap、OG 标签、结构化数据、搜索引擎推送到性能优化,全面覆盖 Hugo 博客的 SEO 最佳实践

免费开源评论系统推荐与部署指北

免费开源评论系统推荐与部署指北

推荐四款免费开源的博客评论系统(Twikoo、Waline、Artalk、Giscus),附带详细的部署步骤和选型建议

博客文章加密与定时发布功能实现

博客文章加密与定时发布功能实现

介绍博客中文章密码保护和定时发布两个功能的实现原理,包括前端加密验证、后端校验、文章调度等核心机制

网站图片懒加载优化实践

网站图片懒加载优化实践

使用 Intersection Observer API 实现图片懒加载,减少首屏请求、提升页面加载速度的完整实践指南

静态博客全站搜索功能实现方案

静态博客全站搜索功能实现方案

详解如何为 Hugo 静态博客实现基于 JSON 索引的即时全站搜索功能,无需任何后端服务

Hugo 博客开发工具链推荐

Hugo 博客开发工具链推荐

分享 Hugo 博客开发过程中用到的效率工具,涵盖代码编辑器、图片处理、版本管理、部署平台和自动化工具

明暗主题切换动画开发记录

明暗主题切换动画开发记录

记录博客明暗主题切换功能的开发过程,从基础的 class 切换升级到圆形扩散动画,实现流畅的视觉过渡

鼠标点击特效的前端实现方案

鼠标点击特效的前端实现方案

用 Canvas 和 DOM 动画实现鼠标点击特效(烟花、爱心、文字、气泡、星星、雪花),详解每种特效的实现原理与核心代码

静态博客评论系统方案对比与选择

静态博客评论系统方案对比与选择

对比 Twikoo、Waline、Artalk、Disqus、Gitalk、Giscus 六种主流评论系统,分析各自的优缺点和适用场景

Hugo Chroma 代码语法高亮配置详解

Hugo Chroma 代码语法高亮配置详解

详解 Hugo 内置 Chroma 引擎的代码语法高亮配置,涵盖主题选择、行号样式、语言检测以及自定义 CSS 方案