设计 2023 版新首页

我再一次重新思考了首页的意义,在新版的首页加入了更具意义的数字和内容。也单独增加了宣传了十年之约的版块,我希望通过我微薄的力量,让更多形形色色的人加入。在个人博客的初冬,大家能够互相取暖、帮助和成长才是意义所在。

增加

  • 版块:实时数据展示
  • 版块:最新评论列表
  • 版块:十年之约进程
  • 图标:最近动态的标题处增加文章类型图标

优化

  • 删除耗费 GPU 性能的 canvas 动画,更改为简单的 animation 动画
  • 删除耗费 GPU 性能的 css 属性:backdrop-filter 和 filter
  • 更改页面整体颜色:日间是主题色,夜间是蓝色
  • 更改欢迎语文案:由“感谢你在人海中发现了我”更改为“热爱你来过的每一份温度”

兼容性报告

  • 一如既往地放弃了不支持 flex 的浏览器
  • 已反馈至 QQ 浏览器:css 属性 counter-reset 处理 calc 函数时无效

查看 https://www.thyuu.com

优化顶栏

优化顶栏位置

  • 现在顶栏在下滑过程中,固定顶部位置并重新排版使其更加趋于功能向。
  • 针对移动端优化:考虑手机的屏幕尺寸越来越大的情况下,将菜单栏放置顶部较为不便操作。因此在移动端下滑过程中,顶部会在从顶部出现在底方。

增加顶栏图标

  • 通用区域:增加随机文章按钮、返回顶部按钮
  • 文章区域:增加文章首行按钮、评论区域按钮

优化顶部菜单

  • 增加二级菜单图标及鼠标 hover 效果
  • 针对移动端优化:在手机会将菜单变成一个按钮,点击按钮后触发整个列表。

文章类型

  • 增加视频文章类型,查看 https://www.thyuu.com/word/note/66750
  • 优化单张图片文章类型,为了更加专注查看图片,将原有两栏更改为单栏。
  • 优化整体文章页结构,将评论区域从文章区域脱离出来。