新增quot标签和poetry标签

_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

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;
 }

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') %>

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});

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;
+});

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)

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

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

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

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

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

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