From 67bc68cef908724c46d3c97dfaa0bae5f39827c6 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Fri, 9 Jul 2021 22:41:09 +0800 Subject: [PATCH] timeline --- scripts/tags/timeline.js | 91 ++++++++------ source/css/_custom.styl | 1 + source/css/_layout/md.styl | 1 + source/css/_layout/tag-plugins/copy.styl | 2 +- source/css/_layout/tag-plugins/timeline.styl | 124 +++++++++---------- 5 files changed, 116 insertions(+), 103 deletions(-) diff --git a/scripts/tags/timeline.js b/scripts/tags/timeline.js index 86569f5..1fd99be 100644 --- a/scripts/tags/timeline.js +++ b/scripts/tags/timeline.js @@ -1,57 +1,76 @@ /** - * timeline.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/ + * timeline.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/ * - * {% timeline [order:-date] %} + * {% timeline %} * - * {% timenode header1 %} + * * what happened 1 - * {% endtimenode %} * - * {% timenode header2 %} + * * what happened 2 - * {% endtimenode %} * * {% endtimeline %} */ 'use strict'; -function postTimeline(args, content) { - args = hexo.args.map(args, ['order']); - - const newerIcon = ''; - - const olderIcon = ''; - +function layoutNodeTitle(content) { var el = ''; - const order = args && args.order == 'date' ? 'date' : '-date'; - el += '
'; - if (order == '-date') { - el += newerIcon; - } else { - el += olderIcon; - } - el += '
' + content + '
'; - if (order == '-date') { - el += olderIcon; - } else { - el += newerIcon; + el += '
'; + if (content && content.length > 0) { + el += hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join(''); } el += '
'; return el; } -function postTimenode(args, content) { - args = args.join(' ').split(', '); - var header = args[0]; - return `
${header} - - - - -
${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
`; +function layoutNodeContent(content) { + var el = ''; + el += '
'; + if (content && content.length > 0) { + el += hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join(''); + } + el += '
'; + return el; +} + + +function postTimeline(args, content) { + var el = ''; + const nodeBlock = //g; + let match; + var arr = content.split(nodeBlock).filter((item, i) => { + return item.trim().length > 0; + }); + if (arr.length < 1) { + return el; + } + var nodes = []; + arr.forEach((item, i) => { + if (item.startsWith('node ')) { + 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; + } + } + }); + + el += '
'; + nodes.forEach((node, i) => { + el += '
'; + el += layoutNodeTitle(node.header.substring(5)); + el += layoutNodeContent(node.body); + el += '
'; + }); + + el += '
'; + return el; } hexo.extend.tag.register('timeline', postTimeline, {ends: true}); - -hexo.extend.tag.register('timenode', postTimenode, {ends: true}); diff --git a/source/css/_custom.styl b/source/css/_custom.styl index 56f2b55..24a8df3 100644 --- a/source/css/_custom.styl +++ b/source/css/_custom.styl @@ -83,3 +83,4 @@ $boxshadow-card = 0 1px 2px 0px rgba(0, 0, 0, 0.1) $boxshadow-float = 0 4px 8px 0px rgba(0, 0, 0, 0.1) $boxshadow-card-float = 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 8px 16px 0px rgba(0, 0, 0, 0.1) $boxshadow-button = 0 0 2px 0px rgba(0, 0, 0, 0.04), 0 0 8px 0px rgba(0, 0, 0, 0.04) +$boxshadow-block = 0 1px 4px 0px rgba(0, 0, 0, 0.02), 0 2px 8px 0px rgba(0, 0, 0, 0.02) diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl index a6cd0d1..056d840 100644 --- a/source/css/_layout/md.styl +++ b/source/css/_layout/md.styl @@ -3,6 +3,7 @@ article.md padding: 1rem color: var(--text-p1) line-height: 1.7 + word-break: break-word article.md.excerpt p diff --git a/source/css/_layout/tag-plugins/copy.styl b/source/css/_layout/tag-plugins/copy.styl index 06d8bcb..e95c3ee 100644 --- a/source/css/_layout/tag-plugins/copy.styl +++ b/source/css/_layout/tag-plugins/copy.styl @@ -7,7 +7,7 @@ overflow: hidden max-width: 100% display: flex - width: 360px + width: 320px &[width='max'] width: 100% @media screen and (max-width: $device-mobile-425) diff --git a/source/css/_layout/tag-plugins/timeline.styl b/source/css/_layout/tag-plugins/timeline.styl index fc871a1..d6050e8 100644 --- a/source/css/_layout/tag-plugins/timeline.styl +++ b/source/css/_layout/tag-plugins/timeline.styl @@ -1,76 +1,68 @@ .tag-plugin.timeline position: relative - display: block margin: 1rem 0 - padding-top: 1rem - padding-bottom: 1rem + padding-left: 16px &:before content: '' + position: absolute z-index: 0 - position: absolute - background: var(--block-border) - width: 2px - left: 16px - top: 1rem - bottom: 1rem - >svg.icon:first-child, >svg.icon:last-child - position: absolute - z-index: 1 - fill: var(--block-border) - height 16px - width: 16px - margin-left: 9px - >svg.icon:first-child - margin-top: -1rem - >svg.icon:last-child - margin-bottom: 1rem - -.tag-plugin.timenode - position: relative - background: var(--card) - border: 1px solid var(--theme) - border-radius: $border-block - margin-top: 1rem - margin-bottom: 1rem - .header - line-height: 1.2 - background: var(--theme-bg) - border-top-left-radius: "calc(%s - 1px)" % $border-block - border-top-right-radius: "calc(%s - 1px)" % $border-block - border-bottom: 1px solid var(--theme) - display: flex - justify-content: space-between - align-items: center - span - font-weight: 500 - color: var(--text-p1) - padding: 0.75rem 16px - a - visibility: hidden - margin-left: 4px - padding: 0.4rem 8px - margin-right: 8px - line-height: 0 - border-radius: 4px - color: var(--text-p1) - &:hover - color: $color-link - .body - padding: 0.5rem 1rem - p,.highlight,ol,ul - margin: 0.5rem 0 - -.tag-plugin.timenode:hover - .header a - visibility: visible + background: var(--block-hover) + width: 4px + left: 0px + border-radius: 8px + top: .5rem + bottom: 0 .tag-plugin.timeline .timenode - --theme-bg: alpha(#888, 0.05) + position: relative + display: flex + flex-direction: column + align-items: flex-start + &[highlight] .header:before + background: $color-theme + &+.timenode + margin-top: 1rem + &:hover .header + p + color: var(--text-p1) + &:before + background: $color-theme + height: 16px + top: 'calc(50% - 0.5 * %s)' % @height -.tag-plugin.timeline[order='-date'] .timenodes>.timenode:first-child - --theme: alpha($c-blue, 0.25) - --theme-bg: alpha($c-blue, 0.05) +.tag-plugin.timeline .header + display: flex + align-items: center + position: relative + p + margin: .25rem 0 + font-size: $fs-12 + font-weight: 700 + color: var(--text-p3) + font-family: $ff-code + a + color: inherit + font-weight: inherit + &:before + content: '' + position: absolute + left: -16px + width: 4px + border-radius: 12px + height: 4px + top: 'calc(50% - 0.5 * %s)' % @height + background: var(--text-p4) + trans3 background height top -.tag-plugin.timeline[order='date'] .timenodes>:last-child - --theme: alpha($c-blue, 0.25) - --theme-bg: alpha($c-blue, 0.05) + +.tag-plugin.timeline .body + background: var(--card) + border-radius: 12px + border-top-left-radius: 2px + padding: 0.5rem 1rem + margin-top: 4px + box-shadow: $boxshadow-block + &:empty + display: none + p,.highlight,ol,ul,.tag-plugin + margin: .5rem 0