blog/source/_posts/New-Theme-for-Blog-at-the-start-of-2024.md

5.5 KiB
Raw Blame History

title tags date
新年新主题博客新主题Buck介绍
博客功能更新
Hexo
2024-01-11 19:36:34

请允许我隆重介绍本博客的新主题——Buck跟原先一样这是一个老Material Design风格的主题。Buck从头开始设计重写了所有样式和代码加入了新的考量和原则。让我自豪地在这里为你介绍一下Buck带来的改进和变化。

平平淡淡不是真

如果你曾经访问过我的博客你很可能会感觉本博客的设计非常素。低情商一点可以说很无聊。旧的CMDClassic Material Design主题中强调色几乎不存在而且字体大小非常保守元素又缺乏变化。在我的实际体验中这样的问题使得不同元素之间缺乏对比页面缺少“锚点”抓住眼球显得很平淡。

有人说“平平淡淡”才是真但是在阅读长篇文章的时候如果没有一些奇怪的东西打扰你的眼睛很有可能你就会睡着了。说实话我在看《编译原理》的时候就睡着过好几回所以我想要偶尔有一些醒目的东西。当我将h1到h6元素映射到Material Desgin Typography的Display4到Title的时候我发现效果意外的好它就像直接拍到我的脸上。我的视线在Display4切换到主要文字的Body1时甚至需要重新对焦但它又不会特别恼人。文章的展示意外地有了足够的层次感。

颜色也是一种对比。博客原本就有一个粉色的强调色,但是非常非常少用,因为我也不知道怎么放。这次我想到了一个好主意:将有超过一篇文章使用的标签用强调色标出。现在主页终于不再是蓝色、白色和黑色了。当然,主题色也做了一些调整:蓝色变深了,提高了与白色的对比度。

新的标签列表卡片

除此之外当你将鼠标放到各种物件上时都会有新的强调样式。在Buck中我非常重视即时反馈几乎每个物件都有自己的强调样式包括代码块、块引用甚至列表和表格。在文章中各种物件的样式不再使用浏览器样式而是使用接近Material Design的样式看起来更漂亮了。

物件 基本反馈 增强反馈
代码块
块引用
列表
表格
图片
标签 Chip
卡片
链接

与此同时Buck能更充分地利用屏幕空间不再像CMD一样将页面主题的宽度限制得太小。首页的内容不再挤在中间显示而文章也有更大的空间舒展文字。

渐进式增强网页

Buck的JS、CSS以及其它资源现在使用esbuild打包。得益于打包工具的魔法我能够轻易为Buck的网页进行“渐进式增强”。简单来说“渐进式增强”就是在条件允许的时候提供相应的功能在条件不允许的时候也有一个备用方案而不是简单地告诉用户页面无法使用。

表格的增强反馈:鼠标在某一列停留时,相应列的标题会亮起

当你在表格的某一列的一个单元格停留时相应列的标题就会亮起这个效果使用了JavaScript来实现。所以当你关闭JavaScript的时候这个效果就会消失但是页面仍然能够观看。

除此之外还有数个地方使用了JavaScript增强效果。我还准备实现一个图片全屏显示工具得益于全新的代码架构这个目的比之前更容易完成:)

可及性Accessibility

相比CMDBuck一定程度上优化了可及性。我有相当一部分精力放在了“减少触摸的二义性”上。

博客文章列表的一个项目,有两个地方被红圈圈了出来:标题和内容梗概中的一个链接

在原先的CMD中文章列表中的一个项目是一个纸片点击这个纸片就会进入文章页面。这听起来是很棒的主意。但是如果用户注意到这个纸片中内容梗概也包含可操作内容的话就会产生二义性用户难以预测触摸的结果。因为使用手指触发触摸屏会在屏幕上产生一个椭圆形的触摸区域

  1. 物理上:用户确实无法确定实际上点击了哪个位置。
  2. 心理上:手指遮挡了触摸区域,增加了用户心理上的不确定。

所以在Buck中进入文章的点击区域被限制在了标题处避开内容梗概内的可操作内容同时可点击区域也有明显的标识。避免这样的二义性后触摸的结果就更容易被用户预测到。在其它地方的可操作内容中我也会采取了增加空白等方式以求减小这种二义性的影响我个人认为效果还可以。

除此之外在键盘导航、颜色对比度、字体等方面Buck相对CMD也有很多改进。

漫漫长路

开始一个新项目也有点像在打RPG最开始零级出厂、慢慢升级中间有可能提前结局。Buck断断续续地写了快一年终于有了点底子但是还是有很多问题需要修正。如果大家发现了bug还请多多包涵。我是在Webkit、Gecko和Chromium三家引擎上测试的bug我大多已经发现了只是需要时间修。但是真的我博客没写几篇博客自己的代码倒是写了不少XD

在2024年的开头能把它做出来也许是好事开端的预兆我是希望如此。