hexo-theme-solitude 1.4.1 → 1.4.3

package/source/css/_widgets/_search/local-search.styl

@@ -12,10 +12,13 @@
   border var(--style-border)
   transition 0.3s
   border-radius 8px
+  animation slide-in .6s ease 0s 1 normal none running
 
   &:hover
     border var(--style-border-hover)
     box-shadow var(--sco-shadow-theme)
+    +maxWidth768()
+      border none
 
   +maxWidth768()
     top 0
@@ -23,6 +26,7 @@
     margin 0
     width 100%
     height 100%
+    border 0
 
   .search-dialog-title
     font-weight 700
@@ -116,7 +120,7 @@
     max-width 100%
     width 100%
     padding-top 8px
-    margin-bottom 8px
+    padding-bottom 8px
 
     input
       height 100%
@@ -138,4 +142,16 @@
   backdrop-filter blur(12px)
   -webkit-backdrop-filter blur(12px)
   transform translateZ(0)
-  background var(--sco-maskbgdeep)
+  background var(--sco-maskbgdeep)
+
+#search-hits
+  .tag-list
+    padding 4px 8px
+    border-radius 8px
+    margin-right 0.5rem
+    margin-top 0.5rem
+    border var(--style-border-always)
+
+    &:hover
+      background var(--sco-main)
+      color var(--sco-white)

package/source/css/_widgets/_tags/link.styl

@@ -8,7 +8,7 @@
   border-width 1px !important
   margin-top 1rem
 
-  &:hover
+  /#article-container a.tag-Link:not(.headerlink):hover
     border var(--style-border-hover)
 
   .tag-link-tips

package/source/css/_widgets/index.styl

@@ -4,6 +4,10 @@
 // 手机端侧边栏
 @import "_mixins/sidebar.styl"
 
+// keyboard（键盘）
+if hexo-config('keyboard.enable')
+  @import "_mixins/keyboard.styl"
+
 // article-sort （归档）
 @import "_mixins/article-sort.styl"
 

package/source/css/index.styl

@@ -12,5 +12,4 @@ if hexo-config('css_prefix')
 // widgets
 @import '_widgets/index.styl'
 
-// dark
 @import '_mode/*'

package/source/js/covercolor/api.js

@@ -2,12 +2,17 @@ const coverColor = () => {
     const path = document.getElementById("post-cover")?.src;
     if (path) {
         handleApiColor(path);
+    } else {
+        document.documentElement.style.setProperty('--sco-main', 'var(--sco-theme)');
+        document.documentElement.style.setProperty('--sco-main-op', 'var(--sco-theme-op)');
+        document.documentElement.style.setProperty('--sco-main-op-deep', 'var(--sco-theme-op-deep)');
+        document.documentElement.style.setProperty('--sco-main-none', 'var(--sco-theme-none)');
+        initThemeColor()
     }
 }
 
 function handleApiColor(path) {
     const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || {};
-    console.log(cacheGroup)
     if (cacheGroup.postcolor && cacheGroup.postcolor[path]) {
         const color = cacheGroup.postcolor[path].value;
         const [r, g, b] = color.match(/\w\w/g).map(x => parseInt(x, 16));
@@ -26,14 +31,13 @@ function img2color(src) {
             const [r, g, b] = color.match(/\w\w/g).map(x => parseInt(x, 16));
             setThemeColors(color, r, g, b);
             const expirationTime = Date.now() + coverColorConfig.time;
-            const cacheGroup = saveToLocal.get('Solitude') || {};
+            const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || {};
             cacheGroup.postcolor = cacheGroup.postcolor || {};
             cacheGroup.postcolor[src] = {value: color, expiration: expirationTime};
             localStorage.setItem('Solitude', JSON.stringify(cacheGroup));
         })
         .catch(error => {
             console.error('请检查API是否正常！\n' + error);
-            setThemeColors();
         });
 }
 
@@ -45,14 +49,14 @@ function setThemeColors(value, r = null, g = null, b = null) {
         document.documentElement.style.setProperty('--sco-main-none', value + '00');
 
         if (r && g && b) {
-            var brightness = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);
+            let brightness = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);
             if (brightness < 125) {
-                var cardContents = document.getElementsByClassName('card-content');
+                let cardContents = document.getElementsByClassName('card-content');
                 for (let i = 0; i < cardContents.length; i++) {
                     cardContents[i].style.setProperty('--sco-card-bg', 'var(--sco-white)');
                 }
 
-                var authorInfo = document.getElementsByClassName('author-info__sayhi');
+                let authorInfo = document.getElementsByClassName('author-info__sayhi');
                 for (let i = 0; i < authorInfo.length; i++) {
                     authorInfo[i].style.setProperty('background', 'var(--sco-white-op)');
                     authorInfo[i].style.setProperty('color', 'var(--sco-white)');

package/source/js/covercolor/local.js

@@ -1,21 +1,26 @@
-function coverColor() {
+const coverColor = () => {
     const path = document.getElementById("post-cover")?.src;
-
     if (path) {
         localColor(path);
+    } else {
+        document.documentElement.style.setProperty('--sco-main', 'let(--sco-theme)');
+        document.documentElement.style.setProperty('--sco-main-op', 'let(--sco-theme-op)');
+        document.documentElement.style.setProperty('--sco-main-op-deep', 'let(--sco-theme-op-deep)');
+        document.documentElement.style.setProperty('--sco-main-none', 'let(--sco-theme-none)');
+        initThemeColor()
     }
 }
 
-function localColor(path) {
+const localColor = (path) => {
     const img = new Image();
     img.crossOrigin = "Anonymous";
     img.onload = function () {
         const canvas = document.createElement("canvas");
-        canvas.width = this.width;
-        canvas.height = this.height;
+        canvas.width = img.width;
+        canvas.height = img.height;
         const ctx = canvas.getContext("2d");
-        ctx.drawImage(this, 0, 0);
-        const data = ctx.getImageData(0, 0, this.width, this.height).data;
+        ctx.drawImage(img, 0, 0);
+        const data = ctx.getImageData(0, 0, img.width, img.height).data;
         const {r, g, b} = calculateRGB(data);
         let value = rgbToHex(r, g, b);
         if (getContrastYIQ(value) === "light") {
@@ -23,9 +28,26 @@ function localColor(path) {
         }
         setThemeColors(value, r, g, b);
     };
+    img.onerror = function () {
+        console.error('图片加载失败');
+    };
     img.src = path;
 }
 
+function calculateRGB(data) {
+    let r = 0, g = 0, b = 0;
+    const step = 5;
+    for (let i = 0; i < data.length; i += 4 * step) {
+        r += data[i];
+        g += data[i + 1];
+        b += data[i + 2];
+    }
+    r = Math.floor(r / (data.length / 4 / step));
+    g = Math.floor(g / (data.length / 4 / step));
+    b = Math.floor(b / (data.length / 4 / step));
+    return {r, g, b};
+}
+
 function rgbToHex(r, g, b) {
     return "#" + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
 }
@@ -47,12 +69,12 @@ function LightenDarkenColor(col, amt) {
 }
 
 function getContrastYIQ(hexcolor) {
-    var colorrgb = colorRgb(hexcolor);
-    var colors = colorrgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
-    var red = colors[1];
-    var green = colors[2];
-    var blue = colors[3];
-    var brightness = (red * 299) + (green * 587) + (blue * 114);
+    let colorrgb = colorRgb(hexcolor);
+    let colors = colorrgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    let red = colors[1];
+    let green = colors[2];
+    let blue = colors[3];
+    let brightness = (red * 299) + (green * 587) + (blue * 114);
     brightness = brightness / 255000;
     return brightness >= 0.5 ? "light" : "dark";
 }
@@ -82,4 +104,57 @@ function colorRgb(str) {
     } else {
         return sColor;
     }
+}
+
+function setThemeColors(value, r = null, g = null, b = null) {
+    const cardContents = document.getElementsByClassName('card-content');
+    const authorInfo = document.getElementsByClassName('author-info__sayhi');
+
+    if (value) {
+        document.documentElement.style.setProperty('--sco-main', value);
+        document.documentElement.style.setProperty('--sco-main-op', value + '23');
+        document.documentElement.style.setProperty('--sco-main-op-deep', value + 'dd');
+        document.documentElement.style.setProperty('--sco-main-none', value + '00');
+
+        if (r && g && b) {
+            let brightness = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);
+            for (let i = 0; i < cardContents.length; i++) {
+                cardContents[i].style.setProperty('--sco-card-bg', 'let(--sco-white)');
+            }
+
+            for (let i = 0; i < authorInfo.length; i++) {
+                authorInfo[i].style.setProperty('background', 'let(--sco-white-op)');
+                authorInfo[i].style.setProperty('color', 'let(--sco-white)');
+            }
+        }
+
+        document.getElementById("coverdiv").classList.add("loaded");
+        initThemeColor();
+    } else {
+        document.documentElement.style.setProperty('--sco-main', 'let(--sco-theme)');
+        document.documentElement.style.setProperty('--sco-main-op', 'let(--sco-theme-op)');
+        document.documentElement.style.setProperty('--sco-main-op-deep', 'let(--sco-theme-op-deep)');
+        document.documentElement.style.setProperty('--sco-main-none', 'let(--sco-theme-none)');
+        initThemeColor();
+    }
+}
+
+function initThemeColor() {
+    const currentTop = window.scrollY || document.documentElement.scrollTop;
+    let themeColor;
+    if (currentTop > 0) {
+        themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-card-bg');
+    } else if (PAGE_CONFIG.is_post) {
+        themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-main');
+    } else {
+        themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-background');
+    }
+    changeThemeColor(themeColor);
+}
+
+function changeThemeColor(color) {
+    const meta = document.querySelector('meta[name="theme-color"]');
+    if (meta) {
+        meta.setAttribute('content', color);
+    }
 }

package/source/js/main.js

@@ -281,6 +281,20 @@ let sco = {
         htmlClassList.toggle("hide-aside");
         htmlClassList.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on");
     },
+    switchKeyboard: function() {
+        sco_keyboards = !sco_keyboards;
+        const consoleKeyboard = document.querySelector("#consoleKeyboard");
+        if (sco_keyboards) {
+            consoleKeyboard.classList.add("on");
+            openKeyboard()
+            localStorage.setItem("keyboard", true);
+        } else {
+            closeKeyboard()
+            consoleKeyboard.classList.remove("on");
+            localStorage.setItem("keyboard", false);
+            document.getElementById('keyboard-tips')?.classList.remove('show')
+        }
+    },
     initConsoleState: function () {
         document.documentElement.classList.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on")
     },
@@ -672,7 +686,7 @@ let sco = {
             element.value = "donotreply@examp.com";
             element.dispatchEvent(new Event("input"));
         });
-    }
+    },
 }
 
 class hightlight {