添加设置页 (#362)

_config.yml

@@ -139,8 +139,6 @@ defaults:
 
 # Theme Settings
 theme: minimal-mistakes-jekyll
-minimal_mistakes_skin: default # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
-minimal_mistakes_skin_dark: dark
 
 # Site Settings
 locale: zh
@@ -309,6 +307,7 @@ compress_html:
     envs: development
 
 head_scripts:
+  - /assets/js/settings.js
   - /assets/js/theme.js
 after_footer_scripts:
   - /assets/js/plugins/jquery.auto-redirect.js

_data/navigation.yml

@@ -1,6 +1,8 @@
 main:
   - title: 常见问题
     url: /faq.html
+  - title: 设置
+    url: /settings.html
 
 docs:
   - title: 问题集合

_data/settings.yaml

@@ -0,0 +1,35 @@
+appearance_color:
+  type: radio
+  default: light
+  options:
+    - light
+    - dark
+    - auto
+appearance_skin_light:
+  type: radio
+  default: default
+  options:
+    - default
+    - air
+    - aqua
+    - contrast
+    - dark
+    - dirt
+    - neon
+    - mint
+    - plum
+    - sunrise
+appearance_skin_dark:
+  type: radio
+  default: dark
+  options:
+    - default
+    - air
+    - aqua
+    - contrast
+    - dark
+    - dirt
+    - neon
+    - mint
+    - plum
+    - sunrise

_includes/head/custom.html

@@ -1 +1,2 @@
 <link rel="shortcut icon" href="{{ '/favicon.ico' | relative_url }}">
+<link rel="stylesheet" id="skin">

_layouts/settings.html

@@ -0,0 +1,46 @@
+---
+layout: document
+---
+
+{% for group in page.data %}
+
+{% 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">
+  <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>
+</div>
+
+<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);
+        }
+      }
+    }
+  });
+</script>
+{% endif %}
+{% endfor %}
+{% endcapture %}
+{{ notice | markdownify }}
+{% endfor %}

_sass/minimal-mistakes-plus.scss

@@ -1,16 +1,24 @@
-@import "minimal-mistakes";
-
-blockquote {
-  margin-inline: 0;
-  font-style: normal;
-}
-
-a, span, code, kbd, pre, em, strong, b, i {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-}
-
-.m0 {
-  margin: 0 !important;
-}
+@import "minimal-mistakes";
+
+blockquote {
+  margin-inline: 0;
+  font-style: normal;
+}
+
+* {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.notice ul:first-child {
+  margin-top: 0;
+}
+
+.task-list-item label {
+  display: inline
+}
+
+.m0 {
+  margin: 0 !important;
+}

assets/css/main.scss

@@ -1,8 +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/{{ site.minimal_mistakes_skin | default: 'default' }}";
-@import "minimal-mistakes-plus";
+---
+---
+
+@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/default";
+@import "minimal-mistakes-plus";

assets/css/skins/air.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/air";
+@import "minimal-mistakes-plus";

assets/css/skins/aqua.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/aqua";
+@import "minimal-mistakes-plus";

assets/css/skins/contrast.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/contrast";
+@import "minimal-mistakes-plus";

assets/css/skins/dark.scss

@@ -1,8 +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/{{ site.minimal_mistakes_skin_dark | default: 'dark' }}";
-@import "minimal-mistakes-plus";
+---
+---
+
+@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/dark";
+@import "minimal-mistakes-plus";

assets/css/skins/default.scss

@@ -0,0 +1,2 @@
+---
+---

assets/css/skins/dirt.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/dirt";
+@import "minimal-mistakes-plus";

assets/css/skins/mint.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/mint";
+@import "minimal-mistakes-plus";

assets/css/skins/neon.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/neon";
+@import "minimal-mistakes-plus";

assets/css/skins/plum.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/plum";
+@import "minimal-mistakes-plus";

assets/css/skins/sunrise.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/sunrise";
+@import "minimal-mistakes-plus";

assets/js/settings.js

@@ -0,0 +1,76 @@
+---
+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);
+      }
+    }
+  });
+
+  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);
+        }
+      }
+    },
+
+    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];
+    },
+
+    refresh: function (key) {
+      if (config[key] === undefined) return;
+      settings.set(key, settings.get(key, config[key].default));
+    },
+
+    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

@@ -1,45 +1,70 @@
----
-layout: null
----
-var darkTheme = document.createElement("link");
-darkTheme.rel = "stylesheet alternate";
-darkTheme.href = "{{ '/assets/css/dark.css' | relative_url }}";
-document.head.appendChild(darkTheme);
-window.addEventListener("DOMContentLoaded", function () {
-    var list = document.querySelector(".masthead .visible-links");
-    if (!list) return;
-    var mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    function handler() {
-        darkTheme.rel = mediaQuery.matches ? "stylesheet" : "stylesheet alternate";
-    }
-    var current = 0;
-    var modes = ["light", "dark", "auto"];
-    var modeNames = ["亮色", "暗色", "自动"];
-    var switcher = document.createElement("a");
-    switcher.className = "masthead__menu-item";
-    switcher.innerText = modeNames[current];
-    switcher.href = "javascript:;";
-    switcher.onclick = function () {
-        themeApply(current + 1);
-    }
-    list.appendChild(switcher);
-    function themeApply(index) {
-        index = (Number(index) || 0) % modes.length;
-        if (index === current) return;
-        if (modes[current] === "auto") mediaQuery.removeEventListener("change", handler);
-        current = index;
-        var mode = modes[current];
-        switcher.innerText = modeNames[current];
-        localStorage.setItem("theme", current);
-        if (mode === "light") darkTheme.rel = "stylesheet alternate";
-        else if (mode === "dark") darkTheme.rel = "stylesheet";
-        else {
-            mediaQuery.addEventListener("change", handler);
-            handler();
-        }
-    }
-    themeApply(localStorage.getItem("theme"));
-    window.addEventListener("storage", function (event) {
-        event.key === "theme" && themeApply(event.newValue);
-    });
-});
+---
+layout: null
+---
+window.addEventListener("DOMContentLoaded", function () {
+  var skinLink = document.getElementById("skin");
+  var darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  function applyDarkSkin() {
+    skinLink.href = "{{ '/assets/css/skins/' | relative_url }}" + settings.get("appearance_skin_dark", "dark") + ".css";
+  }
+  function applyLightSkin() {
+    skinLink.href = "{{ '/assets/css/skins/' | relative_url }}" + settings.get("appearance_skin_light", "default") + ".css";
+  }
+  function autoSchemeHandler() {
+    if (darkModeQuery.matches) {
+      applyDarkSkin();
+    } else {
+      applyLightSkin();
+    }
+  }
+  var activeModeIndex = 0;
+  var modeKeys = ["light", "dark", "auto"];
+  var modeLabels = ["亮色", "暗色", "自动"];
+
+  var menuList = document.querySelector(".masthead .visible-links");
+  var modeSwitcher = null;
+  if (menuList) {
+    modeSwitcher = document.createElement("a");
+    modeSwitcher.className = "masthead__menu-item";
+    modeSwitcher.textContent = modeLabels[activeModeIndex];
+    modeSwitcher.href = "javascript:;";
+    modeSwitcher.onclick = function () {
+      var nextIndex = (activeModeIndex + 1) % modeKeys.length;
+      settings.set("appearance_color", modeKeys[nextIndex]);
+    }
+    menuList.appendChild(modeSwitcher);
+  }
+  function applyTheme(mode) {
+    var newIndex = modeKeys.indexOf(mode);
+    if (newIndex < 0) newIndex = 0;
+
+    if (modeKeys[activeModeIndex] === "auto") {
+      darkModeQuery.removeEventListener("change", autoSchemeHandler);
+    }
+
+    activeModeIndex = newIndex;
+    var resolvedMode = modeKeys[activeModeIndex];
+
+    if (modeSwitcher) {
+      modeSwitcher.textContent = modeLabels[activeModeIndex];
+    }
+
+    if (resolvedMode === "light") {
+      applyLightSkin();
+    }
+    else if (resolvedMode === "dark") {
+      applyDarkSkin();
+    }
+    else {
+      darkModeQuery.addEventListener("change", autoSchemeHandler);
+      autoSchemeHandler();
+    }
+  }
+  settings.onChange("appearance_color", applyTheme);
+  settings.onChange("appearance_skin_dark", function () {
+    settings.refresh("appearance_color");
+  });
+  settings.onChange("appearance_skin_light", function () {
+    settings.refresh("appearance_color");
+  });
+});

settings.yaml

@@ -0,0 +1,43 @@
+---
+title: 设置
+layout: settings
+permalink: /settings.html
+data:
+  - title: 外观
+    settings:
+      appearance_color:
+        title: 颜色模式
+        description: 用于切换站点主题颜色模式。
+        options:
+          light: 亮色
+          dark: 暗色
+          auto: 自动
+      appearance_skin_light:
+        title: 亮色皮肤
+        description: 亮色模式下应用的皮肤。
+        options:
+          default: 默认
+          air: 天空
+          aqua: 水蓝
+          contrast: 高对比
+          dark: 暗色
+          dirt: 泥土
+          neon: 霓虹
+          mint: 薄荷
+          plum: 梅紫
+          sunrise: 日出
+      appearance_skin_dark:
+        title: 暗色皮肤
+        description: 暗色模式下应用的皮肤。
+        options:
+          default: 默认
+          air: 天空
+          aqua: 水蓝
+          contrast: 高对比
+          dark: 暗色
+          dirt: 泥土
+          neon: 霓虹
+          mint: 薄荷
+          plum: 梅紫
+          sunrise: 日出
+---