diff --git a/scripts/tags/index.js b/scripts/tags/index.js index d6ca370..f687b4c 100644 --- a/scripts/tags/index.js +++ b/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 diff --git a/scripts/tags/lib/read/paper.js b/scripts/tags/lib/read/paper.js new file mode 100644 index 0000000..9fbf079 --- /dev/null +++ b/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-content + * + * + * paragraph-content + * + * + * line-content + * + * {% endpaper %} + * + */ + +'use strict' + +module.exports = ctx => function(args, content) { + var el = '' + args = ctx.args.map(args, ['style','title', 'author', 'date', 'footer']) + + el += '
' + + el += '
' + el += '
' // 布局需要 + if (args.title) el += args.title + el += '
' + + + el += '
' + + var arr = content.split(//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 += '
' + el += ctx.render.renderSync({text: (node || ''), engine: 'markdown'}).split('\n').join('') + el += '
' + } else if (nodeType == 'line'){ + if (innerTitle == '') { + innerTitle = node + } else { + el += '
' : '">' + el += ctx.render.renderSync({text: (node || ''), engine: 'markdown'}).split('\n').join('') + el += '
' + innerTitle = '' // 防止被下一个section|line使用 + } + } else if (nodeType == 'section') { + if (innerTitle == '') { + innerTitle = node + } else { + el += '
' + el += '
' + el += innerTitle + '
' + el += '
' + el += ctx.render.renderSync({text: (node || ''), engine: 'markdown'}).split('\n').join('') + el += '
' + innerTitle = '' // 防止被下一个section|line使用 + } + } + }) + } + + el += '
' + + + el += '' + + el += '
' + el += '
' + return el +} \ No newline at end of file diff --git a/scripts/tags/lib/read/reel.js b/scripts/tags/lib/read/reel.js new file mode 100644 index 0000000..6368b50 --- /dev/null +++ b/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 += '
' + } + el += '
' + } + el += '
' + el += ctx.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('') + el += '
' + if (args.date) { + el += '
' + args.date + '
' + } + el += '' + el += '' + el += '' + return el +} \ No newline at end of file diff --git a/source/css/_components/tag-plugins/index.styl b/source/css/_components/tag-plugins/index.styl new file mode 100644 index 0000000..0265d5f --- /dev/null +++ b/source/css/_components/tag-plugins/index.styl @@ -0,0 +1 @@ +@import 'read/*' \ No newline at end of file diff --git a/source/css/_components/tag-plugins/read/paper.styl b/source/css/_components/tag-plugins/read/paper.styl new file mode 100644 index 0000000..fc61a77 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/source/css/_components/tag-plugins/read/reel.styl b/source/css/_components/tag-plugins/read/reel.styl new file mode 100644 index 0000000..8ad57ea --- /dev/null +++ b/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 \ No newline at end of file