貌似Velas改版之后就没有再更新Issue了(差点变成了Annual Issue),原因主要是这半年来网站都是小修小改为主,最近都在学Unity的东西,所以前端的东西就先搁置了 (那为什么要鸽文章)

好了,最近看了几位大佬的个人博客(可以到我的友链里浏览)。我不论是对他们的页面设计,还是文章质量都深深敬佩,所以我也咸鱼翻身一把,振奋振奋把电波站装修了一番。

大家都能看出这个星期电波站有啥改变吗?

毛玻璃背景

我觉得毛玻璃背景是这次最明显的变化了吧。

在过去一个星期里,我默默完善了电波站的设计语言,以统一按钮和链接的设计风格为主。而且为了让页面“更通透”和不那么单调,我默默把三年前丢掉的设计又搬了回来。

就是这个。

Velas毛玻璃1.0

啊,不好意思放错图了,是这个。

Velas 1.0的Talk月份列表设计
Velas 1.0的Talk月份列表设计

现在使用了新设计的电波站首页长这样啦。

新版Velas主页
新版Velas主页

仿佛看到了Velas(自己)三年的沧海桑田han

当然,用到的属性本身还是没变的,还是那个万能的filter:blur()而已,不过现在的Velas毛玻璃是利用不同层的元素叠加成的。

白边怎么处理?

CSS高斯模糊后的图像边缘会有一圈羽化效果的白边。这圈白边非常影响观感,可能这也是很多人不愿意用这个属性的原因。至于我是怎么解决的(・・; ) 其实我只是用了一个trick而已。通过transform:scale()将模糊后的图片稍微放大,再通过给父元素加一个overflow:hidden就好。

其实并没有什么非常巧妙的东西,甚至说出来我都觉得有点水字数的嫌疑……

当你照着我说的做之后,美妙的事情就发生了:在图片加载完之后,你会看到图片被CSS放(扯)大的全过程,而我们是不期望有这个效果出现的。

我认为这还是CSS的运行机制所导致的——CSS必须要等图片完全加载完后才能知晓图片的实际长宽,从而才能对图片进行缩放处理。至于我又是怎么处理的(・・; ) 你以为那个图片加载动画只是放着好看而已吗 (-_-)

可谓“用美观的动画,来掩盖不美观的技术处理”。这招还是跟iOS学的。

总之,好看就行。再放几张图给大家欣赏一下吧~(也请务必到处点点)

"频道"页面顶栏毛玻璃
"频道"页面顶栏毛玻璃
"更多"页面顶栏毛玻璃
"更多"页面顶栏毛玻璃

上面所说的只是从技术的角度讨论。而怎么真正把它做得"美观又实用",则更多是从设计的角度考量。

这个设计本身是为了解决每个主页面和文章详情页面的Header部分设计的不协调问题:主页面的Header四周是留空的,而文章详情页面的Header则是铺满的。我也担心过在引入这个设计之后,可能会干扰用户的注意力。所以遮罩的渐变效果和透明度也是经过我精心调整的,希望大家会喜欢。

重新设计的碎碎念

以前的碎碎念页面是我在电波站中最不满意的设计了(以致连图都没留下)。但是由于缺少相关类型页面的设计经验,以及与电波站其他页面设计统一的权衡,使得它一直放着没动。

这次把碎碎念拿出来重新设计的契机,还是要感谢 @熊猫小AVOID主题 给了我灵感。

VOID
VOID主题

我也不能准确说出VOID到底是哪方面震撼了我,或是给了我什么灵感。不过这种大字号大字重的标题+小字号小字重的摘要的排版风格让我看了之后心头一颤(当然VOID的图片排版和瀑布流布局等也很出彩 ,怎么说着说着又吹起来了)。

这是……报纸的感觉?

于是,我尝试把这种感觉放到了重新设计的碎碎念页面中,成了今天这个样子。

重新设计的碎碎念
重新设计的碎碎念

好了,这下就有点像报纸了,看着比原来那种别扭的半成品感要好了很多。页面还是稍微空了点,而且左边会有点重,看看后期在右边加点时间轴什么的压一压。不过我还是挺享受这种有点留白的感觉的,读起来会挺舒服。

(请务必先把文章写好。)

为了不让浏览体验太单调,我为此还加了几个小动效哦,有兴趣可以体验一下。

留言板重构

其实这应该是一个大事件了,不过你们都无法直观地感受到,可惜了。可能只能看出新的留言板的设计好像有什么微妙的不同,以及多了个人网站支持和简化了验证码。但不知道我花了近三天时间,把整个留言板功能推翻重构了一遍。

代码上的改变大概有那么大。(最底下文字:新增1030行,删减1850行,有16个文件改动)

留言板的代码改动
留言板的代码改动

好吧,这个仓库不公开。

之所以一直不敢去碰,是因为这一块的代码实在是太久远了。想象一下,单是在一个留言页面里面,就有三个代码完全独立的留言框;而且留言页面和文章页面底下的留言列表是分开实现的。所以每次为留言这一块加功能,我就要同时维护六个留言框和两套代码。再加上留言这块的功能细分起来其实也很复杂。之所以会这么狼狈,是因为当初实现留言板的时候对Vue的组件还不熟,再加上没想过会在除了留言页面的其他地方弄留言功能。(早期Velas的文章留言功能是利用GitHub的api实现的。)而我看它还能用,而且居然还很稳定,所以就一直小删小改,得过且过了。

现在看在要加入个人网站支持、以及后面的回复提醒这样的大改动,所以一鼓作气把这块推翻重写了。这次重构的主要内容是把留言框和留言卡片组件化(利用Vue的父子组件双向数据绑定)。

留言框代码引用示意:

<comment-box
    box-title="评论"
    :content.sync="form.content"
    :name.sync="form.name"
    :email.sync="form.email"
    :website.sync="form.website"
    :captcha.sync="form.captcha"
    :remember.sync="form.tag"
    :captcha-html="captcha"
    :is-captcha-err="isCaptchaErr"
    @leave-message="leaveMessage"
    @get-captcha="getCaptcha"
></comment-box>

留言卡片代码引用示意:

<comment-card
    is-reply
    :id="`reply-${r.id}`"
    :is-actived="`reply-${r.id}` === activeId"
    :author-avatar="r.avatar"
    :author-name="r.author"
    :author-website="r.website"
    :date="r.date"
    :is-cancel-reply-show="commentId === c.id && replyId === r.id"
    :content="r.content"
    :is-page="isPage"
    :reply-to="r.replyTo"
    @clear-reply-state="clearReplyState"
    @set-reply-state="setReplyState(c.id, r.id)"
></comment-card>

并且,留言页面和文章的留言列表两套代码被合二为一,抽象成一个引用留言框和留言卡片的组件。这样以后加功能只需要直接在某个组件上修改,而无需再做重复而高风险的工作。不过代价是,留言页原本是服务器端渲染的,现在改为了浏览器渲染(所以你现在能看到加载动画)。

虽然因为时间和能力问题,留言这块的代码我还是不大满意(尤其是后端的数据处理),不过已经比以前强太多太多了,至少我现在可以随心所欲加功能啦。

要不要加上表情呢,感觉现在有点太严肃。

其他改动

  • 修改了留言的默认头像
  • 简化了验证码输入
  • 加入了url的页码索引,现在翻页之后刷新再也不会回到第一页了。
  • 修复了一个网站API超时问题
  • 修复了一个图片懒加载问题
  • 加入了一个小彩蛋
  • 增强了后端程序可靠性

关于深色模式

之前逛博客的时候,我看到了好几家主题都加入了深色(夜间)模式(主要是小A家的)。由于看到Safari给CSS加入了一个判断系统是否在使用深色模式的媒体查询,所以我也尝试捣鼓了一下。

Velas电波站的"深色主题"
Velas电波站的"深色主题"

Tada~

好吧,这是之前随手弄的,看上去有点像愚人节彩蛋。我粗略评估了一下,给电波站加入深色模式的成本还是挺高的。主要是我的CSS里有很多远古代码,虽然经过了几次重构了,不过现在看上去还是有点乱,无法做到很“优雅”地去改全局的字体或是背景样式。再加上我网站的外观多是由代码驱动的,而Safari现在只给了一个CSS查询的方法(虽然小A的主题好像是用JS去hack CSS的)。所以我想还是再等等,等我再来几次重构把CSS弄好看一点再说吧。(而且我个人也不怎么用Mojave的深色主题,所以看到iOS13的深色主题我的心里毫无波动)(说白了就是懒,别找借口了)

如果各位真的很希望看到带有深色主题的电波站的话,欢迎在评论区留言哦。我会酌情提高其优先级的。(假装是在给开源主题发征求意见稿)

好啦,不知不觉写的有点多,我们下次再见吧~

  • 文/Zeee

商业转载请联系站长获得授权;
非商业转载请注明文章来源及链接。