时隔很久很久...

MEGO是我第一款为Halo写的主题,那时刚刚学完HTML+CSS(甚至连JS都还没学完),最近着手对MEGO主题进行了全面的改版与升级,使用Tailwind框架,对多端的响应式有了更好的适配。

一、HERO展示板块

在查看原始预览时,发现布局杂乱不堪且缺少主次关系,过多的配色让人眼花缭乱,过多的圆角让整个主题丑陋无比,让人都不想用,请看下图!

原主题展示板块

针对以上的问题,我们需要大刀阔斧让一切变得简洁,菜单栏使用三栏布局,左侧站点信息与简介,中间菜单信息,右侧主题配色的切换。Hero的背景均可自定义(我尝试过用API更换背景,每一次刷新都是新的也很炫酷)。

新主题展示板块-暗黑

新主题展示板块-暗黑


二、移动端菜单布局

在原始版本中,是通过向下展开的方式展开菜单,动画惨绝人寰让人不忍直视。每一次点击展开的时候会使界面有卡顿,且依然无主题模式切换,我们需要对他进行改革。

image-LCvz.png

原主题移动端菜单

在新版中,我们依然对Header使用双栏布局,右侧是站点信息,左侧是主题模式切换以及菜单按钮,在右侧菜单的下部分空白区域,我正在构思是否新的方案。

新移动端菜单-白天

新移动端菜单-暗黑

三、站点信息

在原始版本中,菜单导航是以三个部分(头像、站点数据以及联系方式)集成在卡片的中显示的,在使用时你会发现当访问量过于强大时会导致样式产生分裂,我们需要对它进行调整。

image-sDGK.png

四、博客展示

在原始版本中,卡片式的博客布局很实用但太丑了,配上了奇丑无比的背景(实话讲当时觉得很酷)、过多的圆角会使得有很大的割裂感。

image-mKEw.png

五、侧边聚合

在原始版本中,侧边栏承载站点信息、热门文章、分类归档和标签归档、上文中我们将站点信息移除,当然在新版本中我依然要改进。至于为什么标签归档没有显示,可能是当时版本太古早没有适配Halo 2.20,不显示了....

Document-09-07-2025_08_39_PM.jpg

Document-09-07-2025_08_39_PM (1).jpg

未完待续....