hexo-theme-solitude 1.8.9 → 1.8.11

package/source/css/_page/_home/carousel.styl

@@ -4,47 +4,10 @@ div#swiper_container
   position relative
   transition all .3s
   overflow hidden
-
-#swiperBox.recent-post-item
-  width 100%
-  cursor default
-  margin-top 0
-
-#swiperBox
-
-  .swiperBox-top-text
-    position absolute
-    z-index 2
-    color var(--efu-white)
-    background var(--efu-red)
-    letter-spacing 3px
-    top 0
-    left 15px
-    font-size 15px
-    width 35px
-    display flex
-    justify-content center
-    border-radius 0 0 12px 12px
-
-  .swiper-button-next::after, .swiper-button-prev::after
-    font-size 1rem !important
-
-  .swiper-button-prev, .swiper-button-next
-    transition all .3s
-    border-radius 5px
-    color var(--efu-main) !important
-    background var(--efu-maskbg)
-    opacity .5
-
-    &:hover
-      opacity 1
-      transition all .3s
-      color var(--efu-white) !important
-      background var(--efu-main)
-
-  .swiper-button-next::after, .swiper-button-prev::after
-    font-size 1.5rem
-    color var(--efu-bg)
+  display flex
+  flex-direction row
+  justify-content center
+  align-items center
 
   .blog-slider__pagination .swiper-pagination-bullet
     margin 0 8px
@@ -52,71 +15,92 @@ div#swiper_container
     height 11px
     display inline-block
     border-radius 99px
-    background var(--efu-white)
-    opacity .8
+    background var(--efu-gray)
+    opacity .2
     transition all .3s
 
   .blog-slider__pagination .swiper-pagination-bullet-active
     opacity 1
     background var(--efu-main)
-    width 30px
+    height 30px
 
   .blog-slider__pagination
     position absolute
     z-index 21
     text-align center
+    display flex
+    justify-content space-between
+    flex-direction column
+    height 60%
 
-  #recent-posts > #swiperBox.recent-post-item
-    cursor default
-
-  .blog-slider__item
-    background-size cover
-    background-position center
-    overflow hidden
-
-    &::after
-      content ''
-      position absolute
-      width 100%
-      height 100%
-      background-color rgba(0, 0, 0, .5)
-      z-index -1
-      left 0
-      top 0
-
-  .blog-slider__content > *
-    text-align center
-    line-height 1.5
-    margin 2px 0
-    color var(--efu-white)
+#swiperBox.recent-post-item
+  width 100%
+  margin-top 0
+  +maxWidth798()
+    display none
 
-  a.blog-slider__title
-    font-size 2rem
+#swiperBox
+  .blog-slider__item.swiper-slide
+    padding 1rem
+    display flex
+    justify-content space-between
+    flex-direction row
+    height 100%
 
-    +maxWidth768()
-      font-size 1.3rem
+    &:hover
+      .blog-slider__img
+        img
+          transform scale(1.1)
+          transition all .3s
 
-  .blog-slider__code
-    display block
-    font-weight 500
+      .blog-slider__title
+        color var(--efu-main)
+        transition all .3s
 
-  .blog-slider__text
-    font-size 18px
-    -webkit-line-clamp 2
+  .blog-slider__img
+    border-radius 12px
     overflow hidden
-    display -webkit-box
-    -webkit-box-orient vertical
-    +minWidth1300()
-      padding 0 5rem
-    +maxWidth900()
-      padding 0 3rem
-    +maxWidth768()
-      display none
+    width 35%
+    height 100%
+    transition all .3s
+    cursor pointer
+
+    img
+      width 100%
+      height 100%
+      object-fit cover
 
   .blog-slider__content
-    padding 0 50px 20px
+    margin 0 2rem 0 1rem
+    position relative
+    width 65%
     display flex
-    justify-content center
-    align-items center
+    align-items left
     flex-direction column
-    height 100%
+    height 100%
+
+    .article-meta-wrap
+      padding 0
+      bottom 0
+
+      .tags-punctuation
+        &:hover
+          color var(--efu-main)
+          transition all .3s
+
+    .blog-slider__title
+      font-size 1.5rem
+      font-weight 600
+      color var(--efu-fontcolor)
+      margin 0
+      transition all .3s
+      cursor pointer
+
+    .blog-slider__desc
+      -webkit-line-clamp: 4;
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      opacity: 0.8;
+      font-size: 14px;
+      line-height: 1.8;

package/source/css/_page/index.styl

@@ -6,9 +6,6 @@
 
 @import "error.styl"
 
-if hexo-config('moments.enable')
-  @import "moment.styl"
-
 if hexo-config('says.enable')
   @import "says.styl"
 

package/source/css/_page/links.styl

@@ -17,7 +17,7 @@
     box-shadow var(--efu-shadow-blue)
     color var(--efu-white)
     z-index 1
-    border-radius 12px 0 12px 0
+    border-radius 0 0 12px 0
     transition .3s
     font-size .6rem
     overflow hidden

package/source/js/barrage_comment.js

@@ -1,84 +1,77 @@
-function initializeCommentBarrage(array) {
-    if (array === []) return;
-    let existingBarrage = window.currentBarrage;
-
-    if (existingBarrage) {
-        existingBarrage.destroy();
+class Barrage {
+    constructor(comments) {
+        this.comments = comments;
+        this.dom = document.querySelector(".comment-barrage");
+        this.barrageList = [];
+        this.barrageIndex = 0;
+        this.barrageTimer = [];
+        this.hoverOnCommentBarrage = false;
+        this.init();
     }
 
-    let barrage = class {
-        constructor() {
-            this.config = {
-                barrageTimer: [],
-                barrageList: [],
-                barrageIndex: 0,
-                dom: document.querySelector(".comment-barrage"),
-                maxBarrage: 1,
-                barrageTime: 5000
-            };
-            this.hoverOnCommentBarrage = false;
-            this.init();
-        }
-
-        filterAndFlatten(comments) {
-            return comments.flatMap(comment => comment.replies ? [comment, ...this.filterAndFlatten(comment.replies)] : [comment]);
-        }
+    filterAndFlatten = (comments) => {
+        return (comments.flatMap(comment => comment.replies ? [comment, ...this.filterAndFlatten(comment.replies)] : [comment]))
+    }
 
-        sanitizeContent(content) {
-            return content.replace(/(<([^>]+)>)/ig, '').trim();
-        }
+    sanitizeContent(content) {
+        return content.replace(/(<([^>]+)>)/ig, '').trim();
+    }
 
-        createBarrageItem(comment) {
-            const content = this.sanitizeContent(comment.content);
-            if (!content) return false;
-            const element = document.createElement("div");
-            element.className = "comment-barrage-item";
-            element.innerHTML = `<div class="barrageHead"><a class="barrageTitle" href="javascript:sco.scrollTo('post-comment')">${GLOBAL_CONFIG.lang.barrage.title}</a><div class="barrageNick">${comment.nick}</div><img class="barrageAvatar" src="${GLOBAL_CONFIG.comment.avatar}/avatar/${comment.mailMd5}"/><a class="comment-barrage-close" href="javascript:sco.switchCommentBarrage();"><i class="solitude st-close-fill"></i></a></div><a class="barrageContent" href="${comment.id ? `javascript:sco.scrollTo(\'${comment.id}\')` : 'javascript:sco.scrollTo(\'post-comment\')'}">${content}</a>`;
-            this.config.dom.appendChild(element);
-            this.config.barrageTimer.push(element);
-            return true;
-        }
+    createBarrageItem(comment) {
+        const content = this.sanitizeContent(comment.content);
+        if (!content) return false;
+        const element = document.createElement("div");
+        element.className = "comment-barrage-item";
+        element.innerHTML = `<div class="barrageHead"><a class="barrageTitle" href="javascript:sco.scrollTo('post-comment')">${GLOBAL_CONFIG.lang.barrage.title}</a><div class="barrageNick">${comment.nick}</div><img class="barrageAvatar" src="${GLOBAL_CONFIG.comment.avatar}/avatar/${comment.mailMd5}"/><a class="comment-barrage-close" href="javascript:sco.switchCommentBarrage();"><i class="solitude st-close-fill"></i></a></div><a class="barrageContent" href="${comment.id ? `javascript:sco.scrollTo(\'${comment.id}\')` : 'javascript:sco.scrollTo(\'post-comment\')'}">${content}</a>`;
+        this.dom.appendChild(element);
+        this.barrageTimer.push(element);
+        return true;
+    }
 
-        removeBarrageItem(element) {
-            element.classList.add("out");
-            setTimeout(() => this.config.dom.removeChild(element), 1000);
-        }
+    removeBarrageItem(element) {
+        element.classList.add("out");
+        setTimeout(() => this.dom.removeChild(element), 1000);
+    }
 
-        manageBarrage() {
-            if (this.config.barrageList.length && !this.hoverOnCommentBarrage) {
-                if (!this.createBarrageItem(this.config.barrageList[this.config.barrageIndex])) {
-                    this.config.barrageIndex = (this.config.barrageIndex + 1) % this.config.barrageList.length;
-                    return this.manageBarrage();
-                }
-                this.config.barrageIndex = (this.config.barrageIndex + 1) % this.config.barrageList.length;
-            }
-            if (this.config.barrageTimer.length > Math.min(this.config.maxBarrage, this.config.barrageList.length) && !this.hoverOnCommentBarrage) {
-                this.removeBarrageItem(this.config.barrageTimer.shift());
+    manageBarrage() {
+        if (this.barrageList.length && !this.hoverOnCommentBarrage) {
+            if (!this.createBarrageItem(this.barrageList[this.barrageIndex])) {
+                this.barrageIndex = (this.barrageIndex + 1) % this.barrageList.length;
+                return this.manageBarrage();
             }
+            this.barrageIndex = (this.barrageIndex + 1) % this.barrageList.length;
         }
-
-        async initBarrage() {
-            const storageSwitch = utils.saveToLocal.get("commentBarrageSwitch");
-            this.config.dom.style.display = storageSwitch ? "flex" : "none";
-            this.config.barrageList = this.filterAndFlatten(array);
-            this.config.dom.innerHTML = "";
-            clearInterval(this.commentInterval);
-            this.commentInterval = setInterval(() => this.manageBarrage(), this.config.barrageTime);
+        if (this.barrageTimer.length > Math.min(1, this.barrageList.length) && !this.hoverOnCommentBarrage) {
+            this.removeBarrageItem(this.barrageTimer.shift());
         }
+    }
 
-        async init() {
-            await this.initBarrage();
-            this.config.dom.addEventListener('mouseover', () => this.hoverOnCommentBarrage = true);
-            this.config.dom.addEventListener('mouseout', () => this.hoverOnCommentBarrage = false);
-        }
+    initBarrage() {
+        const storageSwitch = utils.saveToLocal.get("commentBarrageSwitch");
+        this.dom.style.display = storageSwitch ? "flex" : "none";
+        this.barrageList = this.filterAndFlatten(this.comments);
+        this.dom.innerHTML = "";
+        clearInterval(this.commentInterval);
+        this.commentInterval = setInterval(() => this.manageBarrage(), 5000);
+    }
 
-        destroy() {
-            clearInterval(this.commentInterval);
-            this.config.dom.removeEventListener('mouseover', () => this.hoverOnCommentBarrage = true)
-            this.config.dom.removeEventListener('mouseout', () => this.hoverOnCommentBarrage = false)
-            this.config.dom.innerHTML = ""
-        }
+    init() {
+        this.initBarrage();
+        this.dom.addEventListener('mouseover', () => this.hoverOnCommentBarrage = true);
+        this.dom.addEventListener('mouseout', () => this.hoverOnCommentBarrage = false);
+    }
+
+    destroy() {
+        clearInterval(this.commentInterval);
+        this.dom.removeEventListener('mouseover', () => this.hoverOnCommentBarrage = true)
+        this.dom.removeEventListener('mouseout', () => this.hoverOnCommentBarrage = false)
+        this.dom.innerHTML = ""
     }
+}
 
-    window.currentBarrage = new barrage();
+function initializeCommentBarrage(array) {
+    if (array.length === 0) return;
+    let existingBarrage = window.currentBarrage;
+    if (existingBarrage) existingBarrage.destroy();
+    window.currentBarrage = new Barrage(array);
 }

package/source/js/covercolor/api.js

@@ -1,76 +1,59 @@
 const coverColor = () => {
     const path = document.getElementById("post-cover")?.src;
-    if (path) {
-        handleApiColor(path);
-    } else {
-        document.documentElement.style.setProperty('--efu-main', 'var(--efu-theme)');
-        document.documentElement.style.setProperty('--efu-main-op', 'var(--efu-theme-op)');
-        document.documentElement.style.setProperty('--efu-main-op-deep', 'var(--efu-theme-op-deep)');
-        document.documentElement.style.setProperty('--efu-main-none', 'var(--efu-theme-none)');
-        initThemeColor()
-    }
+    path ? handleApiColor(path) : setDefaultThemeColors();
 }
 
 function handleApiColor(path) {
     const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || {};
-    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));
-        setThemeColors(color, r, g, b);
-    } else {
-        img2color(path);
-    }
+    cacheGroup.postcolor && cacheGroup.postcolor[path] ? setThemeColors(cacheGroup.postcolor[path].value) : img2color(path);
 }
 
 function img2color(src) {
-    const apiUrl = coverColorConfig.api + encodeURIComponent(src);
-    fetch(apiUrl)
+    fetch(coverColorConfig.api + encodeURIComponent(src))
         .then(response => response.json())
         .then(data => {
-            const color = data.RGB;
-            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 = JSON.parse(localStorage.getItem('Solitude')) || {};
-            cacheGroup.postcolor = cacheGroup.postcolor || {};
-            cacheGroup.postcolor[src] = {value: color, expiration: expirationTime};
-            localStorage.setItem('Solitude', JSON.stringify(cacheGroup));
+            setThemeColors(data.RGB);
+            cacheColor(src, data.RGB);
         })
-        .catch(error => {
-            console.error('请检查API是否正常！\n' + error);
-        });
+        .catch(console.error);
 }
 
-function setThemeColors(value, r = null, g = null, b = null) {
+function setThemeColors(value) {
     if (value) {
+        const [r, g, b] = value.match(/\w\w/g).map(x => parseInt(x, 16));
         document.documentElement.style.setProperty('--efu-main', value);
         document.documentElement.style.setProperty('--efu-main-op', value + '23');
         document.documentElement.style.setProperty('--efu-main-op-deep', value + 'dd');
         document.documentElement.style.setProperty('--efu-main-none', value + '00');
-
-        if (r && g && b) {
-            let brightness = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);
-            if (brightness < 125) {
-                let cardContents = document.getElementsByClassName('card-content');
-                for (let i = 0; i < cardContents.length; i++) {
-                    cardContents[i].style.setProperty('--efu-card-bg', 'var(--efu-white)');
-                }
-
-                let authorInfo = document.getElementsByClassName('author-info__sayhi');
-                for (let i = 0; i < authorInfo.length; i++) {
-                    authorInfo[i].style.setProperty('background', 'var(--efu-white-op)');
-                    authorInfo[i].style.setProperty('color', 'var(--efu-white)');
-                }
-            }
-        }
-
+        adjustBrightness(r, g, b);
         document.getElementById("coverdiv").classList.add("loaded");
         initThemeColor();
     } else {
-        document.documentElement.style.setProperty('--efu-main', 'var(--efu-theme)');
-        document.documentElement.style.setProperty('--efu-main-op', 'var(--efu-theme-op)');
-        document.documentElement.style.setProperty('--efu-main-op-deep', 'var(--efu-theme-op-deep)');
-        document.documentElement.style.setProperty('--efu-main-none', 'var(--efu-theme-none)');
-        initThemeColor();
+        setDefaultThemeColors();
+    }
+}
+
+function setDefaultThemeColors() {
+    document.documentElement.style.setProperty('--efu-main', 'var(--efu-theme)');
+    document.documentElement.style.setProperty('--efu-main-op', 'var(--efu-theme-op)');
+    document.documentElement.style.setProperty('--efu-main-op-deep', 'var(--efu-theme-op-deep)');
+    document.documentElement.style.setProperty('--efu-main-none', 'var(--efu-theme-none)');
+    initThemeColor();
+}
+
+function cacheColor(src, color) {
+    const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || {};
+    cacheGroup.postcolor = cacheGroup.postcolor || {};
+    cacheGroup.postcolor[src] = {value: color, expiration: Date.now() + coverColorConfig.time};
+    localStorage.setItem('Solitude', JSON.stringify(cacheGroup));
+}
+
+function adjustBrightness(r, g, b) {
+    if (Math.round(((r * 299) + (g * 587) + (b * 114)) / 1000) < 125) {
+        [...document.getElementsByClassName('card-content')].forEach(item => item.style.setProperty('--efu-card-bg', 'var(--efu-white)'));
+        [...document.getElementsByClassName('author-info__sayhi')].forEach(item => {
+            item.style.setProperty('background', 'var(--efu-white-op)');
+            item.style.setProperty('color', 'var(--efu-white)');
+        });
     }
 }

package/source/js/covercolor/local.js

@@ -1,39 +1,34 @@
 const coverColor = () => {
     const path = document.getElementById("post-cover")?.src;
-    if (path) {
-        localColor(path);
-    } else {
-        document.documentElement.style.setProperty('--efu-main', 'var(--efu-theme)');
-        document.documentElement.style.setProperty('--efu-main-op', 'var(--efu-theme-op)');
-        document.documentElement.style.setProperty('--efu-main-op-deep', 'var(--efu-theme-op-deep)');
-        document.documentElement.style.setProperty('--efu-main-none', 'var(--efu-theme-none)');
-        initThemeColor()
-    }
+    path ? localColor(path) : setDefaultThemeColors();
 }
 
-const localColor = (path) => {
+function setDefaultThemeColors() {
+    document.documentElement.style.setProperty('--efu-main', 'var(--efu-theme)');
+    document.documentElement.style.setProperty('--efu-main-op', 'var(--efu-theme-op)');
+    document.documentElement.style.setProperty('--efu-main-op-deep', 'var(--efu-theme-op-deep)');
+    document.documentElement.style.setProperty('--efu-main-none', 'var(--efu-theme-none)');
+    initThemeColor();
+}
+
+const localColor = path => {
     const img = new Image();
     img.crossOrigin = "Anonymous";
-    img.onload = function () {
-        const canvas = document.createElement("canvas");
-        canvas.width = img.width;
-        canvas.height = img.height;
-        const ctx = canvas.getContext("2d");
-        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") {
-            value = LightenDarkenColor(value, -50);
-        }
-        setThemeColors(value, r, g, b);
-    };
-    img.onerror = function () {
-        console.error('图片加载失败');
-    };
+    img.onload = () => setThemeColors(calculateColor(img));
+    img.onerror = () => console.error('Image Error');
     img.src = path;
 }
 
+const calculateColor = img => {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    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);
+    return getContrastYIQ(value) === "light" ? LightenDarkenColor(value, -50) : value;
+}
+
 function calculateRGB(data) {
     let r = 0, g = 0, b = 0;
     const step = 5;