Zeee 文 5778 kHz 3,268 字

大家好!这里是想不到要开什么新坑所以只能拿Velas Weekly来水的Zeee(大雾) 虽然又是四个月才更一次,但还是不吐槽这个Weekly命名了

因为觉得正经文章写得太少,所以不好意思另外再开一篇ToDo Next Week来占坑了。而由于没有ToDo Next Week的文字记录,我只好翻着GitHub上的Commit整理出这篇日志……

REST API安全强化&后端优化

本来在上一篇Velas Weekly中还信誓旦旦地说今年不会再有什么大更新了,然后没想到转头就把后台重构了一遍。

契机是最近看到了这篇文章,真的读的我直冒冷汗。再加上之前读了不少关于NoSQL注入攻击的文章,这样回过头来看Velas的REST API设计还是太不合格了,因为我最初只是考虑到来自Velas网站的正常访问请求,而疏忽了外部恶意调用API的情况。不过此前多亏了Mongoose的数据校验,所以直至目前Velas并未被NoSQL注入 (大概)

根据上面文章中提到的点,我先后为Velas的API增加了请求头(Request Header)校验、规范化响应的状态码使用、使用express-validator严格对每个请求数据进行验证和过滤、过滤带有疑似NoSQL注入攻击参数的请求、对原有OAuth访问控制的中间件进行了抽象和简化、优化服务端对某些CORS请求的处理等等等等。(那一天,某从后端相关专业毕业却在做前端的设计师终于回想起了自己的老本行)

我还顺便把原生的axios换成了Nuxt自家的axios模块 (其实一点也不顺便,简直大动干戈),也因此修复了先前Vue在服务端向后台发数据时会丢失请求头的问题,所以本站的请求数量也因此精简了不少。单拿文章详情页来说,页面初始化的请求从五个精简为一个 (是的,因为俺API设计疏漏和请求头的丢失,以前要发五个请求才能拿齐整个文章详情页所需要的数据,这粗暴的解决方式简直令人发指)。由于不会再丢请求头了,文章的阅读量统计也终于可以通过session数来统计、而不再是刷新一次自动+1了,因此统计到的数据也会真实不少。 (但愿不会因此暴露出文章其实也没多少人看的事实)

这次升级我还在服务端为某些API增加了LRU缓存。虽然此举目前以本站那点的访问量来说意义并不大,(由于免去了数据库的频繁读取,)单次请求也仅仅缩短了100ms左右的响应时间,但在某种意义上也增强了后端的的抗压能力。(不过重要的还是要定期备份数据库)

由于在这次更新中后端改动实在太大,即便为此我已经做了不少的测试,但是还是会免不了出一些我预料之外的bug,如果大家在访问期间遇到什么问题也欢迎反馈。

支持深色模式

在约莫一年前的Issue 4里我提了一下让Velas支持深色模式的念头,主要是很馋熊猫小A的VOID主题上的夜间模式。却无奈当时Velas正处于新老技术栈交接时期,样式的文件结构还是乱糟糟的,贸然上深色模式只会让我的CSS变得更乱而已,所以也便把这个念头打住了。

而在经过了若干次代码调整之后,在今年年初时Velas终于有了支持深色模式的条件,加上近期设计界深色主题设计开始流行,所以我一鼓作气之下便让Velas支持了深色模式。

Velas深色模式的实现参照Google Developer的这篇文章,整体上使用CSS3规范所提供的@media (prefers-color-scheme: dark) 来进行样式控制,并利用JavaScript的window.matchMedia('(prefers-color-scheme)')来判断用户浏览器是否兼容/已开启深色模式从而控制网站上事件。

此外,Velas还在页面底部留了一个小开关,让用户可以自行调整是否启用/关闭Velas的深色模式。这部分是通过Cookie读写设置+动态修改body的class的方式实现的。理论上这个方法是支持第三个选项的,即允许始终开启深色模式。不过考虑到要重写部分CSS的逻辑,所以暂时先不加入,等提这个需求的人多了再考虑吧。

深色模式开关
深色模式开关

值得注意的是,Velas的深色模式不是简单地对原有浅色主题进行反色处理而已哦。考虑到深色模式更多是在光线较暗的场景下使用的,因此我重新调整了整站配色,确保深色模式下的按钮和通知仍然拥有较高的对比度,并确保整体的阅读体验不会因为主题的改变而产生太大变化。同时根据上面Google Developer的文章中所提到的点,Velas还针对人眼在弱光环境下的特点,调整了页面上图片的灰度和亮度,以确保用户不会突然被某张图片“亮瞎眼”。(当然,点击查看大图后弹出的图片会保持原有的色调,所以不用担心在深色模式下图片的阅读体验会受到影响。)

可以说深色模式下的Velas,大到每个页面的颜色搭配、小到音乐播放器上的滑块配色,都是被精心设计过的,为的是尽可能让访客在深色模式下能获得和浅色模式下一样的舒适阅读体验。可以说在这个过程中,技术部分是最为轻松的,最困难的更多是界面和交互设计上的考量。

也希望大家能享受Velas电波站在深色模式下的体验。

Velas电波站深色模式
Velas in Dark Mode

改进的导航栏设计

如果你曾因好奇点进Velas的时间胶囊的话,你会发现Velas在17年-18年期间的导航栏是采用自动吸顶设计的。但是为何到了Velas电波站时期会把自动吸顶拿掉呢?因为在转向博客网站后,自认为Velas那高60个像素的导航栏挺影响阅读的(在我的小手机上看尤为明显)。(然鹅我并不想改导航栏的设计)

其实我当初有个天真的想法:如果没有导航栏在面前晃悠的话,那么就没什么人会在读文章的中途想点logo回首页了吧。然而Google Analysis的统计数据表明:在拿掉了导航栏之后,不少“太长不看”的人是直接就把Velas关了,连首页也不想回。所以我现在又回心转意,盘算着把导航栏吸顶加回来让本站跳出率能稍微下降一点点。

但是至此,导航栏占用屏幕空间的问题依旧没有解决,这该怎么办呢?

契机是最近和Mikusa聊起毕业设计的事,我心痒痒又翻出了两年前毕设……

Zeee的毕业设计
Z某人那已被埋进历史尘埃的毕业设计
Zeee的毕业设计2
究极·真红·完全体の·Velas电波站

啊,真好看!不愧是我 话说,这……是啥?

不要问我做的是啥,问了也不会告诉你,请用心感受。

在我正怀着旧的时候,有个设计吸引了我的注意——上面这个信息卡片的顶栏设计是不是可以用在Velas电波站上呢?

上面这张图或许不够直观,咱换一张动图。

信息卡片顶栏的动效
信息卡片顶栏的动效

是的,问题的关键不在于导航栏占用多少屏幕空间,而是在于屏幕空间是否被有效地利用了起来。如果能用导航栏的空间来放和文章相关度更高的信息和动作选项,那会不会更好呢?这……难道是两年前的我为了电波站的今天而专门留下的讯息? (厨二病 乙!)

于是在一轮操作下,我为文章详情页面下的导航栏加入了一个“沉浸模式”,即在阅读文章的过程中,导航栏自动显示文章标题、点赞按钮、分享按钮(需要浏览器兼容Web Share API )(注:因为某种原因我把Edge Chromium for Windows列入了分享按钮的黑名单,理论上它是支持Web Share API的)。并受知乎网页版的启发,我为导航栏的两个模式间加入了上下切换的动效。等等,现在才发现这设计怎么和知乎长得那么像(倒地

重新设计的导航栏
导航栏的「沉浸模式」

而当在移动设备上浏览时,导航栏还提供显示目录的操作,为的是解决此前在小屏幕上不能随时查看文章目录的限制。

重新设计的导航栏2
现在小屏幕上也可以随时查看目录啦

其实我不会说这个设计改进的根本目的是让你们多多点赞

相信在看这篇文章的时候,你们也已经发现了这个设计了。希望这个小改进会改善你们的阅读体验。(其实已经算不上“小改进”了,为此又把导航栏重构了一遍) (再次证明前端的本质是无情的重构机器人)

关于版权

在上个月初的时候,我冷不丁发了一篇对本站文章转载条件的更改声明,其实是之前得知有那么一拨人会从别人博客里偷稿件去录视频发b站和油管,而之前Velas的文章转载条件中并未对此加以限制。修改后的转载条件加入了禁止演绎的声明,可以说是封堵了这方面的漏洞。虽然说还是防君子不防小人

在Velas转型电波站之后,我便深信文章内容是电波站的重心,我的代码和设计都是为了呈现文章内容而服务的。而当Velas下的文章被版权协议严格保护时,我才能更安心的去产出更多高质量的文章。

值得注意的是,在转载条件更改声明发出之后,我还将小说分类下的文章转载条件特别声明为最为严格的“未经站长允许不得对本文进行任何形式的转载或修改演绎”,即不论商业还是非商业转载都需要先经我批准才能转载。暗示了会有新的小说?

我还意识到,由于Velas电波站非文章部分还使用了一些非Unsplash的图片。虽然说互联网图片的使用是一个灰色地带,但我会在近期单独把这些图片的出处都找到并列出,以示对图片作者的尊重。(当然,还会将Unsplash图片的出处和作者也一并列出。)

我想让Velas能最大限度地尊重每位创作者的权益,毕竟本站的影评和游戏测评本质上也是怀着对创作者的敬意而写下的。所以我也希望我的访客们能尊重Velas的版权。同时,我也会尽最大努力维护Velas权益(包括所有由我原创的文章、设计和代码),为了让页面底部那句 Zeee保留所有权利(All rights reserved) 不变成一句空话。

写在最后

除了上面列出的那几大点,其实还有不少小更新,包括:为文章加入了占位图,防止因为图片加载导致页面乱跳、加入了图片点击查看大图、能够一键播放指定曲目的音乐Tag等等等等,这里就不一一说明。因为这些更多是体验上的改进(和代码上你看不到的优化),我想留着等你们在浏览Velas的过程中去感受“啊,这里有个小细节”,或是“咦,这里不一样了”的惊喜。能够让访客在使用产品的过程中,因为偶然发现某个精心设计的小细节而会心一笑,大概是对一名设计师&程序员来说挺浪漫的事情。

直至Vue3.0&Nuxt3.0正式版公布之前,Velas应该不会再有什么大动作了虽然每次都这么说,有也是哪天我突然想带Velas上TypeScript的时候。

据说Velas在大陆被墙得有点厉害,所以也在考虑要不要把Velas搬到阿里云香港去 (虽然不久前才给现在这个服务器续了半年)

这次就不立一定更文的flag了因为坑已经挖得很多了,我们下篇文章见吧~


© 本文文字内容著作权归Velas电波站所有。商业转载请联系站长获得授权;非商业转载请注明本文出处及文章链接,且未经站长允许不得对本文文字内容进行修改演绎。