[feat] gallery

_config.yml

@@ -327,7 +327,7 @@ plugins:
     # 可以处理评论区的图片（不支持 iframe 类评论系统）例如：
     # 使用twikoo评论可以写: .tk-content img:not([class*="emo"])
     # 使用waline评论可以写: #waline_container .vcontent img
-    selector: .swiper-slide img # 多个选择器用英文逗号隔开
+    selector: .swiper-slide img, .gallery img # 多个选择器用英文逗号隔开
 
   # swiper
   swiper:

scripts/tags/index.js

@@ -10,6 +10,7 @@ hexo.extend.tag.register('folding', require('./lib/folding')(hexo), true)
 hexo.extend.tag.register('folders', require('./lib/folders')(hexo), true)
 hexo.extend.tag.register('grid', require('./lib/grid')(hexo), true)
 hexo.extend.tag.register('swiper', require('./lib/swiper')(hexo), true)
+hexo.extend.tag.register('gallery', require('./lib/gallery')(hexo), {ends: true})
 
 // data
 hexo.extend.tag.register('users', require('./lib/friends')(hexo))

scripts/tags/lib/gallery.js

@@ -0,0 +1,51 @@
+/**
+ * gallery.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% gallery size:small/medium/large %}
+ * /xxx.png
+ * /xxx.png
+ * /xxx.png
+ * /xxx.png
+ * {% endgallery %}
+ */
+
+'use strict'
+
+function img(src, alt) {
+  let img = ''
+  img += `<img src="${src}"`
+  if (alt?.length > 0) {
+    img += ` alt="${alt}"`
+  }
+  img += `/>`
+  // cap
+  img += `<div class="image-meta">`
+  if (alt?.length > 0) {
+    img += `<span class="image-caption">${alt}</span>`
+  }
+  img += `</div>`
+  return img
+}
+
+module.exports = ctx => function(args, content) {
+  args = ctx.args.map(args, ['size'])
+  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>'
+  return el
+}

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

@@ -0,0 +1,44 @@
+.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
+    &:hover
+      .image-meta
+        opacity: 1
+  img 
+    object-fit: cover
+    height: 100%
+    overflow: hidden
+    display: block
+  .image-meta
+    position: absolute
+    opacity: 0
+    z-index: 1
+    margin: 4px
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    pointer-events: none
+    background: rgba(black, 0.5)
+    border-radius: 8px
+    trans1(opacity)
+    display: flex
+    flex-direction: column
+    justify-content: flex-end
+    .image-caption
+      display: block
+      font-size: $fs-13
+      color: white
+      line-height: 1.2
+      margin: 4px
+      &:empty
+        display: none

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

@@ -3,7 +3,6 @@
   grid-gap: 16px
   grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
   >.cell
-    margin: 1rem 0
     p:first-child>strong:only-child
       font-size: 1rem
   >.cell>
@@ -18,14 +17,6 @@
     p:last-child
       margin-bottom: -0.25em
 
-.md-text .tag-plugin.grid
-  margin-top: -0.5rem
-  margin-bottom: -0.5rem 
-
-.tag-plugin.grid
-  @media screen and (max-width: $device-tablet)
-    display: block
-
 .tag-plugin.grid
   &[bg]>.cell
     padding: 1rem

source/css/_plugins/fancybox.styl

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