hexo-theme-stellar 1.22.0 → 1.23.0

package/source/css/_layout/tag-plugins/copy.styl

@@ -2,17 +2,21 @@
   display: flex
   justify-content: space-between
   box-sizing: border-box
-  background: var(--block)
+  background: var(--card)
   border-radius: $border-bar
   border: 1px solid var(--block-border)
   overflow: hidden
-  width: 320px
-  max-width: 100%
-  &[width='max']
-    width: 100%
-  @media screen and (max-width: $device-mobile-425)
-    min-width: 100%
-
+  width: 100%
+  span
+    line-height: 3
+    padding: 0 1rem
+    background: var(--block)
+    border-right: 1px solid var(--block-border)
+    color: var(--text-p3)
+    font-family: $ff-code
+    font-size: $fs-12
+    font-weight: 700
+    flex-shrink: 0
   input.copy-area
     display: inline-block
     padding: 0
@@ -21,14 +25,13 @@
     line-height: 3
     text-indent: 1rem
   button.copy-btn
-    margin: 0
-    line-height: 3
-    border-left: 1px solid var(--block-border)
+    margin: 2px
+    border-radius: 'calc(%s - 2px)' % $border-bar
     display: inline-block
-    background: var(--block-hover)
+    background: none
     line-height: 0
     font-size: 1rem
     padding: 0 .75rem
     color: var(--text-p2)
     &:hover
-      background: var(--card)
+      background: var(--block-hover)

package/source/css/_layout/tag-plugins/friends.styl

@@ -1,42 +1,9 @@
-.users-wrap
-  overflow: hidden
-  .group-header
-    margin: 0 0 1rem
-    p
-      margin: 0
-      font-size: $fs-14
-      &:first-child
-        font-size: 1.25rem
-        font-weight: 500
-  .group-body
-    width: 100%
-    display: flex
-    flex-wrap: wrap
-    align-items: stretch
-    &+.group-header
-      margin-top: 2rem
-  .stellar-friends-api
-    display: block
-    
+.users-wrap .grid-box
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
 
 .users-wrap .user-card
-  flex-shrink: 1
-  display: flex
-  align-items: stretch
-  width: 12.5%
-  @media screen and (max-width: 980px)
-    width: 14.28%
-  @media screen and (max-width: 900px)
-    width: 16.66%
-  @media screen and (max-width: 820px)
-    width: 20%
-  @media screen and (max-width: $device-mobile-max)
-    width: 16.66%
-  @media screen and (max-width: $device-mobile)
-    width: 25%
   .card-link
-    margin: 0
-    width: 100%
     color: var(--text-p1)
     font-size: 10px
     font-weight: 500
@@ -50,6 +17,9 @@
     overflow: hidden
     position: relative
     padding: 1rem 0.5rem
+    .name
+      max-width: 100%
+      txt-ellipsis()
     img
       object-fit: cover
       display: block
@@ -62,7 +32,7 @@
 // transform
 .users-wrap .user-card .card-link
   >img
-    trans2 transform box-shadow
+    floatable-trans()
   &:hover
     background: var(--block-hover)
     img

package/source/css/_layout/tag-plugins/gallery.styl

@@ -1,5 +1,5 @@
 .tag-plugin.gallery
-  .cell
+  .grid-cell,.flow-cell
     display: block
     overflow hidden
     z-index 0
@@ -30,66 +30,83 @@
       display: block
       font-size: $fs-13
       color: transparent
+      pointer-events: none
       line-height: 1.2
       margin: 0.5rem
       trans1(color)
+      text-align: left
       &:empty
         display: none
 
-.tag-plugin.gallery[layout='grid'] .cell
-  trans1(transform, 0.5s)
+.tag-plugin.gallery .grid-cell
+  >img
+    trans1(transform, 0.5s)
   &:hover
-    img
+    >img
       transform: scale(1.1)
     
 
 // 网格布局
-.tag-plugin.gallery[layout='grid']
+.tag-plugin.gallery.grid-box
   display: grid
+  &[size='xs']
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
+    grid-gap: 2px
+    .grid-cell,img
+      border-radius: 2px
+    .image-caption
+      font-size: $fs-12
   &[size='s']
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))
     grid-gap: 2px
-    .cell,img
+    .grid-cell,img
       border-radius: 2px
   &[size='m']
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
     grid-gap: 4px
-    .cell,img
+    .grid-cell,img
       border-radius: 4px
   &[size='l']
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
     grid-gap: 8px
-    .cell,img
+    .grid-cell,img
       border-radius: 8px
   &[size='xl'] // 2列
     grid-template-columns: repeat(2, 1fr)
     grid-gap: 16px
-    .cell,img
+    .grid-cell,img
       border-radius: 16px
   &[size='mix'] // 1张大图+2张小图
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
     grid-gap: 4px
-    .cell,img
+    .grid-cell,img
       border-radius: 4px
-    .cell
+    .grid-cell
       &:nth-child(3n+1)
         grid-column: auto / span 2
         grid-row: auto / span 2
   &[ratio='square']
-    .cell
+    .grid-cell
       aspect-ratio: 1
-  .cell
+  &[ratio='portrait']
+    .grid-cell
+      aspect-ratio: 2 / 3
+  .grid-cell
     background: var(--block)
     img  
       width: 100%
       height: 100%
+
 // 瀑布流布局
-.tag-plugin.gallery[layout='flow']
+.tag-plugin.gallery.flow-box
   column-count: 3
   column-gap: 8px
-  .cell
+  .flow-cell
     border-radius: 8px
     padding-bottom: 8px
+    img  
+      width: 100%
+      height: 100%
   .image-meta
     border-radius: 8px
     margin-bottom: 8px

package/source/css/_layout/tag-plugins/grid.styl

@@ -26,7 +26,4 @@
   &[bg='card']>.cell
     background: var(--card)
     box-shadow: $boxshadow-card
-    trans2 box-shadow transform
-    &:hover
-      transform: translateY(-1px)
-      box-shadow: $boxshadow-card-float
+    hover-float()

package/source/css/_layout/tag-plugins/link.styl

@@ -13,10 +13,7 @@
   max-width: 100%
   box-shadow: $boxshadow-card
   border-radius: $border-bar
-  trans2: box-shadow transform
-  &:hover
-    box-shadow: $boxshadow-card-float
-    transform: translateY(-1px)
+  hover-float()
 
 .md-text .link-card.plain
   flex-direction: row

package/source/css/_layout/tag-plugins/sites.styl

@@ -1,46 +1,19 @@
-.sites-wrap
-  .group-header
-    margin: 1rem 0
-    p
-      margin: 0
-      font-size: $fs-14
-      &:first-child
-        font-size: 1.25rem
-        font-weight: 500
-  .group-body
-    width: 100%
-    &+.group-header
-      margin-top: 2rem
-  .stellar-sites-api
-    display: block
-
-.sites-wrap .group-body
+.sites-wrap .grid-box
   display: grid
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
   grid-gap: 1rem 1rem
-  grid-template-columns: repeat(auto-fill, "calc((100% - 3 * %s) / 4)" % 1rem)
-  @media screen and (max-width: $device-laptop)
-    grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
-  @media screen and (max-width: 900px)
-    grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)
-  @media screen and (max-width: $device-mobile-max)
-    grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
-  @media screen and (max-width: $device-mobile)
-    grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)
+  .grid-cell
+    aspect-ratio: 1.5
 
-.sites-wrap .group-body .site-card .card-link
+.sites-wrap .site-card .card-link
   width: 100%
   display: flex
   flex-direction: column
   >img
-    width: 100%
-    height 100px
-    @media screen and (max-width: $device-laptop)
-      height: 120px
-    @media screen and (max-width: 900px)
-      height: 150px
-    @media screen and (max-width: $device-tablet)
-      height: 120px
     object-fit: cover
+    aspect-ratio: 1.5
+    width: 100%
+    height: 100%
     box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
   .info
     margin-top: 0.5rem
@@ -71,13 +44,12 @@
       display: -webkit-box
       -webkit-box-orient: vertical
       overflow: hidden
-      -webkit-line-clamp: 2
+      -webkit-line-clamp: 1
 
 // transform
 .sites-wrap .site-card .card-link
   >img
-    trans2: box-shadow transform
+    floatable-trans()
   &:hover
     >img
-      box-shadow: $boxshadow-float, $boxshadow-card-float
-      transform: translateY(-2px)
+      floatable-float()

package/source/css/_layout/tag-plugins/tabs.styl

@@ -79,6 +79,8 @@
         display: none
       &.active
         display: block
+  .tab-content:has(.grid-box)
+    width: 100%
 
 .md-text.indent .tag-plugin.tabs .tab-content p:not([class])
   text-indent: 'calc(%s * 2)' % $fs-p

package/source/css/_layout/widgets/ghrepo.styl

@@ -6,14 +6,11 @@
     background: var(--card)
     border-radius: $border-block
     box-shadow: $boxshadow-card
-    trans2 box-shadow transform
+    hover-float()
     >div+div
       margin-top: 0.5rem
     span
       color: var(--text-p2)
-    &:hover
-      box-shadow: $boxshadow-card-float
-      transform: translateY(-1px)
     svg
       margin-right: 4px
     .flex-row

package/source/css/_layout/widgets/toc_common.styl

@@ -69,14 +69,28 @@
     color: $color-theme !important
     &:before
       visibility: visible
+  
+// 始终折叠
+.widget-wrapper.toc[collapse='true']
+  .toc-item a.toc-link+ol
+    display: none
+  // 激活上级目录时显示子目录
+  .toc a.toc-link.active+ol
+    display: block
 
+// 自动折叠
+.widget-wrapper.toc[collapse='auto']
+  .toc-item a.toc-link+ol
+    display: none
+  // 激活上级目录时显示子目录
+  .toc a.toc-link.active+ol
+    display: block
+  // 鼠标放上去时显示子目录
+  &:hover a.toc-link+ol
+    display: block
 
-// 激活上级目录时显示子目录
-.toc-item a.toc-link+ol
-  display: none
-.toc a.toc-link.active+ol
-  display: block
-ol:has(> .toc-item a.active)
-  display: block
-.doc-tree:hover a.toc-link+ol
+// 子目录激活时显示
+.widget-wrapper.toc[collapse='true'] ol:has(> .toc-item a.active)
   display: block
+.widget-wrapper.toc[collapse='auto'] ol:has(> .toc-item a.active)
+  display: block

package/source/css/_plugins/copycode.styl

@@ -33,6 +33,7 @@
   color: $c-orange
   opacity: 0.75
 
-.md-text .tag-plugin[child=codeblock]
+.md-text .folding[child=codeblock]
   .highlight .code .copy-btn
+    margin-top: 1rem
     border-radius: $border-bar

package/source/css/_plugins/fancybox.styl

@@ -1,9 +1,6 @@
 img[fancybox='true']
   cursor: zoom-in
 
-.swiper-slide
-  cursor: zoom-in
-
-.tag-plugin.gallery
+.fancybox
   img 
     cursor: zoom-in

package/source/css/_plugins/index.styl

@@ -9,7 +9,7 @@ if hexo-config('plugins.scrollreveal.enable')
   @import 'scrollreveal'
 if hexo-config('plugins.fancybox.enable')
   @import 'fancybox'
-if hexo-config('plugins.mermaid.enable')
+if hexo-config('plugins.mermaid.style_optimization')
   @import 'mermaid'
 if hexo-config('plugins.copycode.enable')
   @import 'copycode'

package/source/css/_plugins/lazyload.styl

@@ -14,9 +14,9 @@ if hexo-config('plugins.lazyload.transition') == 'blur'
     &.loaded,&.error
       filter none
       -webkit-filter none
-  .group-body .site-card .card-link>img
+  .site-card .card-link>img
     trans-site filter
-  .group-body .user-card .card-link>img
+  .user-card .card-link>img
     trans-user filter
 else
   img.lazy
@@ -25,7 +25,7 @@ else
       opacity: 0
     &.loaded,&.error
       opacity: 1
-  .group-body .site-card .card-link>img
+  .site-card .card-link>img
     trans-site opacity
-  .group-body .user-card .card-link>img
+  .user-card .card-link>img
     trans-user opacity

package/source/js/main.js

@@ -44,7 +44,7 @@ const util = {
       el.select();
       document.execCommand("Copy");
       if (msg && msg.length > 0) {
-        hud.toast(msg);
+        hud.toast(msg, 2500);
       }
     }
   },
@@ -59,17 +59,15 @@ const util = {
 
 const hud = {
   toast: (msg, duration) => {
-    duration = isNaN(duration) ? 2000 : duration;
+    const d = Number(isNaN(duration) ? 2000 : duration);
     var el = document.createElement('div');
     el.classList.add('toast');
+    el.classList.add('show');
     el.innerHTML = msg;
     document.body.appendChild(el);
-    setTimeout(function () {
-      var d = 0.5;
-      el.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
-      el.style.opacity = '0';
-      setTimeout(function () { document.body.removeChild(el) }, d * 1000);
-    }, duration);
+
+    setTimeout(function(){ document.body.removeChild(el) }, d);
+    
   },
 
 }

package/source/js/plugins/copycode.js

@@ -13,7 +13,7 @@ codeElementArr.forEach(code => {
 
     codeCopyBtn.innerText = stellar.plugins.copycode.success_text
     codeCopyBtn.classList.add('success')
-
+    hud.toast(stellar.plugins.copycode.toast)
     setTimeout(() => {
       codeCopyBtn.innerText = stellar.plugins.copycode.default_text
       codeCopyBtn.classList.remove('success')

package/source/js/plugins/friends.js

@@ -47,17 +47,17 @@ const friendsjs = {
     $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
     friendsjs.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
-      const arr = data.content || data;
-      arr.forEach((item, i) => {
-        var user = '<div class="user-card">';
-        user += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer"';
-        user += ' href="' + (item.html_url || item.url) + '">';
-        user += '<img src="' + (item.avatar_url || item.avatar || cfg.avatar) + '" onerror="javascript:this.src=\'' + cfg.avatar + '\';">';
-        user += '<div class="name"><span>' + (item.title || item.login) + '</span></div>';
-        user += '</a>';
-        user += '</div>';
-        $(el).find('.group-body').append(user);
-      });
+      for (let item of (data.content || data)) {
+        var cell = `<div class="grid-cell user-card">`;
+        cell += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.html_url || item.url}">`;;
+        cell += `<img src="${item.avatar_url || item.avatar || item.icon || cfg.avatar}" onerror="javascript:this.removeAttribute(\'data-src\');this.src=\'${cfg.avatar}\';"/>`;
+        cell += `<div class="name image-meta">`;
+        cell += `<span class="image-caption">${item.title || item.login}</span>`;
+        cell += `</div>`;
+        cell += `</a>`;
+        cell += `</div>`;
+        $(el).find('.grid-box').append(cell);
+      }
     }, function() {
       $(el).find('.loading-wrap svg').remove();
       $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');

package/source/js/plugins/sites.js

@@ -47,20 +47,19 @@ const sitesjs = {
     $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
     sitesjs.requestAPI(cfg.api, function(data) {
       $(el).find('.loading-wrap').remove();
-      const arr = data.content;
-      arr.forEach((item, i) => {
-        var cell = '<div class="site-card">';
-        cell += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + item.url + '">';
-        cell += '<img src="' + (item.screenshot || ('https://api.vlts.cc/screenshot?url=' + item.url + '&width=1280&height=720')) + '" onerror="javascript:this.src=\'' + cfg.screenshot + '\';"/>';
-        cell += '<div class="info">';
-        cell += '<img src="' + (item.avatar || cfg.avatar) + '" onerror="javascript:this.src=\'' + cfg.avatar + '\';"/>';
-        cell += '<span class="title">' + item.title + '</span>';
-        cell += '<span class="desc">' + (item.description || item.url) + '</span>';
-        cell += '</div>';
-        cell += '</a>';
-        cell += '</div>';
-        $(el).find('.group-body').append(cell);
-      });
+      for (let item of data.content) {
+        var cell = `<div class="grid-cell site-card">`;
+        cell += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`;
+        cell += `<img src="${item.cover || item.screenshot}" onerror="javascript:this.removeAttribute(\'data-src\');this.src=\'${cfg.screenshot}\';"/>`;
+        cell += `<div class="info">`;
+        cell += `<img src="${item.icon || item.avatar || cfg.avatar}" onerror="javascript:this.removeAttribute(\'data-src\');this.src=\'${cfg.avatar}\';"/>`;
+        cell += `<span class="title">${item.title}</span>`;
+        cell += `<span class="desc">${item.description || item.url}</span>`;
+        cell += `</div>`;
+        cell += `</a>`;
+        cell += `</div>`;
+        $(el).find('.grid-box').append(cell);
+      }
     }, function() {
       $(el).find('.loading-wrap svg').remove();
       $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');

package/_data/links.yml

@@ -1,7 +0,0 @@
-# 不要直接在这里写，要复制到 blog/source/_data/links.yml 位置
-'示例':
-  - title: XAOXUU
-    avatar: https://bu.dusays.com/2021/09/24/2f74810ceb3d3.png
-    url: https://xaoxuu.com
-    screenshot: https://bu.dusays.com/2022/10/23/63542895cfd29.png
-    description:

package/layout/mathjax.ejs

@@ -1,29 +0,0 @@
-<% if (theme.plugins.mathjax.enable){ %>
-    <script type="text/x-mathjax-config">
-      MathJax.Hub.Config({
-          tex2jax: {
-            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
-            processEscapes: true
-          }
-        });
-      </script>
-
-    <script type="text/x-mathjax-config">
-      MathJax.Hub.Config({
-            tex2jax: {
-              skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
-            }
-          });
-      </script>
-
-    <script type="text/x-mathjax-config">
-      MathJax.Hub.Queue(function() {
-              var all = MathJax.Hub.getAllJax(), i;
-              for(i=0; i < all.length; i += 1) {
-                  all[i].SourceElement().parentNode.className += ' has-jax';
-              }
-          });
-      </script>
-
-    <script type="text/javascript" src="<%- theme.plugins.mathjax.cdn %>"></script>
-<% } %>

package/layout/mermaid.ejs

@@ -1,32 +0,0 @@
-<% if (theme.plugins.mermaid.enable) { %>
-  <script type="text/javascript" src="<%- theme.plugins.mermaid.js %>"></script>
-
-  <script>
-    var mermaid_config = {
-      startOnLoad: true,
-      theme:
-        "<%- theme.style.darkmode %>" == "auto" &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? "dark"
-          : "<%- theme.plugins.mermaid.theme %>",
-      logLevel: 3,
-      themeVariables: {
-        darkMode: true
-      },
-      flowchart: {
-        useMaxWidth: false,
-        htmlLabels: true,
-        curve: "linear"
-      },
-      gantt: {
-        axisFormat: "%Y/%m/%d"
-      },
-      sequence: {
-        actorMargin: 50
-      }
-    }
-    if (window.mermaid) {
-      mermaid.initialize(mermaid_config);
-    }
-  </script>
-<% } %>