hexo-theme-stellar 1.6.0 → 1.8.0

package/scripts/tags/image.js

@@ -8,7 +8,7 @@
 'use strict';
 
 hexo.extend.tag.register('image', function(args) {
-  args = hexo.args.map(args, ['width', 'height', 'bg', 'download', 'padding'], ['src', 'alt']);
+  args = hexo.args.map(args, ['width', 'height', 'bg', 'download', 'padding', 'fancybox'], ['src', 'alt']);
   var style = '';
   if (args.width) {
     style += 'width:' + args.width + ';';
@@ -16,12 +16,32 @@ hexo.extend.tag.register('image', function(args) {
   if (args.height) {
     style += 'height:' + args.height + ';';
   }
+  // fancybox
+  var fancybox = false;
+  if (hexo.theme.config.plugins.fancybox && hexo.theme.config.plugins.fancybox.enable) {
+    // 主题配置
+    if (hexo.theme.config.tag_plugins.image && hexo.theme.config.tag_plugins.image.fancybox) {
+      fancybox = hexo.theme.config.tag_plugins.image.fancybox;
+    }
+    // 覆盖配置
+    if (args.fancybox && args.fancybox.length > 0) {
+      if (args.fancybox == 'true') {
+        fancybox = true;
+      } else if (args.fancybox == 'false') {
+        fancybox = false;
+      }
+    }
+  }
+
   function img(src, alt, style) {
     let img = '';
     img += '<img src="' + src + '"';
     if (alt) {
       img += ' alt="' + alt + '"';
     }
+    if (fancybox) {
+      img += ' fancybox="true"';
+    }
     if (style.length > 0) {
       img += ' style="' + style + '"';
     }

package/scripts/tags/note.js

@@ -2,18 +2,17 @@
  * note.js v1.1 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * note:
  * {% note [color:color] [title] content %}
- *
- * noteblock:
- * {% noteblock [color:color] [child:codeblock/tabs] title %}
- * markdown content
- * {% endnoteblock %}
  */
 
 'use strict';
 
-function outputNoteBlock(args, content) {
+hexo.extend.tag.register('note', function(args) {
+  args = hexo.args.map(args, ['color'], ['title', 'content']);
+  if (args.content == undefined || args.content.length <= 0) {
+    args.content = args.title;
+    args.title = '';
+  }
   const color = args.color;
   const title = args.title;
   var el = '';
@@ -31,22 +30,8 @@ function outputNoteBlock(args, content) {
   }
   // content
   el += '<div class="body">';
-  el += hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('');
+  el += hexo.render.renderSync({text: args.content, engine: 'markdown'}).split('\n').join('');
   el += '</div></div>';
 
   return el;
-}
-
-hexo.extend.tag.register('note', function(args) {
-  args = hexo.args.map(args, ['color'], ['title', 'content']);
-  if (args.content == undefined || args.content.length <= 0) {
-    args.content = args.title;
-    args.title = '';
-  }
-  return outputNoteBlock(args, args.content);
 });
-
-hexo.extend.tag.register('noteblock', function(args, content) {
-  args = hexo.args.map(args, ['color', 'child'], ['title']);
-  return outputNoteBlock(args, content);
-}, {ends: true});

package/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:footer] %}
+ * body
+ * {% endpoetry %}
+ *
+ */
+
+'use strict';
+
+hexo.extend.tag.register('poetry', function(args, content) {
+  var el = '';
+  args = hexo.args.map(args, ['author', 'date', 'align', 'footer'], ['title']);
+
+  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});

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

package/scripts/tags/{site.js → sites.js}

@@ -62,6 +62,9 @@ hexo.extend.tag.register('sites', function(args) {
       }
       if (groupId in sites) {
         let group = sites[groupId];
+        if ((typeof group == 'object') && group.constructor == Array) {
+          group = {items: group};
+        }
         if (group.title || group.description) {
           el += groupHeader(group);
         }

package/source/css/_common/device.styl

@@ -12,7 +12,7 @@
   right: 0
   bottom: 2rem
   float: right
-  z-index: 9
+  z-index: 10
   display: flex
   border-radius: $border-block 0 0 $border-block
   padding-right: 1rem

package/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)

package/source/css/_common/title.styl

@@ -1,6 +1,8 @@
 h1,.h1
   font-size: $fs-h1
-  font-weight: 500
+  font-weight: 700
+  @media screen and (max-width: $device-mobile)
+    font-size: $fs-h1
 h2,.h2
   font-size: $fs-h2
 h3,.h3

package/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)
@@ -31,7 +32,7 @@ $dark-site-bg-mobile = black
 
 // @font-face
 //   font-family: 'Dosis'
-//   src: url('https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf')
+//   src: url('https://fastly.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf')
 //   font-weight: normal
 //   font-style: normal
 
@@ -47,7 +48,7 @@ $fs-14 = .875rem
 $fs-13 = .8125rem
 $fs-12 = .75rem
 
-$fs-h1   = 2rem   // 32px
+$fs-h1   = 1.75rem   // 32px
 $fs-h2   = 1.5rem // 24px
 $fs-h3   = 1.375rem  // 22px
 $fs-h4   = 1.125rem  // 18px
@@ -63,14 +64,14 @@ $border-image = 6px
 // 可以动态变化的属性
 :root
   --width-left: 256px
-  --width-main: 680px
+  --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
     --width-left: 320px
-    --width-main: 740px
+    --width-main: 780px
   // desktop 4k or larger
   @media screen and (min-width: $device-4k)
     --width-main: 860px

package/source/css/_layout/layout.styl

@@ -5,7 +5,7 @@
   justify-content: center
 
 .l_body .l_left
-  z-index: 7
+  z-index: 8
   width: var(--width-left)
   flex-shrink: 0
   position: sticky
@@ -32,7 +32,7 @@
       left: 0
       background: var(--site-bg)
       box-shadow: $boxshadow-card-float
-      z-index: 8
+      z-index: 9
     .l_main
       max-width: 100%
   .l_body.mobile

package/source/css/_layout/list.styl

@@ -11,15 +11,18 @@
   trans1 box-shadow
   overflow: hidden
   background: var(--card)
+  position: relative
   .excerpt
     margin: 1rem 0
     >p
       margin: 1rem 0
+      line-height: 1.5
   .meta.cap
     display: flex
     flex-wrap: wrap
     align-items: center
     margin: .5rem 0
+    line-height: 1.5
     span+span
       margin-left: 0.5rem
     span.pin
@@ -28,49 +31,76 @@
         object-fit: contain
         height: 1.5em
 .post-list .post-card:hover
-  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.08), 0 2px 8px 0px rgba(0, 0, 0, 0.06), 0 4px 16px 0px rgba(0, 0, 0, 0.04)
+  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
 
 
 // common article
-.post-list article
+.post-list article.md
   padding: 1rem
+  p
+    color: var(--text-p2)
+    @media screen and (min-width: $device-mobile)
+      font-size: $fs-14
+
 
 // posts
-.post-list .post-card
-  .post-cover
-    overflow: hidden
-    margin-left: -1rem
-    margin-top: -1rem
-    margin-right: -1rem
+.post-list .post-card .post-cover
+  overflow: hidden
+  width: 'calc(100% + 2 * %s)' % 1rem
+  border-radius: 0
+  margin-left: -1rem
+  margin-top: -1rem
+  margin-right: -1rem
+  &:not(.lazy)
+    trans1: transform 1s
+  img
+    object-fit: cover
+    width: 100%
+    border-radius: 0
+    height: 280px
+    @media screen and (max-width: 900px)
+      height: 240px
+    @media screen and (max-width: $device-tablet)
+      height: 280px
+    @media screen and (max-width: $device-mobile)
+      height: 240px
+    @media screen and (max-width: $device-mobile-425)
+      height: 220px
+    @media screen and (max-width: $device-mobile-375)
+      height: 180px
+
+.post-list .post-card.post.photo
+  .cover
+    position: relative
+    line-height: 0
     img
-      object-fit: cover
       width: 100%
-      border-radius: 0
-      height: 280px
-      @media screen and (max-width: 900px)
-        height: 240px
-      @media screen and (max-width: $device-tablet)
-        height: 280px
-      @media screen and (max-width: $device-mobile)
-        height: 240px
-      @media screen and (max-width: $device-mobile-425)
-        height: 220px
-      @media screen and (max-width: $device-mobile-375)
-        height: 180px
-      &:not(.lazy)
-        trans1: transform 1s
-.post-list .post-card.post.photo .post-cover img
-  height: 400px
-  @media screen and (max-width: 900px)
-    height: 320px
-  @media screen and (max-width: $device-tablet)
-    height: 400px
-  @media screen and (max-width: $device-mobile)
-    height: 320px
-  @media screen and (max-width: $device-mobile-425)
-    height: 280px
-  @media screen and (max-width: $device-mobile-375)
-    height: 240px
+    .cover-info
+      padding: 1rem
+      position: absolute
+      line-height: 1.2
+      width: 'calc(100% - %s * 2)' % 1rem
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
+      color: white
+      &[position=top]
+        top: 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.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
+  h2
+    margin: .25rem 0
+    font-size: $fs-h4
 
 
 // wiki
@@ -86,6 +116,8 @@
   display: flex
   width: 200px
   margin: 1rem .5rem
+  @media screen and (min-width: 950px)
+    margin: 1rem
   align-items: center
   img
     object-fit: contain
@@ -93,7 +125,9 @@
       trans1: transform 0.75s
 .post-list .post-card.wiki article .excerpt
   margin: 1rem .5rem
-  min-width: 220px
+  @media screen and (min-width: 950px)
+    margin-right: 2rem
+  min-width: 280px
   flex: 1
   overflow: hidden
   word-wrap: break-word

package/source/css/_layout/main.styl

@@ -1,9 +1,9 @@
 .l_main
   position: relative
   padding-bottom: "calc(1 * %s)" % var(--gap-l)
-  @media screen and (min-width: 1200px)
+  @media screen and (min-width: 1280px)
     margin-left: "calc(2 * %s)" % var(--gap-l)
-    margin-right: "calc(0.75 * %s)" % var(--width-left)
+    margin-right: "calc(2 * %s + %s)" % (var(--gap-l) var(--width-left))
   @media screen and (min-width: $device-tablet)
     padding-top: "calc(2 * %s)" % var(--gap-l)
   header

package/source/css/_layout/md.styl

@@ -10,26 +10,44 @@ article.md.excerpt
     font-size: $fs-14
     margin: 1em 0
 
+h1.article-title
+  margin-top: .5em
+  margin-bottom: 1em
+  line-height: 1.2
+  color: var(--text-p0)
+
 article.md.content
   position: relative
   margin-bottom: 2rem
+  display: flex
+  flex-direction: column
+  &.indent
+    >p:not([class])
+      text-indent: 'calc(%s * 2)' % $fs-p
+      text-align: justify
+    h1,h2,h3,h4,h5,h6
+      text-align: center
+    >h2:not([class])
+      align-self: center
+      border-bottom-style: dashed
+      border-bottom-color: $color-highlight
   >:first-child
-    margin-top: 0
-  h1.article-title
-    margin-top: 0.5rem
-    line-height: 1.2
-    color: var(--text-p0)
+    margin-top: 1rem
+  h1:not(:first-child)
+    margin-top: 2em
   h2:first-child
     margin-top: 0
   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)
@@ -42,11 +60,17 @@ 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,iframe
     margin-top: var(--gap-p)
     margin-bottom: var(--gap-p)
+  p,.tag-plugin
     .highlight,table
       --gap-p: 1rem
+  iframe
+    display: block
 
 // titles
 article.md.content
@@ -56,7 +80,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
@@ -90,6 +114,10 @@ article.md pre
   -webkit-font-smoothing: auto
   -moz-osx-font-smoothing: auto
 
+article.md
+  .center
+    align-self: center
+
 // div
 article.md>div
   margin: var(--gap-p) 0

package/source/css/_layout/pages/archives.styl

@@ -1,4 +1,5 @@
 .post-list #archive
+  padding: 1rem
   .archive-header
     display: inline-block
     font-family: $ff-code

package/source/css/_layout/partial/cover.styl

@@ -5,9 +5,59 @@
   flex-direction: column
   justify-content: center
   align-items: center
+  position: relative
+  &.post
+    height: inherit
+
 
 .l_cover .cover-wrap
   margin-bottom: 0
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  .cover-title
+    font-weight: 700
+    font-size: 1.5rem
+    margin: 1rem 0
+    line-height: 1.2
+  .description
+    margin: 1rem 0
+  .start-wrap
+    margin: 2rem 0
+    flex-shrink: 0
+    a.start
+      display: inline-block
+
+.l_cover.post
+  .cover
+    z-index: -1
+    width: 100%
+    height: 30vh
+    max-width: $device-2k
+    min-height: 150px
+    max-height: 400px
+    @media screen and (max-width: $device-tablet)
+      height: 25vh
+    @media screen and (max-width: $device-mobile)
+      height: 20vh
+    @media screen and (min-width: $device-2k)
+      margin-top: 4rem
+      .img
+        border-radius: 2rem
+
+
+.l_cover.post .cover-wrap
+  z-index: 1
+  .article-title
+    text-align: center
+    padding: 1rem
+    margin: 1em 0 0 0
+    @media screen and (min-width: $device-2k)
+      font-size: 3rem
+
+
+.l_cover.wiki .cover-wrap
   max-width: $device-mobile
   .preview
     margin-bottom: 2rem
@@ -18,15 +68,5 @@
       @media screen and (max-width: $device-mobile)
         max-width: 60%
   .cover-title
-    font-weight: 700
-    font-size: 1.5rem
-    margin: 1rem 0
     &:first-child
       font-size: 3rem
-  .description
-    margin: 1rem 0
-  .start-wrap
-    margin: 2rem 0
-    flex-shrink: 0
-    a.start
-      display: inline-block

package/source/css/_layout/sidebar/sidebar.styl

@@ -61,13 +61,13 @@
     if hexo-config('style.animated_avatar.animate') == 'always'
       div.bg
         opacity: 1 !important
-        animation: spin infinite 1s
+        animation: spin infinite 4s
         animation-timing-function: linear
     if hexo-config('style.animated_avatar.animate') == 'auto'
       &:hover
         div.bg
           opacity: 1 !important
-          animation: spin infinite 1s
+          animation: spin infinite 4s
           animation-timing-function: linear
 
   a.title
@@ -164,7 +164,9 @@ nav.menu
       background: var(--site-bg)
       padding-top: 2px
       z-index 1
-      line-height: 2.4
+      line-height: 2
+      color: var(--text-p4)
+      font-size: $fs-14
       &:empty
         display: none
       .cap-action
@@ -190,7 +192,21 @@ nav.menu
           text-decoration: underline
     .widget-header+.widget-body
       margin-top: 0
-  .widget-wrap#recent .widget-body, .widget-wrap#related .widget-body
+
+  .widget-wrap .widget-body
+    .more-item
+      margin: .5rem 0
+      .cap
+        margin-bottom: .25rem
+  .widget-wrap#recent .widget-body
+    a
+      line-height: 1.2
+      font-weight: 500
+      color: var(--text-p2)
+      font-size: $fs-13
+      &:hover
+        color: $color-hover
+  .widget-wrap#related .widget-body
     >a
       padding 0.5rem
       display: block

package/source/css/_layout/tag-plugins/folding.styl

@@ -57,6 +57,7 @@ details.folding[open]
 details.folding[child=codeblock]>div.body
   padding: 0
   background: transparent
+  overflow: hidden
   .highlight
     border: none
     border-radius: 0