diff --git a/_config.yml b/_config.yml index 1b1afc5..7f1c2d0 100755 --- a/_config.yml +++ b/_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: diff --git a/scripts/tags/index.js b/scripts/tags/index.js index ac4483b..c86eaab 100644 --- a/scripts/tags/index.js +++ b/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)) diff --git a/scripts/tags/lib/gallery.js b/scripts/tags/lib/gallery.js new file mode 100644 index 0000000..408cb53 --- /dev/null +++ b/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 += ` 0) { + img += ` alt="${alt}"` + } + img += `/>` + // cap + img += `
` + if (alt?.length > 0) { + img += `${alt}` + } + img += `
` + return img +} + +module.exports = ctx => function(args, content) { + args = ctx.args.map(args, ['size']) + var el = '' + el += '' + return el +} diff --git a/source/css/_layout/tag-plugins/gallery.styl b/source/css/_layout/tag-plugins/gallery.styl new file mode 100644 index 0000000..070fdd4 --- /dev/null +++ b/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 diff --git a/source/css/_layout/tag-plugins/grid.styl b/source/css/_layout/tag-plugins/grid.styl index ad1338e..3442edc 100644 --- a/source/css/_layout/tag-plugins/grid.styl +++ b/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 diff --git a/source/css/_plugins/fancybox.styl b/source/css/_plugins/fancybox.styl index 95cbfc5..a48b7b9 100644 --- a/source/css/_plugins/fancybox.styl +++ b/source/css/_plugins/fancybox.styl @@ -3,3 +3,7 @@ img[fancybox='true'] .swiper-slide cursor: zoom-in + +.tag-plugin.gallery + img + cursor: zoom-in \ No newline at end of file