新增quot标签和poetry标签

2022-01-04 23:34:21 +08:00 · 2022-01-04 23:34:21 +08:00 · d611d69849
parent beac04d5f6
commit d611d69849
12 changed files with 255 additions and 23 deletions
--- 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
--- a/layout/_partial/cover/post_cover.ejs
+++ b/layout/_partial/cover/post_cover.ejs
@ -12,13 +12,6 @@ function div() {
    el += '<div class="lazy img bg" style="background-image:url(&quot;' + page.banner + '&quot;)"></div>';
  }
  el += '</div>';
-  if (page.title) {
-    el += '<div class="cover-wrap md">';
-    el += '<h1 class="article-title">';
-    el += page.title;
-    el += '</h1>';
-    el += '</div>';
-  }
  el += '</div>';
  return el;
 }
--- 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 '<h1 class="article-title"><span>' + title + '</span></h1>';
@ -19,7 +16,7 @@ function layoutTitle() {
 %>
 <% let post = page; %>
 <%- partial('_partial/main/navbar/breadcrumb') %>
-<article class='content md <%- post.layout %><%- scrollreveal() %>'>
+<article class='content md <%- post.layout %><%- post.indent ? ' indent' : '' %><%- scrollreveal() %>'>
 <%- layoutTitle() %>
 <%- post.content %>
 <%- partial('_partial/main/article/article_footer') %>
--- a/scripts/tags/poetry.js
+++ 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 += '<div class="tag-plugin poetry"';
+  if (args.align) {
+    el += ' align="' + args.align + '"';
+  }
+  el += '>';
+  if (args.title) {
+    el += '<div class="title">';
+    el += args.title;
+    el += '</div>';
+  }
+  if (args.author || args.date) {
+    el += '<div class="meta">';
+    if (args.author) {
+      el += '<span>' + args.author + '</span>';
+    }
+    if (args.date) {
+      el += '<span>' + args.date + '</span>';
+    }
+    el += '</div>';
+  }
+  el += '<div class="body">';
+  el += hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('');
+  el += '</div>';
+  if (args.footer) {
+    el += '<div class="footer">';
+    el += args.footer;
+    el += '</div>';
+  }
+  el += '</div>';
+  return el;
+}, {ends: true});
--- a/scripts/tags/quot.js
+++ 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 += '<img class="icon prefix" src="' + cfg.prefix + '" />';
+    }
+    el += args.text;
+    if (cfg && cfg.suffix) {
+      el += '<img class="icon suffix" src="' + cfg.suffix + '" />';
+    }
+    return el;
+  }
+  if (args.el.includes('h')) {
+    el += '<' + args.el + ' class="tag-plugin quot"' + type + ' id="' + args.text + '">';
+    el += '<a href="#' + args.text + '" class="headerlink" title="' + args.text + '"></a>';
+    el += content();
+    el += '</' + args.el + '>';
+  } else {
+    el += '<' + args.el + ' class="tag-plugin quot"' + type + '>';
+    el += content();
+    el += '</' + args.el + '>';
+  }
+  return el;
+});
--- 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)
--- 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
--- 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
--- 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
--- 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
--- a/source/css/_layout/tag-plugins/poetry.styl
+++ 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
--- a/source/css/_layout/tag-plugins/quot.styl
+++ 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