HMCL-dev · neveler · Mar 18, 2026 · Mar 18, 2026 · Mar 18, 2026 · Mar 21, 2026
diff --git a/Gemfile b/Gemfile
@@ -8,7 +8,7 @@ source "https://rubygems.org"
 # This will help ensure the proper Jekyll version is running.
 # Happy Jekylling!
 gem "jekyll", "4.4.1"
-gem "minimal-mistakes-jekyll", "4.27.3"
+gem "minimal-mistakes-jekyll", "4.28.0"
 
 group :jekyll_plugins do
   gem "jekyll-paginate", "1.1.0"

diff --git a/_data/settings.yaml b/_data/settings.yaml
@@ -5,23 +5,19 @@ appearance_color:
     - light
     - dark
     - auto
-appearance_skin_light:
+appearance_color_switcher:
   type: radio
-  default: default
+  default: enable
   options:
-    - default
-    - air
-    - aqua
-    - contrast
-    - dark
-    - dirt
-    - neon
-    - mint
-    - plum
-    - sunrise
-appearance_skin_dark:
-  type: radio
-  default: dark
+    - enable
+    - disable
+appearance_skin:
+  type: multi-radio
+  children:
+    light:
+      default: default
+    dark:
+      default: dark
   options:
     - default
     - air
@@ -33,3 +29,5 @@ appearance_skin_dark:
     - mint
     - plum
     - sunrise
+    - catppuccin_latte
+    - catppuccin_mocha
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,6 +1,7 @@
+{% assign locale = include.locale | default: site.locale %}
 <meta charset="utf-8">
 
-{% include seo.html %}
+{% include seo.html locale=locale %}
 
 {% unless site.atom_feed.hide %}
   <link href="{% if site.atom_feed.path %}{{ site.atom_feed.path }}{% else %}{{ '/feed.xml' | relative_url }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ site.title }} Feed">

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,22 +1,23 @@
 ---
 layout: compress
 ---
+{%- assign locale = page.locale | default: layout.locale | default: site.locale %}
 
 <!doctype html>
 {% include copyright.html %}
-<html lang="{{ site.locale | replace: "_", "-" | default: "en" }}" class="no-js">
+<html lang="{{ locale | replace: "_", "-" | default: "en" }}" class="no-js">
   <head>
-    {% include head.html %}
+    {% include head.html locale=locale %}
     {% include head/custom.html %}
   </head>
 
   <body class="layout--{{ page.layout | default: layout.layout }}{% if page.classes or layout.classes %}{{ page.classes | default: layout.classes | join: ' ' | prepend: ' ' }}{% endif %}" dir="{% if site.rtl %}rtl{% else %}ltr{% endif %}">
     {% if site.preview and site.preview.pr-number %}
-    <div class="notice--warning text-center m0" style="position: sticky; top: 0; z-index: 999; padding: 0.4em;">当前站点为预览构建而非官方文档。如需反馈问题，请前往 <a href="https://github.com/HMCL-dev/HMCL-docs/pull/{{ site.preview.pr-number }}">#{{ site.preview.pr-number }}</a> 留言。</div>
+    <div class="notice--warning text-center preview">当前站点为预览构建而非官方文档。如需反馈问题，请前往 <a href="https://github.com/HMCL-dev/HMCL-docs/pull/{{ site.preview.pr-number }}">#{{ site.preview.pr-number }}</a> 留言。</div>
     {% endif %}
 
-    {% include_cached skip-links.html %}
-    {% include_cached masthead.html %}
+    {% include_cached skip-links.html locale=locale %}
+    {% include_cached masthead.html locale=locale %}
 
     <div class="initial-content">
       {{ content }}
@@ -25,17 +26,17 @@
 
     {% if site.search == true %}
       <div class="search-content">
-        {% include_cached search/search_form.html %}
+        {% include_cached search/search_form.html locale=locale %}
       </div>
     {% endif %}
 
     <div id="footer" class="page__footer">
       <footer>
         {% include footer/custom.html %}
-        {% include_cached footer.html %}
+        {% include_cached footer.html locale=locale %}
       </footer>
     </div>
 
-    {% include scripts.html %}
+    {% include scripts.html locale=locale %}
   </body>
 </html>
diff --git a/_layouts/settings.html b/_layouts/settings.html
@@ -1,46 +1,55 @@
 ---
-layout: document
+layout: single
 ---
 
-{% for group in page.data %}
-
-{% capture notice %}
-
-## {{ group.title }}
-
+{%- for group in page.data %}
+<h2 id="{{ group.title }}">{{ group.title }}</h2>
 {% for pair in group.settings %}
 {% assign name = pair[0] %}
 {% assign value = pair[1] %}
 {% assign setting = site.data.settings[name] %}
-
-{% if setting.type == 'radio' %}
 <div class="notice">
-  <ul class="task-list">
-    <li><strong>{{ value.title }}</strong></li>
-    <li>{{ value.description }}</li>
-    {% for option in setting.options %}
-    <li class="task-list-item">
-      <input type="radio" class="task-list-item-checkbox" name="{{ name }}" value="{{ option }}" id="{{ name }}_{{ option }}"{% if setting.default == option %} checked{% endif %}><label for="{{ name }}_{{ option }}">{{ value.options[option] }}</label>
-    </li>
-    {% endfor %}
-  </ul>
+  <h3 id="{{ group.title }}-{{ name }}">{{ value.title }}</h3>
+  {% if value.description %}<p>{{ value.description }}</p>{% endif %}
+  {% if setting.type == 'radio' %}
+  {% for option in setting.options %}
+  <label>
+    <input type="radio"{% if setting.default == option %} checked{% endif %} class="setting-item" name="{{ name }}" value="{{ option }}">
+    {{ value.options[option] }}
+  </label>
+  {% endfor %}
+  {% elsif setting.type == 'multi-radio' %}
+  <table class="setting-multi-radio">
+    <thead>
+      <tr>
+        <th>{{ value.title }}</th>
+        {% for item in setting.children %}
+        {% capture item_name %}{{ item[0] }}{% endcapture %}
+        <th>{{ value.children[item_name] }}</th>
+        {% endfor %}
+      </tr>
+    </thead>
+    <tbody>
+      {% for option in setting.options %}
+      <tr>
+        <th>{{ value.options[option] }}</th>
+        {% for item in setting.children %}
+        <td><input class="setting-item"{% if item[1].default == option %} checked{% endif %} type="radio" name="{{ name }}.{{ item[0] }}" value="{{ option }}"></td>
+        {% endfor %}
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+  {% endif %}
 </div>
+{% endfor %}
+{% endfor %}
 
 <script>
-  settings.onChange("{{ name }}", function (newValue, oldValue) {
-    var list = document.getElementsByName("{{ name }}");
-    for (var i = 0; i < list.length; i++) {
-      list[i].checked = list[i].value === newValue;
-      list[i].onchange = function () {
-        if (this.checked) {
-          settings.set(this.name, this.value);
-        }
-      }
-    }
-  });
+  for (const settingItem of document.getElementsByClassName("setting-item")) {
+    settingItem.addEventListener("change", ({ target }) => settings.set(target.name, target.value));
+    settings.onChange(settingItem.name, (value) => settingItem.type === "radio" && (settingItem.checked = settingItem.value === value));
+  }
 </script>
-{% endif %}
-{% endfor %}
-{% endcapture %}
-{{ notice | markdownify }}
-{% endfor %}
+
+<style>.notice label input { display: inline }</style>
diff --git a/_sass/minimal-mistakes-plus.scss b/_sass/minimal-mistakes-plus.scss
@@ -11,14 +11,31 @@ blockquote {
   word-break: break-word;
 }
 
-.notice ul:first-child {
-  margin-top: 0;
+.preview {
+  top: 0;
+  z-index: 999;
+  padding: 0.4em;
+  position: sticky;
+  margin: 0 !important;
 }
 
-.task-list-item label {
-  display: inline
+table.setting-multi-radio td {
+  border: 0;
+  text-align: center;
+  border-left: 1px solid mix(#000, $border-color, 25%);
 }
 
-.m0 {
-  margin: 0 !important;
+input[type="radio"] {
+  width: 0;
+  margin: 0;
+  margin-inline-end: 1em;
+  font-family: var(--fa-family-classic);
+}
+
+input[type="radio"]::before {
+  content: "\f111";
+}
+
+input[type="radio"]:checked::before {
+  content: "\f192";
 }
diff --git a/assets/css/skins/catppuccin_latte.scss b/assets/css/skins/catppuccin_latte.scss
@@ -0,0 +1,8 @@
+---
+---
+
+@charset "utf-8";
+
+$sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+@import "minimal-mistakes/skins/catppuccin_latte";
+@import "minimal-mistakes-plus";
diff --git a/assets/css/skins/catppuccin_mocha.scss b/assets/css/skins/catppuccin_mocha.scss
@@ -0,0 +1,8 @@
+---
+---
+
+@charset "utf-8";
+
+$sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+@import "minimal-mistakes/skins/catppuccin_mocha";
+@import "minimal-mistakes-plus";
diff --git a/assets/js/settings.js b/assets/js/settings.js
@@ -1,76 +1,36 @@
 ---
 layout: null
 ---
-(function (global) {
-  var PREFIX = "HMCL_DOCS_SETTINGS_";
-  var data = {};
-  var events = {};
-  var config = /*{%comment%}*/{}/*{%endcomment%}*//**{{'/'}}{{ site.data.settings | jsonify }}/**/;
-
-  global.addEventListener("storage", function (event) {
-    if (!event.key) return;
-    if (event.key.indexOf(PREFIX) !== 0) return;
-
-    var handlers = events[event.key];
-    if (!handlers) return;
-
-    var newValue = event.newValue;
-    var oldValue = event.oldValue;
-    if (oldValue === newValue) return;
-
-    data[event.key] = newValue;
-    for (var i = 0; i < handlers.length; i++) {
-      if (typeof handlers[i] === "function") {
-        handlers[i](newValue, oldValue);
-      }
+(function () {
+  const PREFIX = "HMCL_DOCS_SETTINGS_", data = {}, bus = new EventTarget(), configs = /*{%comment%}*/{}/*{%endcomment%}*/ /**{{'/'}}{{ site.data.settings | jsonify }}/**/;
+  window.addEventListener("storage", ({ key, newValue }) => key !== null && key.startsWith(PREFIX) && newValue !== data[key] && bus.dispatchEvent(new CustomEvent(key, { detail: (data[key] = newValue) })));
+  for (const [key, config] of Object.entries(configs)) {
+    if (config.children === undefined) continue; 
+    for (const [childKey, child] of Object.entries(config.children)) {
+      configs[`${key}.${childKey}`] = { ...config, ...child };
     }
-  });
-
-  var settings = {
-    set: function (key, value) {
-      if (config[key] === undefined) return;
-      var strKey = (PREFIX + key).toUpperCase();
-      var newValue = value + "";
-      data[strKey] = newValue;
-      localStorage.setItem(strKey, newValue);
-      var handlers = events[strKey];
-      if (!handlers) return;
-
-      for (var i = 0; i < handlers.length; i++) {
-        if (typeof handlers[i] === "function") {
-          handlers[i](newValue);
-        }
-      }
+  }
+  const formatKey = (key) => PREFIX + key.toUpperCase().replaceAll(".", "_");
+  window.settings = {
+    set(key, value) {
+      const name = formatKey(key);
+      localStorage.setItem(name, (data[name] = String(value)));
+      bus.dispatchEvent(new CustomEvent(name, { detail: data[name] }));
     },
-
-    get: function (key, defaultValue) {
-      if (config[key] === undefined) return;
-      var strKey = (PREFIX + key).toUpperCase();
-      data.hasOwnProperty(strKey) || (data[strKey] = localStorage.getItem(strKey));
-      if (typeof defaultValue === "string" && data[strKey] === null) {
-        return defaultValue;
-      }
-      return data[strKey];
+    get(key) {
+      const name = formatKey(key);
+      if (data[name] !== undefined) return data[name];
+      const value = localStorage.getItem(name);
+      if (value !== null) return data[name] = value;
+      const config = configs[key];
+      if (config === undefined || typeof config.default !== "string") return null;
+      return config.default;
     },
-
-    refresh: function (key) {
-      if (config[key] === undefined) return;
-      settings.set(key, settings.get(key, config[key].default));
+    onChange(key, handler) {
+      const value = this.get(key);
+      if (value === null) return;
+      handler(value);
+      bus.addEventListener(formatKey(key), (event) => handler(event.detail));
     },
-
-    onChange: function (key, handler) {
-      if (config[key] === undefined) return;
-      if (typeof handler !== "function") return;
-      var strKey = (PREFIX + key).toUpperCase();
-      if (config[key].type === "radio") {
-        handler(settings.get(key, config[key].default));
-      }
-      if (!events[strKey]) {
-        events[strKey] = [handler];
-      } else {
-        events[strKey].push(handler);
-      }
-    }
   };
-  global.settings = settings;
-})(window);
+})();
diff --git a/assets/js/theme.js b/assets/js/theme.js
@@ -4,11 +4,14 @@ layout: null
 window.addEventListener("DOMContentLoaded", function () {
   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() {
-    skinLink.href = "{{ '/assets/css/skins/' | relative_url }}" + settings.get("appearance_skin_dark", "dark") + ".css";
+    applySkin(settings.get("appearance_skin.dark"));
   }
   function applyLightSkin() {
-    skinLink.href = "{{ '/assets/css/skins/' | relative_url }}" + settings.get("appearance_skin_light", "default") + ".css";
+    applySkin(settings.get("appearance_skin.light"));
   }
   function autoSchemeHandler() {
     if (darkModeQuery.matches) {
@@ -61,10 +64,15 @@ window.addEventListener("DOMContentLoaded", function () {
     }
   }
   settings.onChange("appearance_color", applyTheme);
-  settings.onChange("appearance_skin_dark", function () {
-    settings.refresh("appearance_color");
+  settings.onChange("appearance_skin.dark", function () {
+    applyTheme(settings.get("appearance_color"));
+  });
+  settings.onChange("appearance_skin.light", function () {
+    applyTheme(settings.get("appearance_color"));
   });
-  settings.onChange("appearance_skin_light", function () {
-    settings.refresh("appearance_color");
+  settings.onChange("appearance_color_switcher", function (value) {
+    if (modeSwitcher !== null) {
+      modeSwitcher.style.display = value === "enable" ? "" : "none";
+    }
   });
 });