hexo-theme-solitude 2.1.3 → 2.1.5

package/source/css/_page/links.styl

@@ -253,9 +253,10 @@
 
     +maxWidth768()
       width calc(50% - 12px)
+      height: 120px
 
-    +maxWidth600()
-      width calc(100% - 12px)
+      a
+        flex-direction: column
 
     a
       display flex
@@ -286,6 +287,19 @@
         height fit-content
         padding 0 4px
 
+        +maxWidth768()
+          align-items center
+          width 100%
+
+          .flink-item-name
+            padding: 0
+            width: 100%
+            text-align: center
+            font-size: 14px
+
+          .flink-item-desc
+            display: none
+
         span
           transition .3s
 

package/source/css/_post/pagination.styl

@@ -19,7 +19,7 @@
     width 300px
     bottom -100px
     right 20px
-    z-index 7
+    z-index 12
     height fit-content
     transition cubic-bezier(.42, 0, .3, 1.11) .3s
     border var(--style-border)

package/source/css/_search/algolia-search.styl

@@ -7,12 +7,14 @@
   margin-left -15rem
   padding 1rem
   width 30rem
+  flex-direction column
   box-shadow var(--efu-shadow-lightblack)
   background var(--efu-card-bg)
   border var(--style-border)
   transition 0.3s
   border-radius 8px
   animation slide-in .6s ease 0s 1 normal none running
+  gap: 16px
 
   &:hover
     border var(--style-border-hover)
@@ -31,12 +33,10 @@
   .algolia-navbar
     display flex
     align-items center
-    margin-bottom 8px
 
   .search-close-button
-    position absolute
-    top 0.8rem
-    right 1rem
+    margin-left: 4px
+    padding 4px
     color var(--efu-gray)
     font-size 1.4em
     line-height 1
@@ -49,9 +49,6 @@
   .algolia-tips-text
     margin-left .4rem
 
-  #algolia-input-panel
-    margin-bottom 8px
-
   .search-box, .ais-SearchBox
     padding-top 8px
     max-width 100%
@@ -77,7 +74,6 @@
       visibility hidden
 
   #search-results
-    padding-top 8px
     max-height calc(80vh - 130px)
     overflow-y auto
 
@@ -86,9 +82,7 @@
 
   .ais-Hits-list
     padding 0
-
-  .ais-Hits-item
-    margin 10px 0
+    margin 0
 
   .algolia-hit-item-content
     margin 0
@@ -104,17 +98,21 @@
     overflow hidden
     font-weight bold
 
+    &:hover
+      color var(--efu-main)
+  
+  .ais-Stats-text
+    font-size 12px
+
   mark
     color var(--efu-theme)
     font-style normal
     background var(--efu-card-bg)
 
   .ais-Hits--empty
-    text-align center
     font-weight 600
 
   .ais-Pagination-list
-    margin 0.2rem 0 0
     padding 0
     text-align center
 
@@ -134,15 +132,13 @@
 
   .search-dialog__title
     font-weight 700
-    padding 0 0 0.7rem
     color var(--efu-main)
     font-size 1.4em
     line-height 1
 
   #algolia-tips
-    padding-top 12px
     color var(--efu-secondtext)
-    right 0
+    width 100%
     margin auto
 
     .algolia-tips-text
@@ -173,3 +169,14 @@
 
 .ais-Pagination-item--selected a
   background var(--efu-main)
+
+.algolia-tips
+    color: var(--efu-secondtext);
+    margin-left: auto;
+    opacity: .8;
+
+    i 
+      font-size: 18px
+
+#algolia-search .search-dialog .ais-SearchBox-input::placeholder
+    opacity: .6

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

@@ -13,6 +13,8 @@
   transition 0.3s
   border-radius 8px
   animation slide-in .6s ease 0s 1 normal none running
+  gap 16px
+  flex-direction: column
 
   &:hover
     border var(--style-border-hover)
@@ -31,14 +33,10 @@
   .search-dialog-title
     font-weight 700
     color var(--efu-main)
-    padding 0 0 0.7rem
     font-size 1.4em
     line-height 1
 
   .search-close-button
-    position absolute
-    top 0.8rem
-    right 1rem
     color var(--efu-gray)
     font-size 1.4em
     line-height 1
@@ -77,7 +75,6 @@
 
   #search-pagination
     .pagination-list
-      margin 0.2rem 0 0
       padding 0
       text-align center
 
@@ -103,13 +100,13 @@
             color var(--efu-white)
 
   #search-tips
-    padding-top 12px
     color var(--efu-secondtext)
     right 0
     margin auto
 
     .search-result-count
       color var(--efu-gray)
+      font-size 12px
 
       b
         color var(--efu-main)
@@ -119,8 +116,6 @@
     margin 0 auto
     max-width 100%
     width 100%
-    padding-top 8px
-    padding-bottom 8px
 
     input
       height 100%
@@ -133,9 +128,9 @@
       color var(--efu-fontcolor)
       caret-color var(--efu-theme)
 
-      ::placeholder
+      &::placeholder
         color var(--efu-gray)
-        opacity .5
+        opacity .8
 
 #search-mask
   position fixed
@@ -158,4 +153,9 @@
 
     &:hover
       background var(--efu-main)
-      color var(--efu-white)
+      color var(--efu-white)
+
+.search-nav
+  display: flex
+  justify-content: space-between
+  align-content: center

package/source/css/_tags/gallery.styl

@@ -1,7 +1,6 @@
 #article-container
   figure.gallery-group
     position: relative
-    float: left
     overflow: hidden
     margin: 0
     width: calc(50% - 8px)

package/source/js/main.js

@@ -150,23 +150,52 @@ const sco = {
       });
     }
   },
-  musicToggle() {
-    const $music = document.querySelector('#nav-music') || null;
-    const $meting = document.querySelector('meting-js') || null;
-    const $console = document.getElementById('consoleMusic') || null;
-    const $rm_text = document.querySelector('#menu-music-toggle span') || null;
-    const $rm_icon = document.querySelector('#menu-music-toggle i') || null;
+  musicToggle(isMeting = true) {
+    if (!this.isMusicBind) {
+      this.musicBind();
+    }
+    const $music = document.querySelector('#nav-music');
+    const $meting = document.querySelector('meting-js');
+    const $console = document.getElementById('consoleMusic');
+    const $rmText = document.querySelector('#menu-music-toggle span');
+    const $rmIcon = document.querySelector('#menu-music-toggle i');
+    
     this.musicPlaying = !this.musicPlaying;
     $music.classList.toggle("playing", this.musicPlaying);
-    $console && $console.classList.toggle("on", this.musicPlaying);
+    $music.classList.toggle("stretch", this.musicPlaying);
+    $console?.classList.toggle("on", this.musicPlaying);
+    
     if (this.musicPlaying) {
-      $meting.aplayer.play();
-      (typeof rm !== 'undefined') && rm?.menuItems.music[0] && ($rm_text.textContent = GLOBAL_CONFIG.right_menu.music.stop) && ($rm_icon.className = 'solitude fas fa-pause')
+      if (typeof rm !== 'undefined' && rm?.menuItems.music[0]) {
+        $rmText.textContent = GLOBAL_CONFIG.right_menu.music.stop;
+        $rmIcon.className = 'solitude fas fa-pause';
+      }
     } else {
-      $meting.aplayer.pause();
-      (typeof rm !== 'undefined') && rm?.menuItems.music[0] && ($rm_text.textContent = GLOBAL_CONFIG.right_menu.music.start) && ($rm_icon.className = 'solitude fas fa-play')
+      if (typeof rm !== 'undefined' && rm?.menuItems.music[0]) {
+        $rmText.textContent = GLOBAL_CONFIG.right_menu.music.start;
+        $rmIcon.className = 'solitude fas fa-play';
+      }
+    }
+
+    if(isMeting){
+      this.musicPlaying ? $meting.aplayer.play() : $meting.aplayer.pause();
     }
   },
+  musicBind() {
+    const $music = document.querySelector('#nav-music');
+    const $name = document.querySelector('#nav-music .aplayer-music');
+    const $button = document.querySelector('#nav-music .aplayer-button');
+    
+    $name?.addEventListener('click', () => {
+      $music.classList.toggle("stretch");
+    });
+
+    $button?.addEventListener('click', () => {
+      this.musicToggle(false);
+    });
+    
+    this.isMusicBind = true;
+  },
   switchCommentBarrage() {
     let commentBarrageElement = document.querySelector(".comment-barrage");
     let consoleCommentBarrage = document.querySelector("#consoleCommentBarrage");
@@ -189,7 +218,7 @@ const sco = {
     this.sco_keyboards = !this.sco_keyboards;
     const consoleKeyboard = document.querySelector("#consoleKeyboard");
     const keyboardFunction = this.sco_keyboards ? openKeyboard : closeKeyboard;
-    consoleKeyboard.classList.toggle("on", this.sco_keyboards);
+    consoleKeyboard?.classList.toggle("on", this.sco_keyboards);
     keyboardFunction();
     localStorage.setItem("keyboard", this.sco_keyboards);
     document.getElementById('keyboard-tips')?.classList.remove('show');
@@ -660,7 +689,7 @@ class tabs {
     if (expire.time > ex) return;
     const ele = document.createElement('div');
     ele.className = 'expire';
-    ele.innerHTML = `<i class="solitude st-circle-exclamation-solid"></i>${expire.text_prev}${-(expire.time - ex)}${expire.text_next}`;
+    ele.innerHTML = `<i class="solitude fas fa-circle-exclamation"></i>${expire.text_prev}${-(expire.time - ex)}${expire.text_next}`;
     const articleContainer = document.getElementById('article-container');
     articleContainer.insertAdjacentElement(expire.position === 'top' ? 'afterbegin' : 'beforeend', ele);
   }

package/source/js/right_menu.js

@@ -163,8 +163,8 @@ window.oncontextmenu = (ele) => {
     } else {
         rm.menuItems.paste.style.display = "none";
     }
-
-    if (tagName === "meting-js") {
+    let cls = ele.target.className.toLowerCase();
+    if (cls.match(/aplayer/)) {
         display = true;
         rm.menuItems.music.forEach((item) => (item.style.display = "flex"));
     } else {

package/source/js/search/algolia.js

@@ -1,10 +1,10 @@
-window.addEventListener("load", () => {
+document.addEventListener("DOMContentLoaded", function () {
     const $searchMask = document.getElementById("search-mask");
     const $searchDialog = document.querySelector("#algolia-search .search-dialog");
 
     window.openSearch = () => {
         utils.animateIn($searchMask, "to_show 0.5s");
-        $searchDialog.style.display = "block";
+        $searchDialog.style.display = "flex";
         setTimeout(() => {
             document.querySelector("#algolia-search .ais-SearchBox-input").focus();
         }, 100);
@@ -68,12 +68,14 @@ window.addEventListener("load", () => {
 
     const search = instantsearch({
         indexName: algolia.indexName,
-        searchClient: algoliasearch(algolia.appId, algolia.apiKey),
+        searchClient: algoliasearch.algoliasearch(algolia.appId, algolia.apiKey),
         searchFunction(helper) {
             if (helper.state.query) {
-                let innerLoading = '<i class="solitude st-loading-line st-spin"></i>';
+                let innerLoading = `<div class="loading">${GLOBAL_CONFIG.lang.search.loading}</div>`;
                 document.getElementById("algolia-hits").innerHTML = innerLoading;
                 helper.search();
+            } else {
+                document.getElementById("algolia-hits").innerHTML = '';
             }
         },
     });
@@ -87,9 +89,8 @@ window.addEventListener("load", () => {
         showReset: false,
         showSubmit: false,
         placeholder: GLOBAL_CONFIG.lang.search.placeholder,
-        showLoadingIndicator: true,
-        searchOnEnterKeyPressOnly: true,
-        searchAsYouType: false,
+        showLoadingIndicator: false,
+        searchAsYouType: true,
     });
 
     const hits = instantsearch.widgets.hits({
@@ -98,7 +99,7 @@ window.addEventListener("load", () => {
             item(data) {
                 const link = data.permalink ? data.permalink : GLOBAL_CONFIG.root + data.path;
                 const result = data._highlightResult;
-                const loadingLogo = document.querySelector("#algolia-hits .st-spin");
+                const loadingLogo = document.querySelector("#algolia-hits .loading");
                 if (loadingLogo) {
                     loadingLogo.style.display = "none";
                 }
@@ -111,7 +112,7 @@ window.addEventListener("load", () => {
           </a>`;
             },
             empty: function (data) {
-                const loadingLogo = document.querySelector("#algolia-hits .st-spin");
+                const loadingLogo = document.querySelector("#algolia-hits .loading");
                 if (loadingLogo) {
                     loadingLogo.style.display = "none";
                 }
@@ -136,10 +137,10 @@ window.addEventListener("load", () => {
         scrollTo: false,
         showFirstLast: false,
         templates: {
-            first: '<i class="solitude st-show-left-line"></i>',
-            last: '<i class="solitude st-show-right-line"></i>',
-            previous: '<i class="solitude st-arrow-left-bold"></i>',
-            next: '<i class="solitude st-arrow-right-bold"></i>',
+            first: '<i class="solitude fas fa-angles-left"></i>',
+            last: '<i class="solitude fas fa-angles-right"></i>',
+            previous: '<i class="solitude fas fa-angle-left"></i>',
+            next: '<i class="solitude fas fa-angle-right"></i>',
         },
         cssClasses: {
             root: "pagination",
@@ -162,7 +163,7 @@ window.addEventListener("load", () => {
         },
     });
 
-    search.addWidgets([configure, searchBox,stats, hits, pagination]);
+    search.addWidgets([configure, searchBox, stats, hits, pagination]);
 
     search.start();
 
@@ -178,4 +179,4 @@ window.addEventListener("load", () => {
     search.on("render", () => {
         window.pjax.refresh(document.getElementById("algolia-hits"));
     });
-});
+});

package/source/js/search/local.js

@@ -4,7 +4,7 @@ window.addEventListener("load", () => {
     const $searchDialog = document.querySelector("#local-search .search-dialog");
     window.openSearch = () => {
         utils.animateIn($searchMask, "to_show 0.5s");
-        $searchDialog.style.display = "block";
+        $searchDialog.style.display = "flex";
         setTimeout(() => {
             document.querySelector("#local-search .search-box-input").focus();
         }, 100);
@@ -101,18 +101,15 @@ window.addEventListener("load", () => {
     function initUI() {
         const $results = document.getElementById("search-results");
         const $search = document.getElementById("search-input");
-        $search.addEventListener('keydown', function (e) {
-            if (e.keyCode === 13) {
-                e.preventDefault();
-                $results.innerHTML = '';
-                query = this.value.trim();
-                if (query !== '') {
-                    results = search(query);
-                    renderResults(results, currentPage);
-                    renderPagination(results.length);
-                } else {
-                    clearSearchResults();
-                }
+        $search.addEventListener('input', function (e) {
+            $results.innerHTML = '';
+            query = this.value.trim();
+            if (query !== '') {
+                results = search(query);
+                renderResults(results, currentPage);
+                renderPagination(results.length);
+            } else {
+                clearSearchResults();
             }
         });
     }
@@ -202,4 +199,4 @@ window.addEventListener("load", () => {
     window.addEventListener('pjax:complete', () => {
         searchClickFn()
     })
-});
+});