`
diff --git a/scripts/tags/lib/gallery.js b/scripts/tags/lib/gallery.js
index 0f65589..c356a13 100644
--- a/scripts/tags/lib/gallery.js
+++ b/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 += `
`
+ el += `
`
const img_mds = content.split('\n').filter(item => item.trim().length > 0)
for (let md of img_mds) {
const matches = md.match(/\!\[(.*?)\]\((.*?)\)/i)
diff --git a/source/css/_layout/tag-plugins/banner.styl b/source/css/_layout/tag-plugins/banner.styl
index a227bac..acb530e 100644
--- a/source/css/_layout/tag-plugins/banner.styl
+++ b/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)
\ No newline at end of file
+.tag-plugin.banner
+ trans1(transform, 2s)
+ &:hover
+ img.bg
+ transform: scale(1.01)
\ No newline at end of file
diff --git a/source/css/_layout/tag-plugins/gallery.styl b/source/css/_layout/tag-plugins/gallery.styl
index c7ca0df..0a37587 100644
--- a/source/css/_layout/tag-plugins/gallery.styl
+++ b/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
\ No newline at end of file