我说我是 UI 设计师,如果不是亲眼见到我做的东西,人们大概不会相信,不过我的行业比较特殊,我不是做的网页设计,而是汽车仪表的 UI 设计以及在 Kanzi Studio 中实现经设计的功能,所以我这个网页所体现的相关能力其实一般甚至低下,尽管如此,这个博客也是久经折腾,如果不是通过 RSS 订阅而是直接通过网页访问我的博客,可能会看到有时候这个网站的页面会有一些崩塌,不过最近我对网站进行了一些重新设计,希望这个设计效果能活的久一些。

在设计方面,参考了部分博客框架主题,尤其是 Astro 官方的 Micro 和 Nano 主题,所以若你第一次看到本博客,发现它不像 Typecho 传统那种样式或者其他博客的样式,这是很正常的。原来我的主题是参考了雅余的 Dear 主题以及搬砖日记的 Final 主题,在不断折腾的过程中慢慢实现了一些功能,这里我之前也谈到了一些

  • 首先是目录——Dear 主题和 Final 主题都没有目录功能,因为两者都是极简主义的主题,整个主题文件都很简单,而我的一些文章可能有很多标题,例如终焉回廊系列文章,为了方便阅读者,这里通过 JS 实现了添加目录的效果,在有标题 H1-H6 的页面会自动添加目录,这个内容之前做了一些平滑效果,导致展开和收起目录有一定的延迟,现在去掉了这个效果,而目录默认是关闭的,如果需要可以点击目录展开。
  • 其次是黑暗模式,Dear 主题和 Final 主题都没有手动切换黑暗模式的功能,之前我只是给网站添加了手动切换的功能,但放弃了 Dear 主题中的自适应模式,后来发现大部分做了黑暗模式的网站都有配合浏览器的自适应模式,所以我也就做了一个,当然这个很简单,而这里最重要的一点是关于黑暗模式切换中的一些 Bug,由于之前没有使用 :root 来全局性的黑暗模式,而用了 body 标签,导致 :root.dark-modebody.dark-mode 实现了不同效果,即如果使用 body 作为前缀,在网页刷新时,必须要等待其加载完毕后才能适配黑暗模式,导致如果以黑暗模式在不同页面之间切换会出现一瞬间的闪烁,即先出现了一般的白昼模式,后自己适用了黑暗模式,这一瞬间闪烁给人造成了不良观感,后经优化,这个问题应该得到了有效改善。现在在主题导航栏部分可以看到一个主题切换的按钮,点击切换自动、白天、黑暗三种模式。
  • 在 Header 部分添加了一个搜索按钮,现在点击搜索按钮会弹出一个搜索框,可以通过该搜索框对网站内容进行搜索,当然主要是搜索文章内容。这个搜索框可以通过单机关闭按键或者按 ESC 键退出。
  • 关于返回顶部,这里也是通过 JS 文件进行了设计,很多网站将返回顶部按钮放在网页底部,比如 Dear 主题,但是这样,当读者看到一篇长文章,读到一半觉得无趣不想读时,要返回顶部就还得先强忍着恶臭翻页到底部,这就很烦人,所以我也改善了一下,将其放在右边,不管是出于什么目的要返回顶部,多少可以给读者节省一些时间成本。当然目前大多数网站也都是这样做的。
  • 网站针对手机或小屏幕进行了适当适配,做到了半响应式,当然不完美,权当随便看看。

主题在最终定版之前,参考过许多 UI 框架,包括 Material UI 和 Tailwind,我不喜欢太简洁的风格,比如有些网站干脆不用 CSS,这样仅关注内容,对于一些创作者来说当然是好的,但读者可能并不能接受没有骨架的东西,所以我的偏好是趋于中间态的,即我倾向于使用极简的设计,但是不想被极简误导,所以多少做了样式,在此时,我曾经多次尝试使用外部网站的中文字体,但是多少会有一些问题,谷歌字体因为谷歌的关系,可能存在有一天断联的情况,而之前运用中文网字计划所提供的服务,做了汇文港黑字体的切片,放在了 imagekit 上,作为外部字体引入,不过这个东西流量有限,所以几经尝试后放弃,干脆直接使用本地无衬线字体,当然为了美观还是用到了 cursive 以在没有字体可用时,在中文环境下使用楷体或其他符合该需要的字体。

我不知道我是不是在做开发,不过我不会贸然给网站进行改动,以免出现彻底崩坏的现象,所以在一个免费空间 infinityfree 上搭建了一个 Typecho 主题测试的网站,之所以使用该免费空间,是因为它有一个好处,是可以给二级域名绑定免费的谷歌 SSL,而其他一些免费空间往往做不到绑定 SSL 证书。

现代浏览器的好处是,可以进行辅助开发,任何对网站的改动都可以通过开发者工具,即按键盘的 F12 即可打开进行网页的临时修改,根据在该工具中的尝试,再把需要的改动,应用到样式中,这样保证不会出现大的差错,不会出现盲写网站的现象

当然上面都是针对网站的更改,因为在页面结构以及归档页的结构方面进行了许多更改,本博客除了部分搜索页面外,基本上没有使用分页功能,主要是我不是很喜欢翻页,尤其是在 Typecho 中,我不是编程专家,也不是专业出身,所以无法解决一个问题,它是,使用分页功能的博客列表,当然是可以翻页的,问题就是,第一页,除了它特定的首页,比如 /posts 之外还有一个指向,即 /posts/1/,从第二页或其他页面通过翻页按钮返回第一页,如果不是 /posts 而是 /posts/1/,感觉很奇怪。当然我看到多数 Typecho 搭建的博客都这样。


除了上述这些改动之外,网站的内容方面也进行了一些系统性规划,往事周刊从 3 月起继续更新,鉴于博客的特殊性,我不可能将所有历史资料都摆出来,所以之前确定了以每期一个主题的形式,遴选一些文章或者历史资料,这个主题的设置,完全出于毫无规律想到哪里是哪里,在下一期更新后,我将慢慢地结合当时社会中的热点话题,寻找这些资料在过去的相关内容,做成契合当时热点的主题。

其他方面没有啥大的变化。