[opt] gallery 2.0
This commit is contained in:
xaoxuu
parent
ed4be939cb
commit
13c053817d
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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">`
|
||||
|
|
|
|||
|
|
@ -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] %}
|
||||
* 
|
||||
* 
|
||||
* 
|
||||
* 
|
||||
* {% 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)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -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
|
||||
Loading…
Reference in New Issue