深色界面登场!

最近略为倒腾博客设置,今天正式推出基于 Next 简单定制的深色主题!只要浏览器已应用深色模式,访问博客即可启用。另外有细节优化若干。

具体细节记于内页。

一、Next 主题的样式和变量

早前,为改造 Next 主题灰不溜秋的界面,我用了一种粗糙、但至少有效的手段:网页上哪些部分要改配色,就在 styles.styl 布置覆写用的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
a {
color: #f48fb1 !important;
border-bottom-color: #f48fb1 !important;
transition-duration: 0.2s;
transition-property: color,border-bottom-color;
transition-timing-function: ease-in-out;
}

a:hover {
color:#c2185b !important;
border-bottom-color: #c2185b !important;
}

.post-button .btn {
background: #ad1457 !important;
border: 2px solid #ad1457 !important;
color:#fff !important;
}

.post-button .btn:hover {
color:#ad1457 !important;
background: #fff !important;
}

其实之所以本博客至今未启用深色主题,是因为维护如此浩繁(超 150 行、数十个颜色标记)的 CSS 样式实在繁琐,做深色主题意味着工作量加倍……我理应将诸要素配色集中管理,尽可能减少配置复杂度。在 Next 软件包里,我发现 css/_variables/base.styl 集中定义了一批颜色相关变量:

1
2
3
4
5
6
7
8
9
10
11
$gainsboro    = #eee;
$grey-light = #ccc;
$grey-dark = #999;
$black-light = #555;
$black-deep = #222;

$link-color = $black-light;
$link-color-dark = $grey-light;
$link-hover-color = $black-deep;
$link-hover-color-dark = $gainsboro;
$link-decoration-color = $grey-dark;

Next 文档中建议引入 source/_data/variables.styl 以便覆写这批变量。这条路线可以取代扭曲得不可名状(用英语讲,sketchy)的双轨制样式,亦可受 darkmode 开关调控。

以上样式定义便可精简为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$pink-50 = #fce4ec;
$pink-300 = #f06292;
$pink-500 = #e91e63;
$pink-800 = #ad1457;
$pink-900 = #880e4f;

$link-color = $pink-500;
$link-hover-color = $pink-900;
$link-decoration-color = $pink-500;

$btn-default-bg = $pink-800;
$btn-default-color = white;
$btn-default-border-color = $pink-800;
$btn-default-hover-bg = white;
$btn-default-hover-color = $pink-800;
$btn-default-hover-border-color = $pink-800;

a {
transition-duration: 0.2s;
transition-property: color,border-bottom-color;
transition-timing-function: ease-in-out;
}

但是,某些未被原生 base.styl 定义的样式被硬编码到各个模块的样式定义当中(例如,侧边栏之背景、文字配色在 _sidebar.styl 当中被硬编码),此时仍需于 styles.styl 自行维护相关样式。此外,在 variables.styl 自行定义的变量(如 pink-100)不能被 styles.styl 取用,需于后者再次定义。

同时优化了白天主题的一些文字配色。

二、诸插件 CDN 之变更

博客迄今用到的插件不下十种,同时有外源字体,如何加快其加载速度一向令人头疼不已。有三个原因:首先,网站本身带宽有限,若令其托管全部插件,加载用时会延长;其次,Next 主题至今仅原生支持 CDNJS、JsDelivr 和 Unpkg 等三大 CDN,其中两个在大陆的可用性存疑,Unpkg 也显得拖泥带水;再次,Next 主题依赖于 Google 字体库,后者在大陆的可用性已然欠妥。目前采用的方案有:

  • 字体库依赖改为 fonts.font.im。虽服务器位于日本,需要一定时间加载,但起码可用性接近 100%,且得益于异步加载插件(Lozad.js),不会拖累过多。
  • 鲜有更新的插件改为自字节跳动 CDN 取得。特别地,Animate.css 依赖被锁定于 3.1.1 版本,无需跟进更新。
  • 近两年有更新、或未被字节跳动收录的插件,改为自 Staticfile(七牛 CDN)取得。

三、其它调整

通过 languages.yml 定制了页尾、侧边栏链接区标题、时间线等固定描述。详情不赘述。
将诸文章地址扁平化了,并添加 sitemap.xml,以便检索。

你问我最近在忙什么?求职,被拒,消停一阵再求职而已。