起因

原来的博客是 Hexo 加主题，标题、导航、侧边栏都被主题框死了，改起来处处别扭。这次干脆自己写，把想要的效果一个一个实现出来。

首页的组成

首页其实就是一个「桌面」，几张卡片浮在插画背景上：

位置	卡片	作用
左	资料卡	头像、站名、导航
左	最新文章	最近更新的三篇
中	问候卡	按时间显示 Good Morning 之类的问候
中	作品图卡	放封面或者作品图
中	音乐胶囊	背景音乐播放器
右	日历卡	显示当月，有文章的日期会加深
右	数码时钟	七段数码管样式，每秒走字

几个小细节

卡片为什么不是普通圆角

参考站用了一种叫超椭圆（squircle）的圆角，比普通圆角更「饱满」。现代浏览器支持 corner-shape: squircle，一行就能开：

@supports (corner-shape: squircle) {
  .card {
    corner-shape: squircle;
    border-radius: 64px;
  }
}

不支持的老浏览器会自动退回普通圆角，不影响使用。

七段数码时钟怎么做的

没有用字体，而是把每一位数字拆成七根小灯管，按关系点亮。比如数字 8 是七根全亮，1 只亮右边两根：

const MAP = {
  "0": "abcdef",
  "1": "bc",
  "2": "abdeg",
  // ...
  "8": "abcdefg",
};

改一个数字只要切换对应小灯管的透明度，看着就很有老式电子表的感觉。

时钟和问候语为什么不能写死

网站是构建成静态页面的，如果问候语在构建时算好，那不管谁什么时候打开都是同一句话。所以这些跟「当前时间」有关的东西，都要等页面在浏览器里跑起来之后再填进去。

踩过的坑

• 自定义鼠标指针在触屏设备上会被忽略，这没关系，不影响使用
• 服务端渲染和浏览器渲染的时间对不上会报错，日历这类组件首屏要用构建时的日期兜一下
• 日历「今天高亮」和「有文章加深」是两套逻辑，别混在一起写，容易互相打架

下一步

• 把项目页、分享页的内容填成自己的
• 把背景插画换成真正喜欢的图
• 试试加个搜索