split

scripts/tags/split.js

@@ -0,0 +1,51 @@
+/**
+ * split.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% split [style:block/card] %}
+ * <!-- cell -->
+ * left body
+ * <!-- cell -->
+ * right body
+ * {% endsplit %}
+ */
+
+'use strict';
+
+hexo.extend.tag.register('split', function(args, content) {
+  args = hexo.args.map(args, ['bg']);
+  var el = '';
+  el += '<div class="tag-plugin split"';
+  el += ' ' + hexo.args.joinTags(args, ['bg']).join(' ');
+  el += '>';
+  
+  var arr = content.split(/<!--\s*(.*?)\s*-->/g).filter((item, i) => {
+    return item.trim().length > 0;
+  });
+  if (arr.length > 0) {
+    var nodes = [];
+    arr.forEach((item, i) => {
+      if (item == 'cell') {
+        nodes.push({
+          header: ''
+        });
+      } 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 += hexo.render.renderSync({text: node.body, engine: 'markdown'}).split('\n').join('');
+      el += '</div>';
+    });  
+  }
+
+  el += '</div>';
+
+  return el;
+}, {ends: true});

source/css/_layout/tag-plugins/quot.styl

@@ -3,7 +3,7 @@
   position: relative
   align-items: center
 .md .tag-plugin.quot:not(span)
-  display: flex
+  display: inline-flex
   align-self: center
   border-bottom: none
   font-weight: 700

source/css/_layout/tag-plugins/split.styl

@@ -0,0 +1,28 @@
+.md .tag-plugin.split
+  margin: 0.5rem 0
+.tag-plugin.split
+  display: grid
+  grid-gap: 16px
+  grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
+  >div>
+    p   
+      line-height: 1.5
+    :first-child
+      margin-top: 0
+    :last-child
+      margin-bottom: 0
+    p:first-child
+      margin-top: -0.25em
+    p:last-child
+      margin-bottom: -0.25em
+    
+
+.tag-plugin.split
+  &[bg]>div
+    padding: 1rem
+    border-radius: $border-card
+  &[bg='block']>div
+    background: var(--block)
+  &[bg='card']>div
+    background: var(--card)
+    box-shadow: $boxshadow-card