【更新】更改透明显示方式, 调整代码块配色, 添加友链

发表于 更新于 分类于

准备更一篇, 结果被 Luke Chen 压力要把图片调成不透明了, 研究了一会, 大概是改好了吧.

方法很简单, 只需要把之前在 /source/_data/styles.styl 里面的背景色和透明度设置注释掉, 再去 /themes/next/source/css/_colors.styl 里面, 把原来的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
:root {
  --body-bg-color: $body-bg-color;
  --content-bg-color: $content-bg-color;
  ...
  --menu-item-bg-color: $menu-item-bg-color;
  ...
}

if (hexo-config('darkmode')) {
  @media (prefers-color-scheme: dark) {
    :root {
      --body-bg-color: $body-bg-color-dark;
      --content-bg-color: $content-bg-color-dark;
      ...
      --menu-item-bg-color: $menu-item-bg-color-dark;
      ...
    }
  }
}

修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
:root {
  --body-bg-color: #0000;
  --content-bg-color: rgba($content-bg-color, 0.9);
  ...
  --menu-item-bg-color: rgba($menu-item-bg-color, 0.9);
  ...
}

if (hexo-config('darkmode')) {
  @media (prefers-color-scheme: dark) {
    :root {
      --body-bg-color: #0000;
      --content-bg-color: rgba($content-bg-color-dark, 0.9);
      ...
      --menu-item-bg-color: rgba($menu-item-bg-color-dark, 0.9);
      ...
    }
  }
}

即可.

看代码块夜间是白色的也看不顺眼了, 顺便给它改了: 这个工夫大了很多. 首先同样需要定位代码, 经过一些尝试, 发现它发生在 /themes/next/source/css/main.styl 中的 scaffolding 步骤, 再进入同级下的 /_common/scaffolding/scaffolding.styl 就可以看到是一堆 import, 肉眼可见 (或者逐个注释) 可以发现它又在这一级下的 /highlight 文件夹下.

仔细阅读 highlight.styl, 可以发现里面的变量都是 $ 开头, 而不是 -- 开头. Deepseek 说二者的区别大致是:

特性 $变量 (Stylus) --变量 (CSS 变量)
编译/运行阶段 编译时被替换（值直接输出） 运行时由浏览器解析
动态修改 不可在浏览器中修改 可通过 JS 动态修改（实时生效）
作用域 Stylus 文件内部 全局或选择器级联作用域
语法调用 直接 $变量名 需用 var(--变量名)
浏览器兼容性 编译后兼容所有浏览器 仅兼容现代浏览器（不支持 IE）
用途 预处理计算、代码复用 动态主题切换、运行时交互

也就是说, next 主题源代码中的代码块渲染是写死的. 这对我们来说当然是不可接受的, 所以我们需要把所有的 $ 变量改成 -- 变量. 二者在部分语法上有一些区别, 比如 $ 变量的赋值方法是等号 = 赋值, 而 -- 变量的赋值方法是 --a : var(--b), 并且后者必须位于某个元素内, 这些需要在修改的同时注意.

根据选定主题决定具体颜色的部分就在第一个 import 里面, 也就是同一级的 theme.styl 中:

1
2
3
4
5
6
7
8
9
10
11
if (--highlight-theme == 'night') {
  $highlight-background   = #1d1f21;
  $highlight-current-line = #282a2e;
  $highlight-selection    = #373b41;
  ...
} else if (--highlight-theme == 'night eighties') {
  $highlight-background   = #2d2d2d;
  $highlight-current-line = #393939;
  $highlight-selection    = #515151;
  ...
} ...

那这些当然也要改了. 里面有一些 $ 变量还有自己的属性, 也需要拆成若干个独立的 -- 变量来实现.

我们希望对明亮模式和黑暗模式各指定一个代码块颜色主题, 所以还要把原来的一个变量 $highlight-theme 改成两个变量 $highlight-theme-light,$highlight-theme-dark. 逻辑也顺便改一下就好了: 把设置颜色的代码整合成一个大函数, 并使用 @media (prefers-color-scheme: light / dark) 判断当前的浏览器主题, 来分别传入对应的颜色主题名, 配置颜色即可.

别问为什么代码块的颜色和行间代码的颜色对不上, 它本来就是这样的.

之后就是一些不太重要的更新了, 比如友链中添加了 bdpqpqbd 的主页, 虽然它目前为止还是这样的:

图片加载失败! 标签: bdpqpqbd homepage 标题: bdpq 内容: pqbd

他最好能在 Golden PH 开赛之前做出一个像样的网站. 但无论如何, 上一篇文章结尾中, 有个人网站的人数已经增加到了 5! (不是阶乘的意思.)