From ac39d732b7f22154a3c0c6177ae772a92dbb1478 Mon Sep 17 00:00:00 2001 From: OLDREDSTONE Date: Mon, 21 Jul 2025 00:48:56 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=86=E6=9C=AC=E5=9C=B0?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E8=AE=B0=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/changelog.md | 3 + script/otto.js | 19 ++--- script/switchLightDarkMode.js | 126 ++++++++++++++++++---------------- 3 files changed, 81 insertions(+), 67 deletions(-) diff --git a/pages/changelog.md b/pages/changelog.md index 1ba82ea..cba68dc 100644 --- a/pages/changelog.md +++ b/pages/changelog.md @@ -1,5 +1,8 @@ # 更新信息 +#### 2025-07-21 +- 添加了本地状态存储 + #### 2025-07-19 - 补充了目录图标 - 整理并添加了新的板块 diff --git a/script/otto.js b/script/otto.js index 0311eb6..ce81c0a 100644 --- a/script/otto.js +++ b/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]; -} \ No newline at end of file diff --git a/script/switchLightDarkMode.js b/script/switchLightDarkMode.js index 8b43959..70ee494 100644 --- a/script/switchLightDarkMode.js +++ b/script/switchLightDarkMode.js @@ -14,37 +14,22 @@ var switchLightDarkModeOptions = { svgColor: '#7d7b75', } -window.$docsify.currentThemeModeIndex = 2; +const themeModes = ['light', 'dark', 'auto',] -// Docsify plugin functions -function plugin(hook, vm) { +var switchSpan = document.createElement('span') - if (!switchLightDarkModeOptions.useSwitchMode) { - return - } +switchSpan.id = 'switchLightDarkModeDivBeforeArticle' +switchSpan.style.position = 'fixed' +switchSpan.style.right = switchLightDarkModeOptions.right.toString() + 'px' +switchSpan.style.top = switchLightDarkModeOptions.top.toString() + 'px' - let themeModes = ['light', 'dark', 'auto',] - - let currentThemeModeIndex = 2 - - hook.mounted(function () { - // let lightTheme = Docsify.dom.findAll('[href="/style/light.css"]')[0] - // let darkTheme = Docsify.dom.findAll('[href="/style/dark.css"]')[0] - - 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 = '' - const darkModeIconXml = '' - const autoModeIconXml = '' - const zoomInIconXml = '' - const zoomOutIconXml = '' - const zoomDefaultIconXml = '' - const ottoIconXml = ` +const lightModeIconXml = '' +const darkModeIconXml = '' +const autoModeIconXml = '' +const zoomInIconXml = '' +const zoomOutIconXml = '' +const zoomDefaultIconXml = '' +const ottoIconXml = ` @@ -61,38 +46,59 @@ function plugin(hook, vm) { ` - let setThemeMode = function (currentTheme) { - switch (currentTheme) { - case 'light': - // lightTheme.disabled = false - // darkTheme.disabled = true - document.body.classList.remove('dark') - document.body.classList.add('light') - switchSpan.innerHTML = lightModeIconXml - break - case 'dark': - // lightTheme.disabled = true - // darkTheme.disabled = false - document.body.classList.remove('light') - document.body.classList.add('dark') - switchSpan.innerHTML = darkModeIconXml - break - case 'auto': - 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 - } +let setThemeMode = function (currentTheme) { + switch (currentTheme) { + case 'light': + document.body.classList.remove('dark') + document.body.classList.add('light') + switchSpan.innerHTML = lightModeIconXml + break + case 'dark': + document.body.classList.remove('light') + document.body.classList.add('dark') + switchSpan.innerHTML = darkModeIconXml + break + case 'auto': + var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches + 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 + } +} + +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(); }