hexo-theme-stellar 1.5.2 → 1.7.0

package/scripts/tags/friends.js

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

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/link.js

@@ -1,36 +1,62 @@
 /**
- * link.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * link.js v1.1 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% link url title [description] [img:src] %}
+ * {% link url title [description] [icon:src] %}
  */
 
 'use strict';
 
+var util = require('hexo-util');
+const full_url_for = require('hexo-util').full_url_for.bind(hexo);
+
 hexo.extend.tag.register('link', function(args) {
-  args = hexo.args.map(args, ['img'], ['url', 'title', 'description']);
+  args = hexo.args.map(args, ['icon'], ['url', 'title', 'description']);
 
   var el = '';
   el += '<div class="tag-plugin link dis-select">';
-  el += '<a class="link-card" title="' + args.title + '" href="' + args.url + '"';
+  el += '<a class="link-card' + (args.description ? ' rich' : ' plain') + '" title="' + args.title + '" href="' + args.url + '"';
   if (args.url.includes('://')) {
     el += ' target="_blank" rel="external nofollow noopener noreferrer"';
   }
   el += '>';
-  // left
-  el += '<div class="left">';
-  el += '<span class="title fs14">' + args.title + '</span><span class="url fs12">' + (args.description || args.url) + '</span>';
-  el += '</div>';
-
-  // right
-  el += '<div class="right">';
-  if (hexo.theme.config.plugins.lazyload && hexo.theme.config.plugins.lazyload.enable) {
-    el += '<div class="lazy img" data-bg="' + (args.img || hexo.theme.config.default.link) + '"></div>';
-  } else {
-    el += '<div class="lazy img" style="background-image:url(&quot;' + (args.img || hexo.theme.config.default.link) + '&quot;)"></div>';
+
+  function loadIcon() {
+    var el = '';
+    if (hexo.theme.config.plugins.lazyload && hexo.theme.config.plugins.lazyload.enable) {
+      el += '<div class="lazy img" data-bg="' + (args.icon || hexo.theme.config.default.link) + '"></div>';
+    } else {
+      el += '<div class="lazy img" style="background-image:url(&quot;' + (args.icon || hexo.theme.config.default.link) + '&quot;)"></div>';
+    }
+    return el;
+  }
+  function loadTitle() {
+    return '<span class="title">' + args.title + '</span>';
+  }
+  function loadDesc() {
+    return '<span class="desc fs12">' + (args.description || full_url_for(args.url)) + '</span>';
   }
 
-  el += '</div>';
+  if (args.description) {
+    // top
+    el += '<div class="top">';
+    el += loadIcon();
+    el += '<span class="desc fs12">' + full_url_for(args.url) + '</span>';
+    el += '</div>';
+    // bottom
+    el += '<div class="bottom">';
+    el += loadTitle() + loadDesc();
+    el += '</div>';
+  } else {
+    // left
+    el += '<div class="left">';
+    el += loadTitle() + loadDesc();
+    el += '</div>';
+    // right
+    el += '<div class="right">';
+    el += loadIcon();
+    el += '</div>';
+  }
 
   // end
   el += '</a></div>';

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/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)
@@ -88,6 +88,7 @@ article.md .highlight
       padding: 4px 0.5rem
       opacity: .25
       font-weight: 700
+      color: var(--theme)
 
   &.yaml .code:before
     content: "YAML"

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)
@@ -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

@@ -32,7 +32,7 @@
       left: 0
       background: var(--site-bg)
       box-shadow: $boxshadow-card-float
-      z-index: 10
+      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,12 +1,24 @@
-.post-list .post-card#archive
-  .archive-year
-    color: $color-theme
-    opacity: .4
+.post-list #archive
+  padding: 1rem
+  .archive-header
+    display: inline-block
     font-family: $ff-code
     font-weight: 700
     line-height: 1.2
-    padding-bottom: 0.5rem
-    trans1 opacity
+    margin-bottom: .5em
+    position: relative
+    padding: 4px 0
+    color: var(--text-p3)
+    &:after
+      content: ""
+      position: absolute
+      height: 4px
+      bottom: 0
+      left: 0
+      right: 0
+      z-index: -1
+      border-radius: 4px
+      background: var(--block-border)
   a.post
     display: inline-flex
     align-items: baseline
@@ -19,44 +31,64 @@
       margin-right: 1em
       font-weight: 700
       flex-shrink: 0
-      opacity .65
-  &:hover .archive-year
-    opacity: 1
+      opacity .5
+  &:hover
+    .archive-header
+      color: var(--text-p1)
+      &:after
+        background: $color-theme
+
 
-.post-list .post-card#cats
+
+.post-list #cats
+  padding: 0
   a.cat
     display: flex
     &.child
       padding-left: 2rem
-    padding: 0.5rem 1rem
+    padding: .5em 1rem
     border-radius: $border-block
     color: var(--text-p2)
     align-items: center
     justify-content: space-between
+    font-weight: 500
+    font-size: $fs-14
     .badge
-      color: $color-theme
       font-weight: 700
       font-family: $ff-code
       opacity: .5
+      font-size: $fs-12
     &:hover
-      background: var(--block)
+      background: var(--block-hover)
       color: var(--text-p0)
       .badge
         opacity: 1
+        color: $color-theme
 
-.post-list .post-card#tags
+.post-list #tags
   display: flex
   flex-wrap: wrap
+  padding: 0
+  margin: 0 -4px
   a.tag
     display: inline-flex
     align-items: center
     position: relative
     color: var(--text-p2)
     margin: 4px
-    padding: 4px 8px
+    padding: .5em .75rem
     border-radius: 4px
     background: var(--block)
-    font-size: $fs-14
+    font-size: $fs-13
+    font-weight: 500
+    &:before
+      content: "#"
+      margin-left: -2px
+      margin-right: 2px
+      opacity: .4
     &:hover
+      &:before
+        color $color-theme
+        opacity: 1
       color: var(--text-p0)
       background: var(--block-hover)