search

wyast / wyast.github.io

未央科协网站
https://wyast.github.io/
3 stars 1 forks source link

基本完成主页架构，先更新入main，以便轩组研发 #20

Closed liuyifan22 closed 6 months ago

liuyifan22 commented 6 months ago

整个主页都换了，新版在./index.html。轩组可以考虑在新的文件夹中放新闻页。

vercel[bot] commented 6 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
wyast-github-io ✅ Ready (Inspect) Visit Preview Mar 17, 2024 7:14am
RebelPotato commented 6 months ago

已经达成了主页的目的，但是有一些内容需要调整。

页面技术的改进意见

本页面使用的模板较为老旧，过于依赖 js ，现代浏览器可以仅使用 html+css 实现其希望的大部分功能。对 js 的依赖导致页面 js 未加载完成时用户体验下降，而这本可以被避免。考虑到我们的服务器网速的限制，该情况不可忽视。

  1. 停靠在页面上方的导航栏，本可以使用 cssposition: sticky实现。
  2. 未开启 js 时，完全不显示滑入的图片。更好的效果是：未开启 js 时在文字左或右正常显示图片。

希望不需要整个推倒重来。

经本人测量，目前该页面需要加载的总资源大小为10.5MB，其中 js 占0.5MB，头图占9MB。太大太大！

视觉效果的改进意见

目前页面视觉效果相当有待提升。个人认为页面内容显得不够丰富（字太大、太少），并且很有年代感（展示出科协历史悠久吧），配色也有待改进。

美观以外，在使用中还发现了这些细节问题：

  1. 改变页面宽度，头图有时无法填满标题区，底下有一道白条
  2. 改变页面宽度，导航条有时会变成两行（这是feature，但我不喜欢）

关于后续工作

发现目前主页的整体视觉风格跟Observables网站（我们尝试的资讯页面的风格来源）有些不同。比如对比导航栏： image image

尚未达到那种简约的美感。不知接下来要完成的资讯页面是否需要使用此模板？

RebelPotato commented 6 months ago

几个抽象的点：

  1. new.css有语法错误。语法错误。但是能跑！
  2. jquery.smint.js没把console.log删干净，在命令行里絮絮叨叨。
  3. 9MB的 gif 下载时间：17ms。0.1MB的 js下载时间：60ms。这就是为什么我要尽可能减少 js 。

image

image