From d611d69849d371c3cc54b0e669b92e8f4e0db39b Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Tue, 4 Jan 2022 23:34:21 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Equot=E6=A0=87=E7=AD=BE?= =?UTF-8?q?=E5=92=8Cpoetry=E6=A0=87=E7=AD=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 8 +++ layout/_partial/cover/post_cover.ejs | 7 --- layout/post.ejs | 5 +- scripts/tags/poetry.js | 48 ++++++++++++++++ scripts/tags/quot.js | 51 +++++++++++++++++ source/css/_common/highlight.styl | 2 +- source/css/_custom.styl | 3 +- source/css/_layout/list.styl | 14 +++-- source/css/_layout/md.styl | 21 +++++-- source/css/_layout/tag-plugins/image.styl | 3 +- source/css/_layout/tag-plugins/poetry.styl | 50 ++++++++++++++++ source/css/_layout/tag-plugins/quot.styl | 66 ++++++++++++++++++++++ 12 files changed, 255 insertions(+), 23 deletions(-) create mode 100644 scripts/tags/poetry.js create mode 100644 scripts/tags/quot.js create mode 100644 source/css/_layout/tag-plugins/poetry.styl create mode 100644 source/css/_layout/tag-plugins/quot.styl diff --git a/_config.yml b/_config.yml index 36269ae..bcbea59 100755 --- a/_config.yml +++ b/_config.yml @@ -179,6 +179,14 @@ tag_plugins: # {% checkbox %} checkbox: interactive: false # enable interactive for user + # {% quot %} + quot: + default: # 可以自行配置多种图标方案 + prefix: https://s2.loli.net/2022/01/04/vsTB5pGrIHfPxSj.png + suffix: https://s2.loli.net/2022/01/04/NORdtjlAhifZSns.png + hashtag: + prefix: https://s2.loli.net/2022/01/04/UvHcsa73jQPnobq.png + # {% emoji %} emoji: default: https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/qq/%s.gif twemoji: https://cdn.jsdelivr.net/gh/twitter/twemoji/assets/svg/%s.svg diff --git a/layout/_partial/cover/post_cover.ejs b/layout/_partial/cover/post_cover.ejs index 425c214..0abd58e 100644 --- a/layout/_partial/cover/post_cover.ejs +++ b/layout/_partial/cover/post_cover.ejs @@ -12,13 +12,6 @@ function div() { el += '
'; } el += ''; - if (page.title) { - el += '
'; - el += '

'; - el += page.title; - el += '

'; - el += '
'; - } el += ''; return el; } diff --git a/layout/post.ejs b/layout/post.ejs index 798bc84..f65960b 100755 --- a/layout/post.ejs +++ b/layout/post.ejs @@ -6,9 +6,6 @@ if (page.header == undefined) { page.header = false; } function layoutTitle() { - if (page.layout == 'post' && page.banner && page.title) { - return ''; - } const title = page.h1 || page.title; if (title && title.length > 0) { return '

' + title + '

'; @@ -19,7 +16,7 @@ function layoutTitle() { %> <% let post = page; %> <%- partial('_partial/main/navbar/breadcrumb') %> -
+
<%- scrollreveal() %>'> <%- layoutTitle() %> <%- post.content %> <%- partial('_partial/main/article/article_footer') %> diff --git a/scripts/tags/poetry.js b/scripts/tags/poetry.js new file mode 100644 index 0000000..64bd337 --- /dev/null +++ b/scripts/tags/poetry.js @@ -0,0 +1,48 @@ +/** + * poetry.js v1.1 | https://github.com/xaoxuu/hexo-theme-stellar/ + * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来） + * + * poetry: + * {% poetry [align:center] [title] [author:作者] [date:日期] [footer] %} + * body + * {% endpoetry %} + * + */ + +'use strict'; + +hexo.extend.tag.register('poetry', function(args, content) { + var el = ''; + args = hexo.args.map(args, ['author', 'date', 'align'], ['title', 'footer']); + + el += '
'; + } + if (args.date) { + el += '' + args.date + ''; + } + el += '
'; + } + el += '
'; + el += hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join(''); + el += '
'; + if (args.footer) { + el += '
'; + el += args.footer; + el += '
'; + } + el += ''; + return el; +}, {ends: true}); diff --git a/scripts/tags/quot.js b/scripts/tags/quot.js new file mode 100644 index 0000000..59b9ecb --- /dev/null +++ b/scripts/tags/quot.js @@ -0,0 +1,51 @@ +/** + * quot.js v1.1 | https://github.com/xaoxuu/hexo-theme-stellar/ + * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来） + * + * quot: + * {% quot [el:h1] [icon:default] text %} + * + */ + +'use strict'; + +hexo.extend.tag.register('quot', function(args) { + var el = ''; + args = hexo.args.map(args, ['el', 'icon'], ['text']); + if (!args.el) { + args.el = 'p'; + } + + var type = ''; + if (args.icon && args.icon != 'square' && args.icon != 'quotes') { + type = ' type="icon"'; + } else { + type = ' type="text"'; + } + function content() { + if (!args.icon) { + return args.text; + } + var el = ''; + const cfg = hexo.theme.config.tag_plugins.quot[args.icon]; + if (cfg && cfg.prefix) { + el += ''; + } + el += args.text; + if (cfg && cfg.suffix) { + el += ''; + } + return el; + } + if (args.el.includes('h')) { + el += '<' + args.el + ' class="tag-plugin quot"' + type + ' id="' + args.text + '">'; + el += ''; + el += content(); + el += ''; + } else { + el += '<' + args.el + ' class="tag-plugin quot"' + type + '>'; + el += content(); + el += ''; + } + return el; +}); diff --git a/source/css/_common/highlight.styl b/source/css/_common/highlight.styl index 0c263f0..96c1b11 100644 --- a/source/css/_common/highlight.styl +++ b/source/css/_common/highlight.styl @@ -10,7 +10,7 @@ code border-radius: 4px article.md .highlight - margin: 1rem 0 + margin: var(--gap-p) 0 border-radius: $border-block overflow: hidden background: var(--block) diff --git a/source/css/_custom.styl b/source/css/_custom.styl index 982b9a2..96333f2 100644 --- a/source/css/_custom.styl +++ b/source/css/_custom.styl @@ -5,6 +5,7 @@ $color-theme = #1BCDFC $color-link = #2196f3 $color-button = #1BCDFC $color-hover = #ff5722 +$color-highlight = #ff5722 $color-inner = #fff $color-cat = #FF7844 $color-cat-hover = darken($color-cat, 20) @@ -65,7 +66,7 @@ $border-image = 6px --width-left: 256px --width-main: 720px --gap-l: 16px - --gap-p: 1.25rem // gap for paragraph + --gap-p: .75rem // gap for paragraph // desktop 2k or larger @media screen and (min-width: $device-2k) --gap-l: 32px diff --git a/source/css/_layout/list.styl b/source/css/_layout/list.styl index 836667f..93f9d12 100644 --- a/source/css/_layout/list.styl +++ b/source/css/_layout/list.styl @@ -38,8 +38,10 @@ .post-list article.md padding: 1rem p - font-size: $fs-14 color: var(--text-p2) + @media screen and (min-width: $device-mobile) + font-size: $fs-14 + // posts .post-list .post-card .post-cover @@ -82,16 +84,20 @@ color: white &[position=top] top: 0 - background-image: linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.2),rgba(0,0,0,0)) + background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.3),rgba(0,0,0,0)) &[position=bottom] bottom: 0 - background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0.25)) + background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0.4)) + div+div + margin-top: 8px + @media screen and (max-width: $device-mobile) + margin-top: 4px .cap color: white + font-size: $fs-13 .title font-weight: 500 font-size: $fs-h3 - margin: 4px 0 h2 margin: .25rem 0 font-size: $fs-h4 diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl index 0ed0d86..dc26718 100644 --- a/source/css/_layout/md.styl +++ b/source/css/_layout/md.styl @@ -19,8 +19,15 @@ h1.article-title article.md.content position: relative margin-bottom: 2rem + display: flex + flex-direction: column + &.indent + >p:not([class]) + text-indent: 'calc(%s * 2)' % $fs-p + h1,h2,h3,h4,h5,h6 + text-align: center >:first-child - margin-top: 0 + margin-top: 1rem h1:not(:first-child) margin-top: 2em h2:first-child @@ -28,12 +35,14 @@ article.md.content h2,h3,h4,h5,h6 color: var(--text-p0) padding-top: 1rem - margin-bottom: 1em + margin-bottom: .5rem line-height: 1.8 &:hover a.headerlink:before opacity: 1 + + .md ul:not(:last-child), ol:not(:last-child) @@ -46,9 +55,13 @@ article.md.content p,blockquote,.tag-plugin,ul,ol,.highlight,table * --gap-p: .5rem - p,.tag-plugin + p,>ul:not(:last-child),>ol:not(:last-child) + margin-top: 'calc(%s - 4px)' % var(--gap-p) + margin-bottom: 'calc(%s - 4px)' % var(--gap-p) + .tag-plugin margin-top: var(--gap-p) margin-bottom: var(--gap-p) + p,.tag-plugin .highlight,table --gap-p: 1rem @@ -60,7 +73,7 @@ article.md.content position: absolute margin-left: -0.75em h2 - margin-top: 3rem + margin-top: 2rem border-bottom: 1px solid var(--block-border) font-weight: 400 h3 diff --git a/source/css/_layout/tag-plugins/image.styl b/source/css/_layout/tag-plugins/image.styl index aa0efa5..1a11a4e 100644 --- a/source/css/_layout/tag-plugins/image.styl +++ b/source/css/_layout/tag-plugins/image.styl @@ -2,7 +2,6 @@ margin-top: 1rem margin-bottom: 1rem .image-bg - line-height: 0 text-align: center border-radius: $border-image position: relative @@ -11,7 +10,7 @@ .image-download opacity: 1 !important img - display: inline-block + display: block object-fit: cover .image-download position: absolute diff --git a/source/css/_layout/tag-plugins/poetry.styl b/source/css/_layout/tag-plugins/poetry.styl new file mode 100644 index 0000000..a56eab9 --- /dev/null +++ b/source/css/_layout/tag-plugins/poetry.styl @@ -0,0 +1,50 @@ +.md .tag-plugin.poetry + align-self: center + &[align=center] + align-items: center + >.title + font-weight: 500 + font-size: 1rem + margin-top: var(--gap-p) + >.meta + color: var(--text-p2) + font-size: $fs-12 + font-weight: 500 + span+span + margin-left: 4px + >.body + margin: var(--gap-p) 0 + border-top: 1px dashed var(--block-border) + border-bottom: 1px dashed var(--block-border) + p + font-size: $fs-14 + >.footer + font-style: italic + color: var(--text-p4) + margin: var(--gap-p) 0 + font-size: $fs-12 + +// 描边修饰 +.md .tag-plugin.poetry + padding-left: 1rem + position: relative + &:before + content: '' + position: absolute + width: 4px + left: -4px + top: 4px + bottom: 4px + border-radius: 4px + background: var(--block) + >.title + position: relative + &:before + content: '' + position: absolute + width: 4px + left: calc(-1rem - 4px) + top: 6px + bottom: 6px + border-radius: 4px + background: $color-highlight diff --git a/source/css/_layout/tag-plugins/quot.styl b/source/css/_layout/tag-plugins/quot.styl new file mode 100644 index 0000000..6c657da --- /dev/null +++ b/source/css/_layout/tag-plugins/quot.styl @@ -0,0 +1,66 @@ +.md .tag-plugin.quot + text-align: center + font-weight: 700 + position: relative + display: flex + align-self: center + align-items: center + border-bottom: none + &:first-child + margin-top: 1.5rem + a.headerlink:before + content: '' + padding: 16px 24px 8px 24px + @media screen and (max-width: $device-mobile) + padding: 16px 20px 8px + line-height: 1.2 + +// override +article.md.content + .quot + color: var(--text-p0) + h1.quot + font-size: $fs-h1 + font-weight: 900 + padding: 20px 32px 12px 32px + @media screen and (max-width: $device-mobile) + padding: 20px 24px 12px + h2.quot,h3.quot,h4.quot,h5.quot,h6.quot + font-size: $fs-h3 + p.quot + font-size: $fs-h4 + +// type=text +.md .tag-plugin.quot[type=text] + &:before,&:after + content: "" + position: absolute + width: 8px + height: 14px + &:before + top: 8px + left: 0 + border-top: 6px solid $color-highlight + border-left: 6px solid $color-highlight + &:after + right: 0 + bottom: 0 + border-right: 6px solid $color-highlight + border-bottom: 6px solid $color-highlight +article.md.content h1.quot[type=text] + &:before,&:after + width: 12px + height: 20px + border-width: 8px + +// type=icon +.md .tag-plugin.quot[type=icon] + .icon + height: 1.5em + display: inline-block + color: $color-highlight + border-radius: 0 + &.prefix + margin-right: .5rem + &.suffix + margin-left: .5rem