_config.yml

@@ -9,7 +9,6 @@
 # data_dir: _data
 # includes_dir: _includes
 # cache_dir: .jekyll-cache
-disable_disk_cache: true
 sass:
   # sass_dir: _sass
   # minimal-mistakes

_data/settings.yaml

@@ -5,19 +5,25 @@ appearance_color:
     - light
     - dark
     - auto
-appearance_color_switcher:
+appearance_skin_light:
   type: radio
-  default: enable
+  default: default
-  options:
+  options:
-    - enable
+    - default
-    - disable
+    - air
-appearance_skin:
+    - aqua
-  type: multi-radio
+    - contrast
-  children:
+    - dark
-    light:
+    - dirt
-      default: default
+    - neon
-    dark:
+    - mint
-      default: dark
+    - plum
+    - sunrise
+    - catppuccin_latte
+    - catppuccin_mocha
+appearance_skin_dark:
+  type: radio
+  default: dark
   options:
     - default
     - air

_layouts/settings.html

@@ -1,55 +1,46 @@
 ---
-layout: single
+layout: document
 ---
 
-{%- for group in page.data %}
+{% for group in page.data %}
-<h2 id="{{ group.title }}">{{ group.title }}</h2>
+
+{% capture notice %}
+
+## {{ group.title }}
+
 {% 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">
-  <h3 id="{{ name }}">{{ value.title }}</h3>
+  <ul class="task-list">
-  {% if value.description %}<p>{{ value.description }}</p>{% endif %}
+    <li><strong>{{ value.title }}</strong></li>
-  {% if setting.type == 'radio' %}
+    <li>{{ value.description }}</li>
-  {% for option in setting.options %}
+    {% for option in setting.options %}
-  <label>
+    <li class="task-list-item">
-    <input type="radio"{% if setting.default == option %} checked{% endif %} class="setting-item" name="{{ name }}" value="{{ option }}">
+      <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>
-    {{ value.options[option] }}
+    </li>
-  </label>
+    {% endfor %}
-  {% endfor %}
+  </ul>
-  {% 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>
-  for (const settingItem of document.getElementsByClassName("setting-item")) {
+  settings.onChange("{{ name }}", function (newValue, oldValue) {
-    settingItem.addEventListener("change", ({ target }) => settings.set(target.name, target.value));
+    var list = document.getElementsByName("{{ name }}");
-    settings.onChange(settingItem.name, (value) => settingItem.type === "radio" && (settingItem.checked = settingItem.value === value));
+    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);
+        }
+      }
+    }
+  });
 </script>
-
+{% endif %}
-<style>.notice label input { display: inline }</style>
+{% endfor %}
+{% endcapture %}
+{{ notice | markdownify }}
+{% endfor %}

_sass/minimal-mistakes-plus.scss

@@ -47,27 +47,10 @@ blockquote {
   word-break: break-word;
 }
 
+.task-list-item label {
+  display: inline
+}
+
 .m0 {
   margin: 0 !important;
 }
-
-table.setting-multi-radio td {
-  border: 0;
-  text-align: center;
-  border-left: 1px solid mix(#000, $border-color, 25%);
-}
-
-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";
-}

assets/js/settings.js

@@ -1,36 +1,76 @@
 ---
 layout: null
 ---
-(function () {
+(function (global) {
-  const PREFIX = "HMCL_DOCS_SETTINGS_", data = {}, bus = new EventTarget(), configs = /*{%comment%}*/{}/*{%endcomment%}*/ /**{{'/'}}{{ site.data.settings | jsonify }}/**/;
+  var PREFIX = "HMCL_DOCS_SETTINGS_";
-  window.addEventListener("storage", ({ key, newValue }) => key !== null && key.startsWith(PREFIX) && newValue !== data[key] && bus.dispatchEvent(new CustomEvent(key, { detail: (data[key] = newValue) })));
+  var data = {};
-  for (const [key, config] of Object.entries(configs)) {
+  var events = {};
-    if (config.children === undefined) continue; 
+  var config = /*{%comment%}*/{}/*{%endcomment%}*//**{{'/'}}{{ site.data.settings | jsonify }}/**/;
-    for (const [childKey, child] of Object.entries(config.children)) {
+
-      configs[`${key}.${childKey}`] = { ...config, ...child };
+  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);
+      }
     }
-  }
+  });
-  const formatKey = (key) => PREFIX + key.toUpperCase().replaceAll(".", "_");
+
-  window.settings = {
+  var settings = {
-    set(key, value) {
+    set: function (key, value) {
-      const name = formatKey(key);
+      if (config[key] === undefined) return;
-      localStorage.setItem(name, (data[name] = String(value)));
+      var strKey = (PREFIX + key).toUpperCase();
-      bus.dispatchEvent(new CustomEvent(name, { detail: data[name] }));
+      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);
+        }
+      }
     },
-    get(key) {
+
-      const name = formatKey(key);
+    get: function (key, defaultValue) {
-      if (data[name] !== undefined) return data[name];
+      if (config[key] === undefined) return;
-      const value = localStorage.getItem(name);
+      var strKey = (PREFIX + key).toUpperCase();
-      if (value !== null) return data[name] = value;
+      data.hasOwnProperty(strKey) || (data[strKey] = localStorage.getItem(strKey));
-      const config = configs[key];
+      if (typeof defaultValue === "string" && data[strKey] === null) {
-      if (config === undefined || typeof config.default !== "string") return null;
+        return defaultValue;
-      return config.default;
+      }
+      return data[strKey];
     },
-    onChange(key, handler) {
+
-      const value = this.get(key);
+    refresh: function (key) {
-      if (value === null) return;
+      if (config[key] === undefined) return;
-      handler(value);
+      settings.set(key, settings.get(key, config[key].default));
-      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);

assets/js/theme.js

@@ -4,14 +4,11 @@ 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() {
-    applySkin(settings.get("appearance_skin.dark"));
+    skinLink.href = "{{ '/assets/css/skins/' | relative_url }}" + settings.get("appearance_skin_dark", "dark") + ".css";
   }
   function applyLightSkin() {
-    applySkin(settings.get("appearance_skin.light"));
+    skinLink.href = "{{ '/assets/css/skins/' | relative_url }}" + settings.get("appearance_skin_light", "default") + ".css";
   }
   function autoSchemeHandler() {
     if (darkModeQuery.matches) {
@@ -64,15 +61,10 @@ window.addEventListener("DOMContentLoaded", function () {
     }
   }
   settings.onChange("appearance_color", applyTheme);
-  settings.onChange("appearance_skin.dark", function () {
+  settings.onChange("appearance_skin_dark", function () {
-    applyTheme(settings.get("appearance_color"));
+    settings.refresh("appearance_color");
   });
-  settings.onChange("appearance_skin.light", function () {
+  settings.onChange("appearance_skin_light", function () {
-    applyTheme(settings.get("appearance_color"));
+    settings.refresh("appearance_color");
-  });
-  settings.onChange("appearance_color_switcher", function (value) {
-    if (modeSwitcher !== null) {
-      modeSwitcher.style.display = value === "enable" ? "" : "none";
-    }
   });
 });

settings.yaml

@@ -12,18 +12,25 @@ data:
           light: 亮色
           dark: 暗色
           auto: 自动
-      appearance_color_switcher:
+      appearance_skin_light:
-        title: 颜色模式快捷开关
+        title: 亮色皮肤
-        description: 用于快捷切换站点主题颜色模式的开关，位于页面右上角。
+        description: 亮色模式下应用的皮肤。
         options:
-          enable: 启用
+          default: 默认 (Default)
-          disable: 禁用
+          air: 天空 (Air)
-      appearance_skin:
+          aqua: 水蓝 (Aque)
-        title: 皮肤
+          contrast: 高对比 (Contrast)
-        description: 各颜色模式下应用的皮肤。
+          dark: 暗色 (Dark)
-        children:
+          dirt: 泥土 (Dirt)
-          light: 亮色
+          neon: 霓虹 (Neno)
-          dark: 暗色
+          mint: 薄荷 (Mint)
+          plum: 梅紫 (Plum)
+          sunrise: 日出 (Sunrise)
+          catppuccin_latte: Catppuccin Latte
+          catppuccin_mocha: Catppuccin Mocha
+      appearance_skin_dark:
+        title: 暗色皮肤
+        description: 暗色模式下应用的皮肤。
         options:
           default: 默认 (Default)
           air: 天空 (Air)