优化 minimal-mistakes-plus

[neveler]

优化 minimal-mistakes-plus

变更

• 通过使用 css 变量合并所有皮肤的样式到 main.css
• 重构 Catppuccin 系列皮肤
• 默认在生产环境启用 css 变量压缩 (main.css)

描述

通过使用 css 变量合并所有皮肤的样式到 main.css 后，样式体积略有上升但在可接受的范围内。

经统计 main.css 应用变更前文件大小约为 72.7 kB 应用后文件大小约为 96.0 kB
服务端启用压缩的情况下，应用变更前实际传输流量约 15.9 kB 应用后实际传输流量约为 23.9 kB

皮肤样式合并后，由于避免了新的网络请求，因此切换皮肤时将不再有明显卡顿。

---

https://minimal-mistakes-plus-docs.hmcl.workers.dev

[zkitefly]

@codex review

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[zkitefly]

_sass/minimal-mistakes-plus/skins/_catppuccin-mocha.scss
"maroon": #020202, // 这里 maroon 为纯黑色，和 Catppuccin Mocha 的官方调色板 #eba0ac (淡粉红) 不一致，易导致主题显示反常。建议校验。

_sass/minimal-mistakes-plus.scss
border-left: 1px solid $text-color; // 建议检查 $text-color 配置正确，否则边框表现会异常。

_data/settings.yaml

• catppuccin_latte -> catppuccin-latte (连字符修改，一定要确认前端/后端代码引用是否全部同步调整，防止皮肤丢失)
• catppuccin_mocha -> catppuccin-mocha（同上）
• 新增 frappe, macchiato（需确认相关实现/文件是否完备）

[neveler]

_sass/minimal-mistakes-plus.scss border-left: 1px solid $text-color; // 建议检查 $text-color 配置正确，否则边框表现会异常。

鉴于使用 $border-color 在部分主题中可能导致与 notice 背景的对比度过低，故改用 $text-color，以避免在某些主题下出现颜色对比不足的问题。

_data/settings.yaml

• catppuccin_latte -> catppuccin-latte (连字符修改，一定要确认前端/后端代码引用是否全部同步调整，防止皮肤丢失)
• catppuccin_mocha -> catppuccin-mocha（同上）
• 新增 frappe, macchiato（需确认相关实现/文件是否完备）

关于 catppuccin_latte 的重命名，主要是出于 SCSS 命名习惯考虑（通常使用 - 连接）。
此处并不会引入比较大的问题，当 data-skin 中的值无效时，css 会使用默认主题。

不过目前在获取和设置配置项值时，确实缺乏对取值有效性的校验（例如单选类型的配置项，其值应限定在 options 数组范围内）。后续我会考虑完善相关校验逻辑。

[zkitefly]

File: _sass/minimal-mistakes-plus/_common.scss

@@
 @function num-key($num, $str: "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz") {
   @if $num < 0 {
-    @return "-#{num62(-$num)}";
+    @return "-#{num-key(-$num)}";
   }
@@
   $configs: map-merge($configs, (#{$name}: $config))
 }

评论：

• 错误1（致命）：函数内调用了未定义的 num62，应该改成递归调用 num-key（如上所示）。否则编译会报“Undefined function num62”。
• 错误2（语法）："$configs: map-merge($configs, (#{$name}: $config))" 缺少结尾分号；应为 "$configs: map-merge($configs, (#{$name}: $config));"。这会导致 Sass 编译失败。

---

File: _sass/minimal-mistakes-plus/_page.scss

@@
 $paragraph-indent: skin-var("paragraph-indent");
 $indent-var: skin-var("indent-var");
@@
   p {
     margin: 0 0 $indent-var;
 
     /* sibling indentation*/
-    @if $paragraph-indent == true {
-      & + p {
-        text-indent: $indent-var;
-        margin-top: -($indent-var);
-      }
-    }
+    @if $paragraph-indent == true {
+      & + p {
+        text-indent: $indent-var;
+        margin-top: -($indent-var);
+      }
+    }
   }

评论：

• 逻辑问题：$paragraph-indent 是通过 skin-var() 得到的 CSS 变量（var(--...) 字符串），在编译期不是布尔类型。@if $paragraph-indent == true 永远为 false，缩进逻辑不会在编译期生效。需改为：
  • 在 Sass 层使用编译时配置（布尔型 Sass 变量）控制，或
  • 在运行时用 CSS 变量+选择器实现，不用 @if 做判断。
• 建议改成用 Sass 配置开关（例如 $paragraph-indent: true !default;）或把相关样式改为依赖 CSS 自定义属性（不使用 @if）。

---

File: assets/js/theme.js

@@
-  var skinLink = document.getElementById("skin");
   var darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
-  function applySkin(skin) {
-    skinLink.href = "{{ '/assets/css/skins/' | relative_url }}" + skin + ".css";
-  }
   function applyDarkSkin() {
-    applySkin(settings.get("appearance_skin.dark"));
+    document.documentElement.dataset["skin"] = settings.get("appearance_skin_dark", "dark");
   }
   function applyLightSkin() {
-    applySkin(settings.get("appearance_skin.light"));
+    document.documentElement.dataset["skin"] = settings.get("appearance_skin_light", "default");
   }
@@
   function autoSchemeHandler() {
     if (darkModeQuery.matches) {
@@

评论：

• 风险1：原代码通过 动态加载样式表；PR 中移除了该逻辑并改为设置 data-skin 属性（document.documentElement.dataset["skin"]），这是 OK 但请确认站点的 CSS/构建流程确实支持基于 [data-skin=...] 的样式（PR 中已新增大量 [data-skin=...] 选择器，需确认最终生成的 CSS 包含这些规则）。
• 风险2：settings.get 的键从 "appearance_skin.dark"/"appearance_skin.light" 改为 "appearance_skin_dark"/"appearance_skin_light"（下划线替代点号）。请确认 settings.get 的 API 接受这些新键名并且返回预期值；否则会得到 undefined，从而把 data-skin 设为 undefined。若原来是点号形式，应恢复或调用正确的 API。
• 建议：验证在实际运行时 settings.get(...) 返回字符串且 data-skin 被正确设置；或保留原来通过 link 元素动态加载编译好的 skin CSS 的方法。

---

File: assets/css/main.scss

@@
-@charset "utf-8";
-@import "minimal-mistakes/skins/default";
-@import "minimal-mistakes-plus";
+/**{{'/'}}
+{% if jekyll.environment == "production" %}
+$compress_css_variables: true;
+{% endif %}
+{% assign skins = site.data.settings.appearance_skin.options | uniq %}
+{% for skin in skins %}
+{% if skin != "default" %}
+@import "minimal-mistakes-plus/skins/{{ skin }}";
+{% endif %}
+{% endfor %}
+/**/
+
+@import "minimal-mistakes-plus";

评论：

• 可疑点：用 /{{'/'}} ... // 这种方式把 Liquid 包裹进 Sass 注释的写法不寻常，可能导致生成的中间 SCSS 包含不期望的字符或注释未正确闭合。请在构建（Jekyll -> Sass）后检查最终传给 Sass 的内容是否为合法 SCSS。
• 建议：用更明确的方式注入 Liquid 生成的 @import（例如直接在文件开头写 Liquid 块，确保输出的是有效的 @import 行），并确认生产/开发环境下 $compress_css_variables 的作用与预期一致。

[neveler]

• 逻辑问题：$paragraph-indent 是通过 skin-var() 得到的 CSS 变量（var(--...) 字符串），在编译期不是布尔类型。@if $paragraph-indent == true 永远为 false，缩进逻辑不会在编译期生效。需改为：

  • 在 Sass 层使用编译时配置（布尔型 Sass 变量）控制，或
  • 在运行时用 CSS 变量+选择器实现，不用 @if 做判断。

• 建议改成用 Sass 配置开关（例如 $paragraph-indent: true !default;）或把相关样式改为依赖 CSS 自定义属性（不使用 @if）。

这里我可能需要再想想。