[opt] tag-plugin: grid

scripts/tags/lib/grid.js

@@ -2,10 +2,10 @@
  * grid.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% grid [style:block/card] %}
- * <!-- cell left -->
+ * {% grid [bg:box/card] [w:240px] [c:2] [gap:16px] [br:12px] %}
+ * <!-- cell -->
  * left body
- * <!-- cell right -->
+ * <!-- cell -->
  * 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 += '<div class="tag-plugin grid"'
-  el += ' ' + ctx.args.joinTags(args, ['bg']).join(' ')
-  el += '>'
-  
-  var arr = content.split(/<!--\s*cell (.*?)\s*-->/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 += '<div class="cell" index="' + (i) + '">'
-      el += ctx.render.renderSync({text: (node.body || ''), engine: 'markdown'}).split('\n').join('')
-      el += '</div>'
-    })  
+  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(/<!--\s*cell(.*?)-->/g).filter(item => item.trim().length > 0)
+  for (let cell of cells) {
+    el += `<div class="cell" style="`
+    if (args.br) {
+      el += `border-radius:${args.br};`
+    }
+    el += `">`
+    el += `
+    ${ctx.render.renderSync({text: (cell || ''), engine: 'markdown'}).split('\n').join('')}
+    </div>
+    `
   }
-
   el += '</div>'
-
   return el
 }

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)

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