深色界面登场！

发表于 更新于 分类于

最近略为倒腾博客设置，今天正式推出基于 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，以便检索。

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