添加了本地状态记录

pages/changelog.md

@@ -1,5 +1,8 @@
 # 更新信息
 
+#### 2025-07-21
+- 添加了本地状态存储
+
 #### 2025-07-19
 - 补充了目录图标
 - 整理并添加了新的板块

script/otto.js

@@ -10,8 +10,11 @@ var ottos = [
     "/images/otto-rd2-xmas-compressed.png",
     "/images/otto-traditional.png",
 ]
+function getCurrentImage() {
+    ottoIndex = (ottoIndex) % ottos.length;
+    return ottos[ottoIndex];
+}
 var ottoIndex = 0;
-
 function showOtto(callback) {
     node.style.opacity = 1;
     anim = node.animate([
@@ -37,13 +40,13 @@ function hideOtto(callback) {
     }
 }
 
-window.onload = function () {
+window.addEventListener("load", function () {
     fetch("tips.json").then(response => response.json()).then(data => {
         tipTexts = data;
     });
     addOtto(document);
     showOtto()
-}
+})
 
 
 window.$docsify.onOttoShow = function () {
@@ -57,9 +60,14 @@ window.$docsify.onOttoShow = function () {
     } else {
         hideOtto();
         ottoIndex++;
+        window.localStorage.setItem('ottoIndex', ottoIndex);
     }
 }
 function addOtto(document) {
+    let localStorageOttoIndex = window.localStorage.getItem('ottoIndex');
+    if (localStorageOttoIndex !== null) {
+        ottoIndex = parseInt(localStorageOttoIndex);
+    }
     node = document.createElement("div");
     node.className = "otto";
     image = document.createElement("img");
@@ -117,8 +125,3 @@ function playTips() {
 function randomTips() {
     return tipTexts[Math.floor(Math.random() * tipTexts.length)];
 }
-
-function getCurrentImage() {
-    ottoIndex = (ottoIndex) % ottos.length;
-    return ottos[ottoIndex];
-}

script/switchLightDarkMode.js

@@ -14,37 +14,22 @@ var switchLightDarkModeOptions = {
     svgColor: '#7d7b75',
 }
 
-window.$docsify.currentThemeModeIndex = 2;
+const themeModes = ['light', 'dark', 'auto',]
 
-// Docsify plugin functions
+var switchSpan = document.createElement('span')
-function plugin(hook, vm) {
 
-    if (!switchLightDarkModeOptions.useSwitchMode) {
+switchSpan.id = 'switchLightDarkModeDivBeforeArticle'
-        return
+switchSpan.style.position = 'fixed'
-    }
+switchSpan.style.right = switchLightDarkModeOptions.right.toString() + 'px'
+switchSpan.style.top = switchLightDarkModeOptions.top.toString() + 'px'
 
-    let themeModes = ['light', 'dark', 'auto',]
+const lightModeIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M12 18a6 6 0 100-12 6 6 0 000 12zM22 12h1M12 2V1M12 23v-1M20 20l-1-1M20 4l-1 1M4 20l1-1M4 4l1 1M1 12h1" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-
+const darkModeIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M3 11.507a9.493 9.493 0 0018 4.219c-8.507 0-12.726-4.22-12.726-12.726A9.494 9.494 0 003 11.507z" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-    let currentThemeModeIndex = 2
+const autoModeIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M3 15c2.483 0 4.345-3 4.345-3s1.862 3 4.345 3c2.482 0 4.965-3 4.965-3s2.483 3 4.345 3M3 20c2.483 0 4.345-3 4.345-3s1.862 3 4.345 3c2.482 0 4.965-3 4.965-3s2.483 3 4.345 3M19 10a7 7 0 10-14 0" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-
+const zoomInIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M8 11h3m3 0h-3m0 0V8m0 3v3M17 17l4 4M3 11a8 8 0 1016 0 8 8 0 00-16 0z" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-    hook.mounted(function () {
+const zoomOutIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M17 17l4 4M3 11a8 8 0 1016 0 8 8 0 00-16 0zM8 11h6" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-        // let lightTheme = Docsify.dom.findAll('[href="/style/light.css"]')[0]
+const zoomDefaultIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M12 19a7 7 0 100-14 7 7 0 000 14zM12 19v2M5 12H3M12 5V3M19 12h2" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-        // let darkTheme = Docsify.dom.findAll('[href="/style/dark.css"]')[0]
+const ottoIconXml = `
-
-        var switchSpan = document.createElement('span')
-
-        switchSpan.id = 'switchLightDarkModeDivBeforeArticle'
-        switchSpan.style.position = 'fixed'
-        switchSpan.style.right = switchLightDarkModeOptions.right.toString() + 'px'
-        switchSpan.style.top = switchLightDarkModeOptions.top.toString() + 'px'
-
-        const lightModeIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M12 18a6 6 0 100-12 6 6 0 000 12zM22 12h1M12 2V1M12 23v-1M20 20l-1-1M20 4l-1 1M4 20l1-1M4 4l1 1M1 12h1" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-        const darkModeIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M3 11.507a9.493 9.493 0 0018 4.219c-8.507 0-12.726-4.22-12.726-12.726A9.494 9.494 0 003 11.507z" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-        const autoModeIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M3 15c2.483 0 4.345-3 4.345-3s1.862 3 4.345 3c2.482 0 4.965-3 4.965-3s2.483 3 4.345 3M3 20c2.483 0 4.345-3 4.345-3s1.862 3 4.345 3c2.482 0 4.965-3 4.965-3s2.483 3 4.345 3M19 10a7 7 0 10-14 0" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-        const zoomInIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M8 11h3m3 0h-3m0 0V8m0 3v3M17 17l4 4M3 11a8 8 0 1016 0 8 8 0 00-16 0z" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-        const zoomOutIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M17 17l4 4M3 11a8 8 0 1016 0 8 8 0 00-16 0zM8 11h6" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-        const zoomDefaultIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M12 19a7 7 0 100-14 7 7 0 000 14zM12 19v2M5 12H3M12 5V3M19 12h2" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-        const ottoIconXml = `
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="26px" height="30px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24" color="` + switchLightDarkModeOptions.svgColor + `" stroke="` + switchLightDarkModeOptions.svgColor + `" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
   <path class="st0" d="M17.5,12.9c0,1-.1,1.8-1,1.8s-1.6-.8-1.6-1.8.7-1.8,1.6-1.8,1,.8,1,1.8Z"/>
@@ -61,38 +46,59 @@ function plugin(hook, vm) {
   <line class="st0" x1="16.8" y1="11.1" x2="16.8" y2="1.4"/>
 </svg>
 `
-        let setThemeMode = function (currentTheme) {
+let setThemeMode = function (currentTheme) {
-            switch (currentTheme) {
+    switch (currentTheme) {
-            case 'light':
+    case 'light':
-                // lightTheme.disabled = false
+        document.body.classList.remove('dark')
-                // darkTheme.disabled = true
+        document.body.classList.add('light')
-                document.body.classList.remove('dark')
+        switchSpan.innerHTML = lightModeIconXml
-                document.body.classList.add('light')
+        break
-                switchSpan.innerHTML = lightModeIconXml
+    case 'dark':
-                break
+        document.body.classList.remove('light')
-            case 'dark':
+        document.body.classList.add('dark')
-                // lightTheme.disabled = true
+        switchSpan.innerHTML = darkModeIconXml
-                // darkTheme.disabled = false
+        break
-                document.body.classList.remove('light')
+    case 'auto':
-                document.body.classList.add('dark')
+        var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-                switchSpan.innerHTML = darkModeIconXml
+        if (isDarkMode) {
-                break
+            document.body.classList.remove('light')
-            case 'auto':
+            document.body.classList.add('dark')
-                var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-                // lightTheme.disabled = isDarkMode
-                // darkTheme.disabled = !isDarkMode
-                if (isDarkMode) {
-                    document.body.classList.remove('light')
-                    document.body.classList.add('dark')
-                }
-                else {
-                    document.body.classList.remove('dark')
-                    document.body.classList.add('light')
-                }
-                switchSpan.innerHTML = autoModeIconXml
-                break
-            }
         }
+        else {
+            document.body.classList.remove('dark')
+            document.body.classList.add('light')
+        }
+        switchSpan.innerHTML = autoModeIconXml
+        break
+    }
+}
+
+window.$docsify.currentThemeModeIndex = 2;
+
+// Docsify plugin functions
+function plugin(hook, vm) {
+
+    if (!switchLightDarkModeOptions.useSwitchMode) {
+        return
+    }
+
+    let localStorageCurrentThemeModeIndex = window.localStorage.getItem('currentThemeModeIndex')
+    let currentThemeModeIndex = 2
+    if (localStorageCurrentThemeModeIndex !== null) {
+        currentThemeModeIndex = parseInt(window.localStorage.getItem('currentThemeModeIndex'))
+    }
+    window.$docsify.currentThemeModeIndex = currentThemeModeIndex
+    console.log(window.localStorage)
+    setThemeMode(themeModes[currentThemeModeIndex])
+    window.localStorage.setItem('currentThemeModeIndex', currentThemeModeIndex)
+    if (window.$docsify.onLightDarkModeChange) {
+        window.$docsify.onLightDarkModeChange();
+    }
+
+    hook.mounted(function () {
+        // let lightTheme = Docsify.dom.findAll('[href="/style/light.css"]')[0]
+        // let darkTheme = Docsify.dom.findAll('[href="/style/dark.css"]')[0]
+
 
         setThemeMode(themeModes[currentThemeModeIndex])
         let preferredThemeChangeEventListenerFunction = function () {
@@ -111,6 +117,8 @@ function plugin(hook, vm) {
             }
             window.$docsify.currentThemeModeIndex = currentThemeModeIndex
             setThemeMode(themeModes[currentThemeModeIndex])
+            window.localStorage.setItem('currentThemeModeIndex', currentThemeModeIndex)
+            console.log('currentThemeModeIndex', window.localStorage.getItem('currentThemeModeIndex'))
             if (window.$docsify.onLightDarkModeChange) {
                 window.$docsify.onLightDarkModeChange();
             }