跳到主内容

LYRA

Lyra 正在加载

Lucent Plus:明光初启 Plus 的诞生

站点运维鬼鬼

由于各种原因,之前的域名出现了无法使用的问题(就是忘记续费被占了)。当时用的 Hexo 构建已经是三四年前的事情了,当时自己的前端功力也可以说是非常有限,上限就摆在那里。那套 Phantom 主题修改版留下了很多问题,各种神奇 bug 层出不穷,也有很多想实现的功能一直没能落地。时过境迁,可能是觉得自己又行了,所以趁着更换域名这件事,对网站做了一次彻底重构,或者说,重建。

在查阅资料和朋友推荐之后,最后决定从 Hexo 切换到 Astro。它默认输出静态页面,交互脚本也可以按需加载,对个人博客这种内容型站点来说很合适。更重要的是,Astro 的 Content Collections、SSG 和 View Transitions 刚好能做我想要做的一些功能,而且文章管理和编辑上也能比以前更方便一点。

完成博客和个人页的初步整合后,原计划其实还是把 Phantom 主题搬过来再慢慢修。但可能我本来就对它不太满意,最后还是决定以 Lucent:明光初启 为基础,按照自己的想法做一套个性化改版。这里也要提醒一下,基于别人的主题继续改,最好先征得作者同意后再做喔。

我很喜欢 Lucent 那种玻璃般的折射和通透感,也很喜欢它的配色:低饱和度的中性色打底,再用局部高亮色做强调。原本主题除导航栏外,信息卡片基本都是没有圆角的直角边框,确实有点在圆滑当道时代做锐利异类的味道。但是吧,可能我做不成这样的异类,所以把大部分卡片改成了 0.75rem 的统一圆角,用更柔和的玻璃面板重新组织层级。

原主题里部分模块的交互也比较生硬,所以我加了一些过渡动画和悬停反馈,再配合 Astro 的 View Transitions,让页面切换和模块状态变化不至于太突兀。音乐模块也换成了网易云音乐的数据流,对我这种几乎没用过 Apple Music 的人来说,网易云音乐才是舒适区。

Hero 模块算是我自己新增的一个部分。桌面端和手机端分别做了不同尺寸的壁纸,页面会根据设备自动切换。Banner 上加了打字机效果,壁纸则用 10 秒间隔做 Ken Burns 慢速推拉和交叉淡入淡出。技术上不算多复杂,但这个效果算是以前在 Hexo 一直想做,却始终因为各种原因没能做出来的东西,这次也算是圆梦了。

另外还做了一个全站搜索。搜索按钮放在导航栏「关于」之后,支持 Ctrl+K 打开、Esc 关闭,输入时会做一点防抖,匹配文章标题、描述和分类。它不是什么很大的功能,但对一个文章会慢慢变多的个人站来说,还是挺有必要的。

实际上,这套主题算是 Lucent 的改版,也算是一套更贴合我自己习惯的个性化版本。本来原作者建议名字改成 Lucent Pro Max,但最后想了想,还是叫 Lucent Plus 吧。一块清澈光亮的 Plus 玻璃,一见如故的 Plus(瞎写的)。

版权许可

本文采用 CC BY-SA 4.0 协议授权

保留署名与相同方式共享即可转载、引用或再创作。转载时请注明出处并附上本文链接。

评论

留言系统基于 Disqus,发言前可查看 评论规则。部分网络环境可能无法正常加载。