hexo-theme-stellar 1.21.0 → 1.22.0

package/_config.yml

@@ -1,6 +1,6 @@
 ######## Stellar info ########
 stellar:
-  version: '1.21.0'
+  version: '1.22.0'
   homepage: 'https://xaoxuu.com/wiki/stellar/'
   repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
   cdn_css: # Use cdn links instead of /css/main.css
@@ -171,8 +171,8 @@ comments:
   # Artalk
   # https://artalk.js.org/
   artalk:
-    css: https://unpkg.com/artalk@2.4.3/dist/Artalk.css
-    js: https://unpkg.com/artalk@2.4.3/dist/Artalk.js
+    css: https://unpkg.com/artalk@2.7/dist/Artalk.css
+    js: https://unpkg.com/artalk@2.7/dist/Artalk.js
     server: # 后端服务地址
     placeholder: ''
     darkMode: auto
@@ -272,6 +272,12 @@ tag_plugins:
       unfinished:
         color: red
         label: 未完成
+  # {% gallery %}
+  gallery:
+    layout: grid # grid / flow
+    size: mix # s / m / l / xl / mix
+    ratio: square # origin / square
+
       
 
 

package/layout/_partial/plugins/comments/artalk/script.ejs

@@ -8,7 +8,7 @@
       if (!path) {
         path = decodeURI(window.location.pathname);
       }
-      var artalk = new Artalk({
+      var artalk = Artalk.init({
         el: '#artalk_container',
         pageKey: path,
         pageTitle: '<%= page.title || page.seo_title %>',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-stellar",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "Elegant and powerful theme for Hexo.",
   "main": "package.json",
   "scripts": {

package/scripts/tags/lib/banner.js

@@ -10,7 +10,6 @@
 'use strict';
 
 module.exports = ctx => function(args, content) {
-  const url_for = require('hexo-util').url_for.bind(ctx)
   args = ctx.args.map(args, ['bg', 'avatar', 'link'], ['title', 'subtitle'])
   var el = ''
   el += `<div class="tag-plugin banner">`

package/scripts/tags/lib/gallery.js

@@ -1,13 +1,16 @@
 /**
- * gallery.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * gallery.js v2.1 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% gallery size:small/medium/large %}
- * /xxx.png
- * /xxx.png
- * /xxx.png
- * /xxx.png
+ * {% gallery [layout:grid/flow] [size:mix/s/m/l/xl] [ratio:origin/square] %}
+ * ![title](/xxx.png)
+ * ![title](/xxx.png)
+ * ![title](/xxx.png)
+ * ![title](/xxx.png)
  * {% endgallery %}
+ * 
+ * layout:grid 网格布局，支持通过 size/ratio 设置尺寸和长宽比
+ * layout:flow 瀑布流布局，竖排，适合图片量大的时候使用（体验不佳请慎用）
  */
 
 'use strict'
@@ -29,23 +32,27 @@ function img(src, alt) {
 }
 
 module.exports = ctx => function(args, content) {
-  args = ctx.args.map(args, ['size'])
+  args = ctx.args.map(args, ['layout', 'size', 'ratio'])
+  if (args.layout == null) {
+    args.layout = ctx.theme.config.tag_plugins.gallery.layout
+  }
+  if (args.size == null) {
+    args.size = ctx.theme.config.tag_plugins.gallery.size
+  }
+  if (args.ratio == null) {
+    args.ratio = ctx.theme.config.tag_plugins.gallery.ratio
+  }
   var el = ''
-  el += '<div class="tag-plugin gallery"'
-  el += ' ' + ctx.args.joinTags(args, ['size']).join(' ')
-  el += '>'
-  const rows = content.split(/<!--\s*row(.*?)\s*-->/g).filter(item => item.trim().length > 0)
-  for (let row of rows) {
-    const img_mds = row.split('\n').filter(item => item.trim().length > 0)
-    for (let md of img_mds) {
-      const matches = md.match(/\!\[(.*?)\]\((.*?)\)/i)
-      if (matches?.length > 2) {
-        let alt = matches[1]
-        let src = matches[2]
-        el += `<div class="cell">${img(src, alt)}</div>`
-      }
+  el += `<div class="tag-plugin gallery" ${ctx.args.joinTags(args, ['layout', 'size', 'ratio']).join(' ')}>`
+  const img_mds = content.split('\n').filter(item => item.trim().length > 0)
+  for (let md of img_mds) {
+    const matches = md.match(/\!\[(.*?)\]\((.*?)\)/i)
+    if (matches?.length > 2) {
+      let alt = matches[1]
+      let src = matches[2]
+      el += `<div class="cell">${img(src, alt)}</div>`
     }
   }
-  el += '</div>'
+  el += `</div>`
   return el
 }

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

@@ -100,7 +100,8 @@
     .subtitle
       font-size: $fs-14
 
-.tag-plugin.banner:hover
-  img.bg
-    transform: scale(1.01)
-    trans1(transform, 2s)
+.tag-plugin.banner
+  trans1(transform, 2s)
+  &:hover
+    img.bg
+     transform: scale(1.01)

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

@@ -1,12 +1,6 @@
 .tag-plugin.gallery
-  border-radius: 8px
-  column-count: 4
-  column-gap: 0
-  margin-left: -4px
-  margin-right: -4px
   .cell
     display: block
-    padding: 4px
     overflow hidden
     z-index 0
     position: relative
@@ -18,19 +12,16 @@
   img 
     object-fit: cover
     max-height: 100%
-    overflow: hidden
     display: block
   .image-meta
     position: absolute
     z-index: 1
-    margin: 4px
     top: 0
     left: 0
     right: 0
     bottom: 0
     pointer-events: none
     background: transparent
-    border-radius: 8px
     trans1(background)
     display: flex
     flex-direction: column
@@ -40,7 +31,65 @@
       font-size: $fs-13
       color: transparent
       line-height: 1.2
-      margin: 4px
+      margin: 0.5rem
       trans1(color)
       &:empty
         display: none
+
+.tag-plugin.gallery[layout='grid'] .cell
+  trans1(transform, 0.5s)
+  &:hover
+    img
+      transform: scale(1.1)
+    
+
+// 网格布局
+.tag-plugin.gallery[layout='grid']
+  display: grid
+  &[size='s']
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))
+    grid-gap: 2px
+    .cell,img
+      border-radius: 2px
+  &[size='m']
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+    grid-gap: 4px
+    .cell,img
+      border-radius: 4px
+  &[size='l']
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
+    grid-gap: 8px
+    .cell,img
+      border-radius: 8px
+  &[size='xl'] // 2列
+    grid-template-columns: repeat(2, 1fr)
+    grid-gap: 16px
+    .cell,img
+      border-radius: 16px
+  &[size='mix'] // 1张大图+2张小图
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+    grid-gap: 4px
+    .cell,img
+      border-radius: 4px
+    .cell
+      &:nth-child(3n+1)
+        grid-column: auto / span 2
+        grid-row: auto / span 2
+  &[ratio='square']
+    .cell
+      aspect-ratio: 1
+  .cell
+    background: var(--block)
+    img  
+      width: 100%
+      height: 100%
+// 瀑布流布局
+.tag-plugin.gallery[layout='flow']
+  column-count: 3
+  column-gap: 8px
+  .cell
+    border-radius: 8px
+    padding-bottom: 8px
+  .image-meta
+    border-radius: 8px
+    margin-bottom: 8px

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

@@ -24,7 +24,7 @@
       padding: 0.5rem
       font-weight: 500
       font-size: $fs-13
-      color: var(--text-p2)
+      color: var(--text-p1)
     .toc-child .toc-item .toc-link
       padding: 0.25rem 0.5rem 0.25rem 1.3rem
       font-weight: 400
@@ -69,3 +69,14 @@
     color: $color-theme !important
     &:before
       visibility: visible
+
+
+// 激活上级目录时显示子目录
+.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
+  display: block

package/source/js/main.js

@@ -244,9 +244,12 @@ if (stellar.plugins.stellar) {
       const els = document.getElementsByClassName('stellar-' + key + '-api');
       if (els != undefined && els.length > 0) {
         stellar.jQuery(() => {
-          stellar.loadScript(js, { defer: true });
           if (key == 'timeline' || 'memos') {
-            stellar.loadScript(stellar.plugins.marked);
+            stellar.loadScript(stellar.plugins.marked).then(function () {
+              stellar.loadScript(js, { defer: true });
+            });
+          } else {
+            stellar.loadScript(js, { defer: true });
           }
         })
       }