diff --git a/scripts/tags/lib/grid.js b/scripts/tags/lib/grid.js index b8e06e2..f961984 100644 --- a/scripts/tags/lib/grid.js +++ b/scripts/tags/lib/grid.js @@ -2,10 +2,10 @@ * grid.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/ * 格式与官方标签插件一致使用空格分隔,中括号内的是可选参数(中括号不需要写出来) * - * {% grid [style:block/card] %} - * + * {% grid [bg:box/card] [w:240px] [c:2] [gap:16px] [br:12px] %} + * * left body - * + * * right body * {% endgrid %} */ @@ -13,37 +13,37 @@ 'use strict' module.exports = ctx => function(args, content) { - args = ctx.args.map(args, ['bg']) + args = ctx.args.map(args, ['bg', 'w', 'c', 'gap', 'br']) + if (args.w == null && args.c == null) { + args.w = '240px' + } var el = '' el += '
/g).filter(item => item.trim().length > 0) - if (arr.length > 0) { - var nodes = [] - arr.forEach((item, i) => { - if (i % 2 == 0) { - nodes.push({ - header: item - }) - } else if (nodes.length > 0) { - var node = nodes[nodes.length-1] - if (node.body == undefined) { - node.body = item - } else { - node.body += '\n' + item - } - } - }) - nodes.forEach((node, i) => { - el += '
' - el += ctx.render.renderSync({text: (node.body || ''), engine: 'markdown'}).split('\n').join('') - el += '
' - }) + el += ' ' + ctx.args.joinTags(args, ['bg', 'columns']).join(' ') + el += ' style="' + if (args.w) { + el += `grid-template-columns: repeat(auto-fill, minmax(${args.w}, 1fr));` + } else if (args.c) { + el += `grid-template-columns: repeat(${args.c}, 1fr);` + } + if (args.gap) { + el += `grid-gap:${args.gap};` + } + el += '"' + el += '>' + // 分组 + var cells = content.split(//g).filter(item => item.trim().length > 0) + for (let cell of cells) { + el += `
` + el += ` + ${ctx.render.renderSync({text: (cell || ''), engine: 'markdown'}).split('\n').join('')} +
+ ` } - el += '
' - return el } diff --git a/source/css/_layout/tag-plugins/grid.styl b/source/css/_layout/tag-plugins/grid.styl index a4d22ae..a94456b 100644 --- a/source/css/_layout/tag-plugins/grid.styl +++ b/source/css/_layout/tag-plugins/grid.styl @@ -1,11 +1,7 @@ .tag-plugin.grid display: grid grid-gap: 16px - grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px) - >.cell - p:first-child>strong:only-child - font-size: 1rem - >.cell> + &[bg]>.cell> p line-height: 1.5 :first-child @@ -21,7 +17,7 @@ &[bg]>.cell padding: 1rem border-radius: $border-card - &[bg='block']>.cell + &[bg='box']>.cell background: var(--block) &[bg='card']>.cell background: var(--card) diff --git a/source/css/_layout/tag-plugins/link.styl b/source/css/_layout/tag-plugins/link.styl index 232130a..633b102 100644 --- a/source/css/_layout/tag-plugins/link.styl +++ b/source/css/_layout/tag-plugins/link.styl @@ -9,7 +9,7 @@ justify-content: space-between align-items: center cursor: pointer - width: 320px + width: 340px max-width: 100% box-shadow: $boxshadow-card border-radius: $border-bar