hexo-theme-stellar 1.9.0 → 1.11.0

package/scripts/tags/about.js

@@ -10,30 +10,29 @@
 'use strict';
 
 hexo.extend.tag.register('about', function(args, content) {
-  args = hexo.args.map(args, ['avatar', 'height']);
+  args = hexo.args.map(args, ['avatar', 'height', 'border']);
   var rows = hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n');
   var el = '';
   // wrapper
   el += '<div class="tag-plugin about">';
   el += '<div class="about-header">';
   // avatar
-  if (args.avatar) {
+  var avatar_url = args.avatar;
+  if (args.avatar === undefined) {
+     avatar_url = hexo.config.avatar;
+  }
+  if (avatar_url) {
     el += '<div class="avatar">'
-    el += '<img src="' + args.avatar + '"';
+    el += '<img src="' + avatar_url + '"';
+    if (args.border && args.border.length > 0) {
+      el += ' style="border-radius:' + args.border + '"';
+    }
     if (args.height && args.height.length > 0) {
-      el += ' height="' + args.height + '"/>';
-    } else {
-      el += '/>';
+      el += ' height="' + args.height + '"';
     }
+    el += '/>';
     el += '</div>';
   }
-  // title
-  if (rows.length > 0) {
-    // el += '<div class="title">';
-    el += rows.shift();
-    // el += '</div>';
-  }
-
   el += '</div>';
 
   // content

package/scripts/tags/folders.js

@@ -0,0 +1,55 @@
+/**
+ * folders.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% folders [color:white] %}
+ * <!-- folder title 1 -->
+ * body 1
+ * <!-- folder title 2 -->
+ * body 2
+ * {% endtable %}
+ */
+
+'use strict';
+
+hexo.extend.tag.register('folders', function(args, content) {
+  args = hexo.args.map(args, ['color']);
+  var el = '';
+  el += '<div class="tag-plugin folders"';
+  el += ' ' + hexo.args.joinTags(args, ['color']).join(' ');
+  el += '>';
+  
+  var arr = content.split(/<!--\s*(.*?)\s*-->/g).filter((item, i) => {
+    return item.trim().length > 0;
+  });
+  if (arr.length > 0) {
+    var nodes = [];
+    arr.forEach((item, i) => {
+      if (item.startsWith('folder ')) {
+        nodes.push({
+          header: item.substring(7)
+        });
+      } else if (nodes.length > 0) {
+        var node = nodes[nodes.length-1];
+        if (node.body == undefined) {
+          node.body = item;
+        } else {
+          node.body += '\n' + item;
+        }
+      }
+    });
+    nodes.forEach((node, i) => {
+      el += '<details class="folder" index="' + (i) + '">';
+      // summary
+      el += '<summary><span>' + (node.header || '') + '</span></summary>';
+      // content
+      el += '<div class="body">';
+      el += hexo.render.renderSync({text: node.body, engine: 'markdown'}).split('\n').join('');
+      el += '</div></details>';
+    });  
+  }
+
+  el += '</div>';
+  
+  return el;
+}, {ends: true});

package/scripts/tags/friends.js

@@ -65,9 +65,8 @@ hexo.extend.tag.register('friends', function(args) {
           el += groupHeader(group);
         }
         if (group.repo) {
-          el += '<div class="friendsjs-wrap"';
-          el += ' id="friends-api"';
-          el += ' api="' + (group.api || 'https://issues-api.vercel.app') + '/v1/' + group.repo + '"';
+          el += '<div class="stellar-friends-api"';
+          el += ' api="' + (group.api || 'https://issues-api.xaoxuu.com') + '/v1/' + group.repo + '"';
           el += '>';
           el += '<div class="group-body"></div>';
           el += '</div>';

package/scripts/tags/ghcard.js

@@ -24,10 +24,10 @@ hexo.extend.tag.register('ghcard', function(args) {
   if (path.includes('/')) {
     // is repo
     const ps = path.split('/');
-    url += 'https://github-readme-stats.vercel.app/api/pin/?username=' + ps[0] + '&repo=' + ps[1];
+    url += 'https://github-readme-stats.xaoxuu.com/api/pin/?username=' + ps[0] + '&repo=' + ps[1];
   } else {
     // is user
-    url += 'https://github-readme-stats.vercel.app/api/?username=' + path;
+    url += 'https://github-readme-stats.xaoxuu.com/api/?username=' + path;
   }
   url += '&' + hexo.args.joinURLParams(args, params);
   if (!url.includes('&show_owner=')) {

package/scripts/tags/lib/users.js

@@ -11,8 +11,7 @@ module.exports = ctx => function(args) {
   args = ctx.args.map(args, ['api']);
   var el = '<div class="tag-plugin users-wrap">';
   
-  el += '<div class="friendsjs-wrap"';
-  el += ' id="friends-api"';
+  el += '<div class="stellar-friends-api"';
   el += ' api="' + args.api + '"';
   el += '>';
   el += '<div class="group-body"></div>';

package/scripts/tags/sites.js

@@ -69,9 +69,8 @@ hexo.extend.tag.register('sites', function(args) {
           el += groupHeader(group);
         }
         if (group.repo) {
-          el += '<div class="sitesjs-wrap"';
-          el += ' id="sites-api"';
-          el += ' api="' + (group.api || 'https://issues-api.vercel.app') + '/v1/' + group.repo + '"';
+          el += '<div class="stellar-sites-api"';
+          el += ' api="' + (group.api || 'https://issues-api.xaoxuu.com') + '/v1/' + group.repo + '"';
           el += '>';
           el += '<div class="group-body"></div>';
           el += '</div>';

package/scripts/tags/timeline.js

@@ -36,36 +36,43 @@ function layoutNodeContent(content) {
 
 
 function postTimeline(args, content) {
+  args = hexo.args.map(args, ['api', 'user']);
   var el = '';
+
+  if (args.api && args.api.length > 0) {
+    el += '<div class="tag-plugin timeline stellar-timeline-api"';
+    el += ' ' + hexo.args.joinTags(args, ['api', 'user']).join(' ');
+    el += '>';
+  } else {
+    el += '<div class="tag-plugin timeline">';
+  }
+
   var arr = content.split(/<!--\s*(.*?)\s*-->/g).filter((item, i) => {
     return item.trim().length > 0;
   });
-  if (arr.length < 1) {
-    return el;
-  }
-  var nodes = [];
-  arr.forEach((item, i) => {
-    if (item.startsWith('node ')) {
-      nodes.push({
-        header: item
-      });
-    } else if (nodes.length > 0) {
-      var node = nodes[nodes.length-1];
-      if (node.body == undefined) {
-        node.body = item;
-      } else {
-        node.body += '\n' + item;
+  if (arr.length > 0) {
+    var nodes = [];
+    arr.forEach((item, i) => {
+      if (item.startsWith('node ')) {
+        nodes.push({
+          header: item
+        });
+      } else if (nodes.length > 0) {
+        var node = nodes[nodes.length-1];
+        if (node.body == undefined) {
+          node.body = item;
+        } else {
+          node.body += '\n' + item;
+        }
       }
-    }
-  });
-
-  el += '<div class="tag-plugin timeline">';
-  nodes.forEach((node, i) => {
-    el += '<div class="timenode" item="' + (i + 1) + '">';
-    el += layoutNodeTitle(node.header.substring(5));
-    el += layoutNodeContent(node.body);
-    el += '</div>';
-  });
+    });
+    nodes.forEach((node, i) => {
+      el += '<div class="timenode" index="' + (i) + '">';
+      el += layoutNodeTitle(node.header.substring(5));
+      el += layoutNodeContent(node.body);
+      el += '</div>';
+    });  
+  }
 
   el += '</div>';
   return el;

package/source/css/_common/base.styl

@@ -12,15 +12,8 @@ a
   &:hover
     color: $color-hover
 
-// md > a
-p, li
-  >a:not([class])
-    margin: 0 1px
-    padding: 4px
-    border-radius: 4px
-    &:hover
-      color: darken($color-hover, 10)
-      background: alpha($color-hover, 0.08)
+p:not([class]) 
+  text-align: justify
 
 hr
   color: var(--text-meta)
@@ -60,3 +53,6 @@ table:not([class])
     trans()
     &:hover
       background: var(--block)
+
+*[ff=title]
+  font-family: $ff-logo

package/source/css/_common/button.styl

@@ -14,7 +14,7 @@ a.button
   font-size: $fs-15
   &.theme
     background: $color-theme
-    color: var(--site-bg)
+    color: var(--card)
     &:hover
       background: $color-hover
 

package/source/css/_common/device.styl

@@ -1,10 +1,10 @@
 .mobile-only
   display: none
-  @media screen and (max-width: $device-tablet)
+  @media screen and (max-width: $device-mobile-max)
     display: block !important
 
 .mobile-hidden
-  @media screen and (max-width: $device-tablet)
+  @media screen and (max-width: $device-mobile-max)
     display: none !important
 
 .float-panel

package/source/css/_common/highlight.styl

@@ -3,13 +3,14 @@ code
   -moz-osx-font-smoothing: auto
   color: var(--text-code)
   font-family: $ff-code
-  word-break: break-all
+
+p>code:not([class]),li>code:not([class])
   font-size: 85%
   background: var(--block)
   padding: .2em .4em
   border-radius: 4px
 
-article.md .highlight
+article.md .highlight, pre:not([class]):has(>code)
   margin: var(--gap-p) 0
   border-radius: $border-block
   overflow: hidden
@@ -168,7 +169,7 @@ $hl-red = #EE2B29
 $hl-orange = #FB3F1B
 $hl-amber = #FD8607
 $hl-text = var(--text-p1)
-pre
+.code>pre
   .code:before
     display: none
   // 行

package/source/css/_common/html.styl

@@ -5,6 +5,8 @@ html
   font-size: $fs-root
   -webkit-text-size-adjust: 100%
   -ms-text-size-adjust: 100%
+  if hexo-config('style.smooth_scroll')
+    scroll-behavior: smooth
 body
   background: var(--site-bg)
   margin: 0

package/source/css/_common/loading.styl

@@ -13,3 +13,8 @@ svg.loading
       transform:rotate(0deg)
     to
       transform:rotate(360deg)
+
+.loading-wrap
+  min-height: 50px
+  margin: 2rem 0
+  text-align: center

package/source/css/_common/pre.styl

@@ -0,0 +1,6 @@
+pre:not([class]):has(>code)
+  display: block
+  padding: 1rem
+  overflow: scroll
+  code 
+    padding: 0

package/source/css/_custom.styl

@@ -1,33 +1,30 @@
 @require('_defines/const')
 
 // 通用主题色
-$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)
+$color-theme = convert(hexo-config('style.color.common.theme'))
+$color-accent = convert(hexo-config('style.color.common.accent'))
+$color-link = convert(hexo-config('style.color.common.link'))
+$color-button = convert(hexo-config('style.color.common.button'))
+$color-hover = convert(hexo-config('style.color.common.hover'))
 
 // 浅色
-$light-site-bg = convert(hexo-config('style.theme.light'))
-$light-block = #f2f2f2
-$light-title = #000
-$light-text = #333
-$light-code = #111
-$light-card = white
+$light-background = convert(hexo-config('style.color.light.background'))
+$light-block = convert(hexo-config('style.color.light.block'))
+$light-card = convert(hexo-config('style.color.light.card'))
+$light-title = convert(hexo-config('style.color.light.title'))
+$light-text = convert(hexo-config('style.color.light.text'))
+$light-code = convert(hexo-config('style.color.light.code'))
 
 // 深色
-$dark-site-bg = convert(hexo-config('style.theme.dark'))
-$dark-block = darken(saturate($dark-site-bg, 40%), 2)
-$dark-title = #fff
-$dark-text = #eee
-$dark-code = #ff7043
-$dark-card = lighten(saturate($dark-site-bg, 50%), 10)
+$dark-background = convert(hexo-config('style.color.dark.background'))
+$dark-block = convert(hexo-config('style.color.dark.block'))
+$dark-card = convert(hexo-config('style.color.dark.card'))
+$dark-title = convert(hexo-config('style.color.dark.title'))
+$dark-text = convert(hexo-config('style.color.dark.text'))
+$dark-code = convert(hexo-config('style.color.dark.code'))
 
 // 移动端深色背景（OLED调成纯黑可以省电）
-$dark-site-bg-mobile = black
+$dark-background-mobile = convert(hexo-config('style.color.dark.background-mobile'))
 
 
 // @font-face
@@ -38,11 +35,20 @@ $dark-site-bg-mobile = black
 
 $ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
 $ff-code = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
-
 $ff-logo = $ff-body
 
+if hexo-config('style.font-family.body')
+  $ff-body = convert(hexo-config('style.font-family.body'))
+
+if hexo-config('style.font-family.code')
+  $ff-code = convert(hexo-config('style.font-family.code'))
+
+if hexo-config('style.font-family.logo')
+  $ff-logo = convert(hexo-config('style.font-family.logo'))
+
+
 // font size
-$fs-root = 16px
+$fs-root = convert(hexo-config('style.font-size'))
 $fs-15 = .9375rem
 $fs-14 = .875rem
 $fs-13 = .8125rem
@@ -76,6 +82,13 @@ $border-image = 6px
   @media screen and (min-width: $device-4k)
     --width-main: 860px
     --gap-l: 64px
+  // iPad 竖屏
+  @media screen and (max-width: $device-tablet)
+    --width-left: 220px
+  // iPad 竖屏
+  @media screen and (max-width: $device-mobile-max)
+    --width-left: 256px
+
 
 
 // shadow

package/source/css/_defines/const.styl

@@ -2,6 +2,7 @@
 $device-mobile-375 = 375px
 $device-mobile-425 = 425px
 $device-mobile = 500px
+$device-mobile-max = 667px
 $device-tablet = 768px
 $device-laptop = 1024px
 $device-desktop = 1440px

package/source/css/_defines/theme.styl

@@ -1,14 +1,14 @@
 :root
-  --site-bg: $light-site-bg
+  --site-bg: $light-background
   --block: $light-block
   --block-border: darken($light-block, 5)
   --block-hover: darken($light-block, 2)
   --text-p0: $light-title
   --text-p1: $light-text
-  --text-p2: mix($light-text, $light-site-bg, 80)
-  --text-p3: mix($light-text, $light-site-bg, 60)
-  --text-p4: mix($light-text, $light-site-bg, 35)
-  --text-meta: mix($light-text, $light-site-bg, 20)
+  --text-p2: mix($light-text, $light-background, 80)
+  --text-p3: mix($light-text, $light-background, 60)
+  --text-p4: mix($light-text, $light-background, 35)
+  --text-meta: mix($light-text, $light-background, 20)
   --text-code: $light-code
   --card: $light-card
   --theme-highlight: darken($color-theme, 5)
@@ -16,22 +16,22 @@
 
 set_darkmode()
   :root
-    --site-bg: $dark-site-bg
+    --site-bg: $dark-background
     --block: $dark-block
     --block-border: lighten($dark-block, 6)
     --block-hover: darken($dark-block, 4)
     --text-p0: $dark-title
-    --text-p1: mix($dark-text, $dark-site-bg, 85)
-    --text-p2: mix($dark-text, $dark-site-bg, 70)
-    --text-p3: mix($dark-text, $dark-site-bg, 45)
-    --text-p4: mix($dark-text, $dark-site-bg, 35)
-    --text-meta: mix($dark-text, $dark-site-bg, 30)
+    --text-p1: mix($dark-text, $dark-background, 85)
+    --text-p2: mix($dark-text, $dark-background, 70)
+    --text-p3: mix($dark-text, $dark-background, 45)
+    --text-p4: mix($dark-text, $dark-background, 35)
+    --text-meta: mix($dark-text, $dark-background, 30)
     --text-code: $dark-code
     --card: $dark-card
     --theme-highlight: $color-theme
     --theme-bg: mix($color-theme, $dark-card, 10)
-    @media screen and (max-width: $device-tablet)
-      --site-bg: $dark-site-bg-mobile
+    @media screen and (max-width: $device-mobile-max)
+      --site-bg: $dark-background-mobile
       --card: darken($dark-card, 6)
       --block: darken($dark-block, 4)
       --block-border: lighten($dark-block, 2)

package/source/css/_layout/layout.styl

@@ -19,8 +19,8 @@
   max-width: var(--width-main)
 
 
-// iPad 竖屏
-@media screen and (max-width: $device-tablet)
+// 手机布局
+@media screen and (max-width: $device-mobile-max)
   .mobile-only
     display: block !important
   .l_body

package/source/css/_layout/main.styl

@@ -3,8 +3,8 @@
   padding-bottom: "calc(1 * %s)" % var(--gap-l)
   @media screen and (min-width: 1400px)
     margin-left: "calc(2 * %s)" % var(--gap-l)
-    margin-right: "calc(2 * %s + %s)" % (var(--gap-l) var(--width-left))
-  @media screen and (min-width: $device-tablet)
+    margin-right: "calc(2 * %s + %s / 2)" % (var(--gap-l) var(--width-left))
+  @media screen and (min-width: $device-mobile-max)
     padding-top: "calc(2 * %s)" % var(--gap-l)
   header
     margin: 4rem 1rem 2rem

package/source/css/_layout/md.styl

@@ -25,14 +25,16 @@ article.md.content
     >p:not([class])
       text-indent: 'calc(%s * 2)' % $fs-p
       text-align: justify
+      a
+        text-indent: 0
     h1,h2,h3,h4,h5,h6
       text-align: center
     >h2:not([class])
       align-self: center
       border-bottom-style: dashed
-      border-bottom-color: $color-highlight
+      border-bottom-color: $color-accent
   >:first-child
-    margin-top: 1rem
+    margin-top: 0
   h1:not(:first-child)
     margin-top: 2em
   h2:first-child
@@ -129,3 +131,35 @@ article.md img
   border-radius: $border-image
   margin: auto
   display: block
+
+article.md 
+  p:not([class]), li:not([class])
+    a:not([class])
+      position: relative
+      padding: 2px
+      text-decoration: none
+      display: inline-block
+      line-height: 1.2
+      &:after
+        content: ''
+        position: absolute
+        border-radius: 2px
+        bottom: 1px
+        left: 2px
+        right: 2px
+        height: 1px
+        opacity: 0.5
+        background: $color-link
+        trans1: all
+      &:hover
+        border-bottom: none
+        color: $color-link
+        // color: darken($color-hover, 10)
+        // background: alpha($color-hover, 0.08)
+        &:after
+          height: 100%
+          opacity: 0.2
+          bottom: 0
+          left: 0
+          right: 0
+          // background-color: alpha($color-hover, 0.08)

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

@@ -34,11 +34,7 @@
 .page-footer .text
   p
     margin: 4px 0
-    line-height: 1.2
-  a
+    line-height: 1.5
+  a:not([class])
     text-decoration: underline
-    font-weight: 500
-    margin: inherit
-    padding: inherit
-    &:hover
-      background: inherit
+    font-weight: 500

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

@@ -54,6 +54,6 @@ nav.cap
   a+a
     margin-left: 4px
 
-@media screen and (max-width: $device-tablet)
+@media screen and (max-width: $device-mobile-max)
   .nav-wrap
     margin-top: 0

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

@@ -12,6 +12,10 @@
   &:hover
   .paginator
     text-align: center
+    &.next
+      border-left: 1px dashed var(--block-border)
+    &.prev
+      border-right: 1px dashed var(--block-border)
   .current
     font-family: $ff-code
     color: var(--text-p3)

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

@@ -131,6 +131,8 @@
         text-decoration: underline
         &:hover
           color: $color-hover
+        &:after
+          display: none
   div.cmt-body
     min-height: 150px
     position: relative

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

@@ -0,0 +1,30 @@
+.widget-wrap#repo-info
+  .widget-body
+    a.repo
+      display: block
+      border: 1px solid var(--block-border)
+      color: var(--text-p2)
+      background: var(--block)
+      border-radius: $border-block
+      >div  
+        margin: 0.75rem 0.5rem
+      span
+        color: var(--text-p2)
+      &:hover
+        background: var(--block-hover)
+    a.repo
+      svg
+        margin-right: 4px
+      .flex-row
+        display: flex 
+        align-items: center
+      .repo-name
+        font-size: $fs-14
+        font-weight: 700
+      .repo-desc
+        font-size: $fs-13
+      .grid
+        font-size: $fs-13
+        display: grid
+        grid-gap: 2px
+        grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)