最近略为倒腾博客设置，今天正式推出基于 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 定制了页尾、侧边栏链接区标题、时间线等固定描述。详情不赘述。
你问我最近在忙什么？求职，被拒，消停一阵再求职而已。