hexo-theme-stellar 1.31.0 → 1.32.0

package/source/css/_defines/const.styl

@@ -54,5 +54,5 @@ $hue-yellow = 50
 $cDeepOrange = hsl(14 100% 57%)
 
 
-$leftbar-bottom-margin = 128px
+$leftbar-bottom-margin = 96px
 $rightbar-bottom-margin = 96px

package/source/css/_defines/func.styl

@@ -107,7 +107,7 @@ hover-block($v, $h, $br = 4px)
   padding: $v $h
   trans2 color background
   &:hover
-    background: var(--block-hover)
+    background: var(--block-border)
 
 floatable-trans()
   trans2 transform box-shadow
@@ -134,7 +134,7 @@ hoverable-card()
       ondark()
 
 newblur()
-  box-shadow: 0 0 2px rgba(black, .02), 0 2px 8px rgba(black, .03), 0 4px 16px rgba(black, .05)
+  box-shadow: 0 0 2px rgba(black, .04), 0 2px 8px rgba(black, .04), 0 4px 16px rgba(black, .04)
   trans1: all
   &:before,&:after
     z-index -1
@@ -148,12 +148,16 @@ newblur()
     border-radius: 64px
   &:before
     backdrop-filter: blur(8px)
+    -webkit-backdrop-filter: blur(8px)
+    background: var(--alpha20)
   &:after
-    --blur-px: 32px
+    --blur-px: 24px
     --blur-sat: 500%
-    background: var(--alpha20)
+    background: var(--alpha50)
     backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
-    mask: linear-gradient(rgba(white, 1), 10%, rgba(white, 0.1), 90%, rgba(white, 1)), linear-gradient(90deg, rgba(white, 1), 10%, rgba(white, 0.1), 90%, rgba(white, 1))
+    -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+    mask: linear-gradient(rgba(white, 1), 10%, rgba(white, 0.05), 90%, rgba(white, 1)), linear-gradient(90deg, rgba(white, 1), 10%, rgba(white, 0.05), 90%, rgba(white, 1))
+    -webkit-mask: linear-gradient(rgba(white, 1), 10%, rgba(white, 0.05), 90%, rgba(white, 1)), linear-gradient(90deg, rgba(white, 1), 10%, rgba(white, 0.05), 90%, rgba(white, 1))
     box-shadow: inset 0 0 4px 1px rgba(white, 0.5)
     trans1 all
     @media (prefers-color-scheme: dark)

package/source/css/_defines/theme.styl

@@ -56,9 +56,8 @@ _common_root()
 _light_root()
   --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
   --card: hsl($color-block-h, $color-block-s, 100)
-  --block: hsl($color-block-h, $color-block-s, 95)
-  --block-border: hsl($color-block-h, $color-block-s, 90)
-  --block-hover: hsl($color-block-h, $color-block-s, 92)
+  --block: hsla(black, 0.04)
+  --block-border: hsla(black, 0.08)
   --theme-link-opa: rgba($color-link, 0.2)
   --leftbar-bg: hsl($color-block-h, $color-block-s, 90)
   --alpha20: rgba(white, 0.2)
@@ -82,10 +81,9 @@ _light_root()
 
 _dark_root()
   --site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
-  --card: hsl($color-block-h, $color-block-s * 1.2, 24)
-  --block: hsl($color-block-h, $color-block-s, 16)
+  --card: hsl($color-block-h, $color-block-s * 1.2, 16)
+  --block: hsl($color-block-h, $color-block-s, 20)
   --block-border: hsl($color-block-h, $color-block-s, 24)
-  --block-hover: hsl($color-block-h, $color-block-s, 20)
   --theme-link-opa: rgba($color-link, 0.4)
   --leftbar-bg: hsl($color-block-h, $color-block-s, 24)
   --alpha20: rgba(black, 0.2)
@@ -120,12 +118,3 @@ _common_root()
   @media (prefers-color-scheme: dark)
     _dark_root()
 
-@media (prefers-color-scheme: dark)
-  :root:not([data-theme])
-    img,
-    .md-text .tag-plugin.chat>.content .chatcell .user-main .talk.file>.content>.top>.right>svg.icon>path
-      filter: brightness(75%)!important
-[data-theme='dark']
-    img,
-    .md-text .tag-plugin.chat>.content .chatcell .user-main .talk.file>.content>.top>.right>svg.icon>path
-      filter: brightness(75%)!important

package/source/css/_plugins/comments/artalk.styl

@@ -1,4 +1,116 @@
 .cmt-body.artalk .artalk
-  --at-color-main: $color-theme
+  margin-top: 1rem
+  .atk-editor-plug-preview
+    scrollbar(0, 0)
   .atk-main-editor
-    border-radius: $border-card
+    border-radius: $border-card
+    .atk-header,.atk-editor-user-wrap
+      border-bottom: 1px dashed var(--block-border)
+      padding: 0.5rem 1rem
+    .atk-editor-user-wrap:empty
+      visibility: hidden
+      padding: 0
+    >.atk-bottom 
+      padding: 8px
+      .atk-plug-btn
+        border-radius: 32px
+        height: 2rem
+        width 2rem
+      .atk-send-btn
+        height: 2rem
+        border-radius: 100px
+        min-width: 5em
+        trans1 all
+        &:hover
+          --at-color-main: $color-hover
+        &:empty
+          display: none
+  .atk-list-comments-wrap>.atk-comment-wrap
+    border-radius: $border-card
+    background: var(--card)
+    box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.02)
+    >.atk-comment
+      padding: 1rem
+    &+.atk-comment-wrap
+      margin-top: .5rem
+  .atk-comment-children
+    border-top: 1px dashed var(--block-border)
+    margin-top: .5rem
+  .atk-avatar
+    padding: 0
+  .atk-avatar img
+    border-radius: 50%
+    width: 36px
+    height: 36px
+  .atk-comment-wrap>.atk-comment>.atk-main
+    margin-left: calc(36px + .5rem)
+  .atk-comment>.atk-main>.atk-header .atk-item.atk-nick
+    color: var(--text-p3)
+    font-weight: 500
+
+  .atk-badge-wrap span
+    border-radius: 100px
+  .atk-height-limit-btn
+    padding: 0.5rem 2rem
+  .atk-list-read-more 
+    margin-top: 2.5rem
+    padding-bottom: 1.5rem
+    .atk-list-read-more-inner
+      padding: 1rem 2rem
+      border-radius: $border-button
+      height: 3rem
+      width: 12rem
+      margin: -1.5rem auto 0
+  .atk-error-layer
+    background: none
+
+.cmt-body
+  .artalk, .atk-layer-wrap, .artalk.atk-dark-mode, .atk-layer-wrap.atk-dark-mode
+    --at-color-font: var(--text-p1)
+    --at-color-deep: var(--text-p2)
+    --at-color-sub: var(--text-p3)
+    --at-color-grey: var(--text-p4)
+    --at-color-meta: var(--text-p4)
+    --at-color-border: var(--block-border)
+    --at-color-light: var(--theme-link)
+    --at-color-bg: var(--card)
+    --at-color-bg-transl: var(--block-border)
+    --at-color-bg-grey: var(--block)
+    --at-color-bg-grey-transl: orange
+    --at-color-bg-light: rgba(29, 161, 242, 1)
+    --at-color-main: $color-theme
+    --at-color-red: $c-red
+    --at-color-green: $c-green
+    --at-color-gradient: linear-gradient(180deg, transparent, var(--card), 50%, var(--card))
+
+.md-text .atk-comment>.atk-main>.atk-body
+  overflow: visible
+
+
+// override
+.md-text .cmt-body.artalk .artalk
+  --gap-p: 1rem
+  p
+    line-height: 1.5
+    font-size: $fs-15
+    >img
+      margin: var(--gap-p) auto
+      border-radius: $border-image-s
+  a>img
+    display: inline
+  p>img[atk-emoticon]
+    max-height: 1.5em
+    transform: scale(1.2)
+    margin: 0 4px
+    vertical-align: bottom
+  ul li, ol li
+    font-size: $fs-14
+  blockquote
+    position: relative
+    border-left: none
+    background: none
+    padding: 0.25rem 1rem
+    p
+      color: var(--text-p3)
+  .atk-content a
+    --at-color-main: var(--theme-link)

package/source/css/_plugins/comments/twikoo.styl

@@ -5,7 +5,7 @@
   .tk-content
     .vemoji, .tk-owo-emotion
       width: unset
-      border-radius: $border-image
+      border-radius: $border-image-s
       max-height: 24px
       max-width: 100px
       display: inline
@@ -13,7 +13,7 @@
     img
       max-width: 400px
       max-height: 400px
-      border-radius: $border-image
+      border-radius: $border-image-s
 
 .OwO
   .OwO-body
@@ -111,7 +111,7 @@
     border: none
     padding: 6px 2rem
     border-radius: $border-card
-    background: var(--block-hover)
+    background: var(--block-border)
     color: var(--text-p1)
     line-height: 2
     font-size: 14px

package/source/css/_plugins/index.styl

@@ -20,13 +20,13 @@ if hexo-config('plugins.katex.enable')
   @import 'katex'
 
 // 评论
-if hexo-config('comments.service') == 'beaudar'
+if hexo-config('comments.service') == 'beaudar' or index(hexo-config('comments.custom_css'), 'beaudar') >= 0
   @import 'comments/beaudar'
-if hexo-config('comments.service') == 'twikoo'
+if hexo-config('comments.service') == 'twikoo' or index(hexo-config('comments.custom_css'), 'twikoo') >= 0
   @import 'comments/twikoo'
-if hexo-config('comments.service') == 'utterances'
+if hexo-config('comments.service') == 'utterances' or index(hexo-config('comments.custom_css'), 'utterances') >= 0
   @import 'comments/utterances'
-if hexo-config('comments.service') == 'waline'
+if hexo-config('comments.service') == 'waline' or index(hexo-config('comments.custom_css'), 'waline') >= 0
   @import 'comments/waline'
-if hexo-config('comments.service') == 'artalk'
+if hexo-config('comments.service') == 'artalk' or index(hexo-config('comments.custom_css'), 'artalk') >= 0
   @import 'comments/artalk'

package/source/css/_plugins/lazyload.styl

@@ -1,9 +1,13 @@
+$lazyTransitionType = hexo-config('plugins.lazyload.transition')
+$loadingImage = hexo-config('plugins.lazyload.loading_image.src')
+$loadingImageSize = convert(hexo-config('plugins.lazyload.loading_image.size'))
+
 img.lazy
   &:not(.loaded)
     opacity: 0
   &.loaded,&.error
     opacity: 1
-  if hexo-config('plugins.lazyload.transition') == 'blur'
+  if $lazyTransitionType == 'blur'
     trans1 all 0.75s
     &:not(.loaded)
       filter blur(50px)
@@ -13,4 +17,47 @@ img.lazy
       -webkit-filter none
   else
     trans1 all 0.38s
-    
+
+
+@keyframes fadeIn
+  from { opacity: 0; }
+  to { opacity: 1; }
+
+@keyframes blurIn
+  from
+    opacity: 0
+    filter: blur(50px)
+    -webkit-filter: blur(50px)
+  to
+    opacity: 1
+    filter: blur(0px)
+    -webkit-filter: blur(0px)
+
+article img.lazy
+  &:not(.loaded)
+    opacity: 1
+    border-radius: 4px
+    filter none
+    transition: none
+  if $loadingImage
+    &.loading
+      background: url($loadingImage) center center / $loadingImageSize no-repeat
+  else
+    &.loading
+      background: url($loadingIcon) center center / $loadingImageSize no-repeat
+      min-width: $loadingImageSize
+      min-height: $loadingImageSize
+
+  &.loaded
+    animation: fadeIn 0.38s ease-out
+    if $loadingImage
+      background: none
+  if $lazyTransitionType == 'blur'
+    &.loaded
+      animation: blurIn .75s ease-out
+
+  &.error
+    background: none
+    min-width: $loadingImageSize
+    min-height: $loadingImageSize
+

package/source/js/search/local-search.js

@@ -1,170 +1,182 @@
-// A local search script with the help of
-// [hexo-generator-search](https://github.com/PaicHyperionDev/hexo-generator-search)
-// Copyright (C) 2015
-// Joseph Pan <http://github.com/wzpan>
-// Shuhao Mao <http://github.com/maoshuhao>
-// This library is free software; you can redistribute it and/or modify
-// it under the terms of the GNU Lesser General Public License as
-// published by the Free Software Foundation; either version 2.1 of the
-// License, or (at your option) any later version.
-//
-// This library is distributed in the hope that it will be useful, but
-// WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-// Lesser General Public License for more details.
-//
-// You should have received a copy of the GNU Lesser General Public
-// License along with this library; if not, write to the Free Software
-// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
-// 02110-1301 USA
-//
-// Modified by:
-// Pieter Robberechts <http://github.com/probberechts>
-
-/*exported searchFunc*/
+var searchCache = null;
+var searchCacheKey = 'search_cache_v1';
+
 var searchFunc = function(path, filter, wrapperId, searchId, contentId) {
 
   function getAllCombinations(keywords) {
-    var i, j, result = [];
-
-    for (i = 0; i < keywords.length; i++) {
-        for (j = i + 1; j < keywords.length + 1; j++) {
-            result.push(keywords.slice(i, j).join(" "));
-        }
+    const result = [];
+    const maxLen = 3; // 组合最大长度
+    for (let i = 0; i < keywords.length; i++) {
+      for (let j = i + 1; j <= Math.min(i + maxLen, keywords.length); j++) {
+        result.push(keywords.slice(i, j).join(" "));
+      }
     }
     return result;
   }
 
-  $.ajax({
-    url: path,
-    dataType: "json",
-    success: function(jsonResponse) {
-      var datas = jsonResponse;
-      var $input = document.getElementById(searchId);
-      if (!$input) { return; }
-      var $resultContent = document.getElementById(contentId);
-      var $wrapper = document.getElementById(wrapperId);
-
-      $input.addEventListener("input", function(){
-        var resultList = [];
-        var keywords = getAllCombinations(this.value.trim().toLowerCase().split(" "))
-          .sort(function(a,b) { return b.split(" ").length - a.split(" ").length; });
-        $resultContent.innerHTML = "";
-        if (this.value.trim().length <= 0) {
-          $wrapper.setAttribute('searching', 'false');
-          return;
-        }
-        $wrapper.setAttribute('searching', 'true');
-        // perform local searching
-        datas.forEach(function(data) {
-          if (!data.content?.trim().length) { return }
-          var matches = 0;
-          if (filter && !data.path.includes(filter)) { return }
-          var dataTitle = data.title?.trim() || 'Untitled';
-          var dataTitleLowerCase = dataTitle.toLowerCase();
-          var dataContent = data.content;
-          var dataContentLowerCase = dataContent.toLowerCase();
-          var dataUrl = data.path.startsWith('//') ? data.path.slice(1) : data.path; // 避免文章设置永久链接导致点击打开失败
-          var indexTitle = -1;
-          var indexContent = -1;
-          var firstOccur = -1;
-          // only match artiles with not empty contents
-          if (dataContent !== "") {
-            keywords.forEach(function(keyword) {
-              indexTitle = dataTitleLowerCase.indexOf(keyword);
-              indexContent = dataContentLowerCase.indexOf(keyword);
-
-              if( indexTitle >= 0 || indexContent >= 0 ){
-                matches += 1;
-                if (indexContent < 0) {
-                  indexContent = 0;
-                }
-                if (firstOccur < 0) {
-                  firstOccur = indexContent;
-                }
-              }
-            });
-          }
-          // show search results
-          if (matches > 0) {
-            var searchResult = {};
-            searchResult.rank = matches;
-            searchResult.str = "<li><a href='"+ dataUrl +"'><span class='search-result-title'>"+ dataTitle +"</span>";
-            if (firstOccur >= 0) {
-              // cut out 100 characters
-              var start = firstOccur - 20;
-              var end = firstOccur + 80;
-
-              if(start < 0){
-                start = 0;
-              }
-
-              if(start == 0){
-                end = 100;
-              }
-
-              if(end > dataContent.length){
-                end = dataContent.length;
-              }
-
-              var matchContent = dataContent.substring(start, end);
-
-              // highlight all keywords
-              var regS = new RegExp(keywords.join("|"), "gi");
-              matchContent = matchContent.replace(regS, function(keyword) {
-                return "<span class=\"search-keyword\">"+keyword+"</span>";
-              });
-
-              searchResult.str += "<p class=\"search-result-content\">" + matchContent +"...</p>";
-            }
-            searchResult.str += "</a></li>";
-            resultList.push(searchResult);
+  function escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  function initSearch(datas) {
+    var $input = document.getElementById(searchId);
+    if (!$input) { return; }
+    if ($input._searchInitialized) return; // 防止重复绑定
+    $input._searchInitialized = true;
+
+    var $resultContent = document.getElementById(contentId);
+    var $wrapper = document.getElementById(wrapperId);
+
+    $input.addEventListener("input", function() {
+      var resultList = [];
+      var keywords = getAllCombinations(this.value.trim().toLowerCase().split(" "))
+        .sort(function(a,b) { return b.split(" ").length - a.split(" ").length; });
+      $resultContent.innerHTML = "";
+      if (this.value.trim().length <= 0) {
+        $wrapper.setAttribute('searching', 'false');
+        return;
+      }
+      $wrapper.setAttribute('searching', 'true');
+
+      datas.forEach(function(data) {
+        if (!data.content?.trim().length) return;
+        if (filter && !data.path.includes(filter)) return;
+
+        var matches = 0;
+        var dataTitle = data.title?.trim() || 'Untitled';
+        var dataTitleLowerCase = dataTitle.toLowerCase();
+        var dataContent = data.content;
+        var dataContentLowerCase = dataContent.toLowerCase();
+        var dataUrl = data.path.startsWith('//') ? data.path.slice(1) : data.path;
+
+        var indexTitle = -1;
+        var indexContent = -1;
+        var firstOccur = -1;
+
+        keywords.forEach(function(keyword) {
+          indexTitle = dataTitleLowerCase.indexOf(keyword);
+          indexContent = dataContentLowerCase.indexOf(keyword);
+          if (indexTitle >= 0 || indexContent >= 0) {
+            matches += 1;
+            if (indexContent < 0) indexContent = 0;
+            if (firstOccur < 0) firstOccur = indexContent;
           }
         });
-        if (resultList.length) {
-          resultList.sort(function(a, b) {
-              return b.rank - a.rank;
-          });
-          var result ="<ul class=\"search-result-list\">";
-          for (var i = 0; i < resultList.length; i++) {
-            result += resultList[i].str;
+
+        if (matches > 0) {
+          const li = document.createElement('li');
+          const a = document.createElement('a');
+          a.href = dataUrl;
+
+          const titleSpan = document.createElement('span');
+          titleSpan.className = 'search-result-title';
+          titleSpan.textContent = dataTitle;
+          a.appendChild(titleSpan);
+
+          if (firstOccur >= 0) {
+            var start = Math.max(0, firstOccur - 20);
+            var end = Math.min(dataContent.length, firstOccur + 80);
+            if (start === 0) end = 100;
+            var matchContent = dataContent.substring(start, end);
+
+            var regS = new RegExp(keywords.map(escapeRegExp).join("|"), "gi");
+            matchContent = matchContent.replace(regS, function(keyword) {
+              return "<span class=\"search-keyword\">" + keyword + "</span>";
+            });
+
+            const para = document.createElement('p');
+            para.className = 'search-result-content';
+            para.innerHTML = matchContent + '...';
+            a.appendChild(para);
           }
-          result += "</ul>";
-          $resultContent.innerHTML = result;
+
+          li.appendChild(a);
+          resultList.push({ rank: matches, element: li });
         }
       });
-    }
-  });
+
+      if (resultList.length) {
+        resultList.sort(function(a, b) {
+          return b.rank - a.rank;
+        });
+
+        const ul = document.createElement('ul');
+        ul.className = 'search-result-list';
+        resultList.forEach(function(item) {
+          ul.appendChild(item.element);
+        });
+
+        $resultContent.innerHTML = '';
+        $resultContent.appendChild(ul);
+      }
+    });
+  }
+
+  if (!searchCache) {
+    // 数据还没准备好，延迟初始化
+    const timer = setInterval(() => {
+      if (searchCache) {
+        clearInterval(timer);
+        initSearch(searchCache);
+      }
+    }, 100);
+  } else {
+    initSearch(searchCache);
+  }
 };
 
 utils.jq(() => {
-  var $inputArea = $("input#search-input");
-    if ($inputArea.length == 0) {
-      return;
+  (function preloadSearchData() {
+    var path = ctx.search.path;
+    if (path.startsWith('/')) {
+      path = path.substring(1);
     }
-    var $resultArea = document.querySelector("div#search-result");
-    $inputArea.focus(function() {
-      var path = ctx.search.path;
-      if (path.startsWith('/')) {
-        path = path.substring(1);
-      }
-      path = ctx.root + path;
-      const filter = $inputArea.attr('data-filter') || '';
-      searchFunc(path, filter, 'search-wrapper', 'search-input', 'search-result');
-    });
-    $inputArea.keydown(function(e) {
-      if (e.which == 13) {
-        e.preventDefault();
+    path = ctx.root + path;
+
+    try {
+      var cached = localStorage.getItem(searchCacheKey);
+      if (cached) {
+        searchCache = JSON.parse(cached);
       }
-    });
-    var observer = new MutationObserver(function(mutationsList, observer) {
-      if (mutationsList.length == 1) {
-        if (mutationsList[0].addedNodes.length) {
-          $('.search-wrapper').removeClass('noresult');
-        } else if (mutationsList[0].removedNodes.length) {
-          $('.search-wrapper').addClass('noresult');
+    } catch (e) {
+      console.warn('搜索缓存解析失败', e);
+    }
+
+    fetch(path)
+      .then(res => res.json())
+      .then(json => {
+        searchCache = json;
+        try {
+          localStorage.setItem(searchCacheKey, JSON.stringify(json));
+        } catch (e) {
+          console.warn('搜索缓存写入失败', e);
         }
-      }
-    });
-    observer.observe($resultArea, { childList: true });
+      });
+  })();
+
+  var $inputArea = $("input#search-input");
+  if ($inputArea.length == 0) return;
+  var $resultArea = document.querySelector("div#search-result");
+
+  $inputArea.focus(function() {
+    var path = ctx.search.path;
+    if (path.startsWith('/')) {
+      path = path.substring(1);
+    }
+    path = ctx.root + path;
+    const filter = $inputArea.attr('data-filter') || '';
+    searchFunc(path, filter, 'search-wrapper', 'search-input', 'search-result');
+  });
+
+  $inputArea.keydown(function(e) {
+    if (e.which == 13) {
+      e.preventDefault();
+    }
+  });
+
+  const observer = new MutationObserver(function(mutationsList) {
+    const hasResults = $resultArea.querySelector(".search-result-list li");
+    $('.search-wrapper').toggleClass('noresult', !hasResults);
   });
+  observer.observe($resultArea, { childList: true, subtree: true });
+});

package/source/js/services/artalk_latest_comment.js

@@ -10,7 +10,7 @@ utils.jq(() => {
           continue;
         }
         utils.request(el, api, async resp => {
-          const data = await resp.json();
+          var data = await resp.json();
           data = data.data || [];
           data.forEach((item, i) => {
             var cell = '<div class="timenode" index="' + i + '">';