添加阅读标签 (#462)

* 添加阅读标签

* 修改阅读标签语法格式

* 修改阅读标签语法注释说明

scripts/tags/index.js

@@ -43,4 +43,9 @@ hexo.extend.tag.register('hashtag', require('./lib/hashtag')(hexo))
 hexo.extend.tag.register('okr', require('./lib/okr')(hexo), {ends: true})
 hexo.extend.tag.register('audio', require('./lib/audio')(hexo))
 hexo.extend.tag.register('video', require('./lib/video')(hexo))
+
+// read 阅读类
+hexo.extend.tag.register('reel', require('./lib/read/reel')(hexo), true)
+hexo.extend.tag.register('paper', require('./lib/read/paper')(hexo), true)
+
 // others

scripts/tags/lib/read/paper.js

@@ -0,0 +1,90 @@
+/**
+ * paper.js v1.1 | https://github.com/HcGys/stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * paper:
+ * {% paper [style:underline|无] [title:标题] [author:作者] [date:日期] [footer:footer] %}
+ * 
+ * <!-- section section-title -->
+ * section-content
+ * 
+ * <!-- paragraph -->
+ * paragraph-content
+ * 
+ *  <!-- line [right|left] -->
+ * line-content
+ * 
+ * {% endpaper %}
+ *
+ */
+
+'use strict'
+
+module.exports = ctx => function(args, content) {
+  var el = ''
+  args = ctx.args.map(args, ['style','title', 'author', 'date', 'footer'])
+
+  el += '<div class="tag-plugin paper">'
+
+  el += '<div class="content' + (typeof args.style === 'undefined' ? '' : ' ' + args.style)  + '">'
+  el += '<div class="title">'  // 布局需要
+  if (args.title) el += args.title
+  el += '</div>'
+
+
+  el += '<div class="body">'
+
+  var arr = content.split(/<!--\s*(paragraph|section|line) (.*?)\s*-->/g).filter(item => item.trim().length > 0)
+  if (arr.length > 0) {
+    var nodeType = ''
+    var innerTitle = ''
+    arr.forEach((node, i) => {
+      if (node == 'paragraph' || node == 'section' || node == 'line') {
+        nodeType = node
+      } else if (nodeType == 'paragraph'){
+        el += '<div class="paragraph">'
+        el += ctx.render.renderSync({text: (node || ''), engine: 'markdown'}).split('\n').join('')
+        el += '</div>'
+      } else if (nodeType == 'line'){
+        if (innerTitle == '') {
+          innerTitle = node
+        } else {
+          el += '<div class="line'
+          el += innerTitle == 'right' ? ' right">' : '">'
+          el += ctx.render.renderSync({text: (node || ''), engine: 'markdown'}).split('\n').join('')
+          el += '</div>'
+          innerTitle = ''  // 防止被下一个section|line使用
+        }
+      } else if (nodeType == 'section') {
+        if (innerTitle == '') {
+          innerTitle = node
+        } else {
+          el += '<div class="section">'
+          el += '<div class="section-title">'
+          el += innerTitle + '</div>'
+          el += '<div class="section-content">'
+          el += ctx.render.renderSync({text: (node || ''), engine: 'markdown'}).split('\n').join('')
+          el += '</div></div>'
+          innerTitle = ''  // 防止被下一个section|line使用
+        }
+      }
+    })
+  }
+
+  el += '</div>'
+
+
+  el += '<div class="footer">'  // 布局需要
+  if (args.author || args.date) {
+    el += '<div class="author-date">'
+    if (args.author) el += '<span class="author">' + args.author + '</span>'
+    if (args.date) el += '<span class="date">' + args.date + '</span>'
+    el += '</div>'
+  }
+  if (args.footer) el += args.footer
+  el += '</div>'
+
+  el += '</div>'
+  el += '</div>'
+  return el
+}

scripts/tags/lib/read/reel.js

@@ -0,0 +1,43 @@
+/**
+ * reel.js v1.1 | https://github.com/HcGys/stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * reel:
+ * {% reel [title] [author:作者] [date:日期] [footer:footer] %}
+ * body
+ * {% endreel %}
+ *
+ */
+
+'use strict'
+
+module.exports = ctx => function(args, content) {
+  var el = ''
+  args = ctx.args.map(args, ['author', 'date', 'footer'], ['title'])
+
+  el += '<div class="tag-plugin reel"'
+  el += '>'
+  el += '<div class="content">'
+  el += '<div class="title">'
+  if (args.title) el += args.title   // 布局需要
+  el += '</div>'
+  if (args.author) {
+    el += '<div class="meta">'
+    if (args.author) {
+      el += '<span>' + args.author + '</span>'
+    }
+    el += '</div>'
+  }
+  el += '<div class="body"><div class="main">'
+  el += ctx.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')
+  el += '</div></div>'
+  if (args.date) {
+    el += '<div class="date">' + args.date + '</div>'
+  }
+  el += '<div class="footer">'
+  if(args.footer) el += args.footer  // 布局需要
+  el += '</div>'
+  el += '</div>'
+  el += '</div>'
+  return el
+}

source/css/_components/tag-plugins/index.styl

@@ -0,0 +1 @@
+@import 'read/*'

source/css/_components/tag-plugins/read/paper.styl

@@ -0,0 +1,98 @@
+.md-text .tag-plugin.paper
+  display: flex
+  flex-direction: column
+  align-items: center
+  padding-top: var(--gap-padding)
+  padding-bottom: var(--gap-padding)
+  >.content
+    border-left: 1px dashed var(--text-meta)
+    border-right: 1px dashed var(--text-meta)
+    border-bottom: 1px dashed var(--text-meta)
+    border-bottom-left-radius: $border-card
+    border-bottom-right-radius: $border-card
+    padding: 1rem
+    // max-width: calc(100% - 80px)
+    max-width: calc(95%)
+    >.title
+      font-weight: 500
+      text-align: center
+    >.meta
+      color: var(--text-p2)
+      font-size: $fs-12
+      font-weight: 500  
+    >.body
+      >.paragraph
+        text-indent: 2em
+      >.section
+        >.section-title
+          text-align: center
+        >.section-content
+          text-indent: 2em
+      >.line.right
+        >p
+          text-align: right
+      .tag-plugin
+        margin: 0
+    >.footer
+      color: var(--text-p4)
+      font-size: $fs-12
+      text-align: right
+      >.author-date
+        text-align: right
+        >span
+          color: var(--text-p2)
+          font-size: $fs-12
+          font-weight: 500
+        >.author
+          margin-right: calc(0.5*var(--gap-p))
+
+// 描边修饰
+.md-text .tag-plugin.paper>.content
+  position: relative
+  &:before
+    content: ''
+    position: absolute
+    height: 4px
+    left: -16px
+    top: -4px
+    right: -16px
+    border-radius: 4px
+    background: var(--block)
+  >.title
+    position: relative
+    &:before
+      content: ''
+      position: absolute
+      height: 4px
+      left: calc(-1rem - 6px)
+      top: calc(-1rem - 4px)
+      right: calc(100% + 1rem - 6px)
+      border-radius: 4px
+      background: $color-accent
+    &:after
+      content: ''
+      position: absolute
+      height: 4px
+      right: calc(-1rem - 6px)
+      top: calc(-1rem - 4px)
+      left: calc(100% + 1rem - 6px)
+      border-radius: 4px
+      background: $color-accent
+
+// 下划线修饰
+.md-text .tag-plugin.paper > .content.underline > .title,
+.md-text .tag-plugin.paper > .content.underline > .meta,
+.md-text .tag-plugin.paper > .content.underline > .author-date,
+.md-text .tag-plugin.paper > .content.underline > .footer,
+.md-text .tag-plugin.paper > .content.underline > .body 
+  background: linear-gradient(transparent 1.5rem,var(--text-meta) 1px)
+  background-size: 100% calc(1.5rem + 1px)
+  line-height: calc(1.5rem + 1px)
+  // 若要前后有一定的间隙，可以打开下面的代码;反之，可以注释掉。注意：这里的间隙不是指段落开头的空两个字，而是指每行文字距离下划线开头（末尾）的距离
+  padding: 0 3px
+
+.md-text .tag-plugin.paper > .content.underline
+  p
+    margin: 0
+  >.title
+    border-top: 1px solid var(--text-meta)

source/css/_components/tag-plugins/read/reel.styl

@@ -0,0 +1,103 @@
+.md-text .tag-plugin.reel
+  display: flex
+  flex-direction: column
+  align-items: center
+  padding-top: var(--gap-padding)
+  padding-bottom: var(--gap-padding)
+  >.content
+    display: flex
+    flex-direction: column
+    writing-mode: vertical-rl
+    border-top: 1px dashed var(--text-meta)
+    border-bottom: 1px dashed var(--text-meta)
+    max-width: calc(100% - 80px)
+    padding: 1rem
+    >.title
+      font-weight: 500
+      font-size: 1rem
+    >.meta
+      color: var(--text-p2)
+      font-size: $fs-12
+      font-weight: 500  
+    >.body
+      overflow: auto
+      scrollbar()
+      margin: 'calc(%s - 4px) %s' % var(--gap-padding)
+      .main
+        p
+          margin: 0;
+          font-size: $fs-14
+    >.date
+      color: var(--text-p2)
+      font-size: $fs-12
+      font-weight: 500
+      text-align: right
+      // margin-left: var(--gap-p)
+    >.footer
+      color: var(--text-p4)
+      font-size: $fs-12
+      text-align: right
+
+// 描边修饰
+.md-text .tag-plugin.reel>.content
+  position: relative
+  &:before
+    content: ''
+    position: absolute
+    width: 4px
+    left: -4px
+    top: -16px
+    bottom: -16px
+    border-radius: 4px
+    background: var(--block)
+  &:after
+    content: ''
+    position: absolute
+    width: 4px
+    left: calc(100%)
+    top: -16px
+    bottom: -16px
+    border-radius: 4px
+    background: var(--block)
+  >.title
+    position: relative
+    &:before
+      content: ''
+      position: absolute
+      width: 4px
+      right: calc(-1rem - 4px)
+      top: calc(-1rem - 6px)
+      bottom: calc(100% + 1rem - 6px)
+      border-radius: 4px
+      background: $color-accent
+      z-index: 1
+    &:after
+      content: ''
+      position: absolute
+      width: 4px
+      right: calc(-1rem - 4px)
+      top: calc(100% + 1rem - 6px)
+      bottom: calc(-1rem - 6px)
+      border-radius: 4px
+      background: $color-accent
+      z-index: 1
+  >.footer
+    position: relative
+    &:before
+      content: ''
+      position: absolute
+      width: 4px
+      left: calc(-1rem - 4px)
+      top: calc(-1rem - 6px)
+      bottom: calc(100% + 1rem - 6px)
+      border-radius: 4px
+      background: $color-accent
+    &:after
+      content: ''
+      position: absolute
+      width: 4px
+      left: calc(-1rem - 4px)
+      top: calc(100% + 1rem - 6px)
+      bottom: calc(-1rem - 6px)
+      border-radius: 4px
+      background: $color-accent