[opt] gallery 2.0

_config.yml

@@ -272,6 +272,12 @@ tag_plugins:
       unfinished:
         color: red
         label: 未完成
+  # {% gallery %}
+  gallery:
+    layout: grid # grid / flow
+    size: mix # s / m / l / xl / mix
+    square: true # true / false
+
       
 
 

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">`

scripts/tags/lib/gallery.js

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

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

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

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
+  &[square='true']
+    .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