hexo-theme-stellar 1.11.0 → 1.13.0

package/scripts/tags/sites.js

@@ -1,96 +1,57 @@
 /**
- * sites.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * sites.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% sites [only:group1] [not:group2] %}
+ * {% sites [group] [repo:owner/repo] [api:http] %}
  */
 
 'use strict';
 
 hexo.extend.tag.register('sites', function(args) {
-  args = hexo.args.map(args, ['only', 'not', 'repo', 'api']);
-  if (args.only) {
-    args.only = args.only.split(',');
+  args = hexo.args.map(args, ['repo', 'api'], ['group']);
+  var links = hexo.locals.get('data').links;
+  if (links == undefined) {
+    links = {};
   }
-  if (args.not) {
-    args.not = args.not.split(',');
-  }
-  var sites = hexo.locals.get('data').sites;
-  if (sites == undefined) {
-    sites = {};
-  }
-  if (args.repo) {
-    sites = {
-      group: {
-        api: args.api,
-        repo: args.repo
-      }
-    }
+  var api;
+  if (args.api) {
+    api = args.api;
+  } else if (args.repo) {
+    api = 'https://raw.github.xaoxuu.com/' + args.repo + '/output/v2/data.json';
   }
+  
   var el = '<div class="tag-plugin sites-wrap">';
-  function groupHeader(group) {
-    var header = '<div class="group-header">';
-    if (group.title) {
-      header += hexo.render.renderSync({text: group.title, engine: 'markdown'}).split('\n').join('');
-    }
-    if (group.description) {
-      header += hexo.render.renderSync({text: group.description, engine: 'markdown'}).split('\n').join('');
-    }
-    header += '</div>';
-    return header;
-  }
-  function cell(site) {
-    if (site.url && site.title) {
-      var cell = '<div class="site-card">';
-      cell += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + site.url + '">';
-      cell += '<img src="' + (site.screenshot || ('https://image.thum.io/get/width/1024/crop/768/' + site.url)) + '" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;' + hexo.theme.config.default.cover + '&quot;;"/>';
-      cell += '<div class="info">';
-      cell += '<img src="' + (site.avatar || hexo.theme.config.default.link) + '" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;' + hexo.theme.config.default.link + '&quot;;"/>';
-      cell += '<span class="title">' + site.title + '</span>';
-      cell += '<span class="desc">' + (site.description || site.url) + '</span>';
-      cell += '</div>';
-      cell += '</a></div>'
-      return cell;
-    } else {
-      return '';
-    }
-  }
-  for (let groupId of Object.keys(sites)) {
-    function f() {
-      if (args.not && args.not.includes(groupId)) {
-        return;
-      }
-      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);
-        }
-        if (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>';
-        } else if (group.items) {
-          el += '<div class="group-body">';
-          group.items.forEach((site, i) => {
-            el += cell(site);
-          });
-          el += '</div>';
-        }
+  if (api) {
+    el += '<div class="stellar-sites-api"';
+    el += ' api="' + api + '"';
+    el += '>';
+    el += '<div class="group-body"></div>';
+    el += '</div>';
+  } else if (args.group) {
+    function cell(item) {
+      if (item.url && item.title) {
+        var cell = '<div class="site-card">';
+        cell += '<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="' + item.url + '">';
+        cell += '<img src="' + (item.screenshot || ('https://screenshot-api.xaoxuu.com/api?url=' + item.url + '&width=1280&height=720')) + '" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;' + hexo.theme.config.default.cover + '&quot;;"/>';
+        cell += '<div class="info">';
+        cell += '<img src="' + (item.avatar || hexo.theme.config.default.link) + '" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;' + hexo.theme.config.default.link + '&quot;;"/>';
+        cell += '<span class="title">' + item.title + '</span>';
+        cell += '<span class="desc">' + (item.description || item.url) + '</span>';
+        cell += '</div>';
+        cell += '</a></div>'
+        return cell;
+      } else {
+        return '';
       }
     }
-    if (args.only) {
-      if (args.only.includes(groupId)) {
-        f();
-      }
-    } else {
-      f();
-    }
+    el += '<div class="group-body">';
+    const items = links[args.group] || [];
+    items.forEach((item, i) => {
+      el += cell(item);
+    });
+    el += '</div>';
   }
+
   el += '</div>';
   return el;
 });

package/scripts/tags/split.js

@@ -0,0 +1,51 @@
+/**
+ * split.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% split [style:block/card] %}
+ * <!-- cell -->
+ * left body
+ * <!-- cell -->
+ * right body
+ * {% endsplit %}
+ */
+
+'use strict';
+
+hexo.extend.tag.register('split', function(args, content) {
+  args = hexo.args.map(args, ['bg']);
+  var el = '';
+  el += '<div class="tag-plugin split"';
+  el += ' ' + hexo.args.joinTags(args, ['bg']).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 == 'cell') {
+        nodes.push({
+          header: ''
+        });
+      } 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 += '<div class="cell" index="' + (i) + '">';
+      el += hexo.render.renderSync({text: node.body, engine: 'markdown'}).split('\n').join('');
+      el += '</div>';
+    });  
+  }
+
+  el += '</div>';
+
+  return el;
+}, {ends: true});

package/scripts/tags/timeline.js

@@ -36,12 +36,14 @@ function layoutNodeContent(content) {
 
 
 function postTimeline(args, content) {
-  args = hexo.args.map(args, ['api', 'user']);
+  args = hexo.args.map(args, ['api', 'user', 'type', 'limit', 'hide']);
   var el = '';
-
+  if (!args.type) {
+    args.type = 'timeline';
+  }
   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 += '<div class="tag-plugin timeline stellar-' + args.type + '-api"';
+    el += ' ' + hexo.args.joinTags(args, ['api', 'user', 'limit', 'hide']).join(' ');
     el += '>';
   } else {
     el += '<div class="tag-plugin timeline">';

package/source/css/_common/base.styl

@@ -12,8 +12,8 @@ a
   &:hover
     color: $color-hover
 
-p:not([class]) 
-  text-align: justify
+.md p:not([class]) 
+  text-align: convert(hexo-config('style.text-align'))
 
 hr
   color: var(--text-meta)

package/source/css/_common/blur.styl

@@ -5,6 +5,9 @@ if hexo-config('style.darkmode') == 'auto'
   @media (prefers-color-scheme: dark)
     :root
       --blur-bg: alpha(black, .5)
+if hexo-config('style.darkmode') == 'always'
+  :root
+    --blur-bg: alpha(black, .5)
 
 .blur
   background: var(--blur-bg)

package/source/css/_common/device.styl

@@ -24,6 +24,8 @@
   if hexo-config('style.darkmode') == 'auto'
     @media (prefers-color-scheme: dark)
       --blur-bg: alpha(#555, .6)
+  if hexo-config('style.darkmode') == 'always'
+    --blur-bg: alpha(#555, .6)
 
 .sidebar-toggle.mobile
   cursor: pointer

package/source/css/_common/highlight.styl

@@ -20,7 +20,7 @@ article.md .highlight, pre:not([class]):has(>code)
   font-family: $ff-code
   box-sizing: border-box
   @media screen and (min-width: $device-mobile)
-    min-width: 280px
+    min-width: 180px
 
 article.md .highlight
   position: relative

package/source/css/_common/loading.styl

@@ -15,6 +15,19 @@ svg.loading
       transform:rotate(360deg)
 
 .loading-wrap
-  min-height: 50px
-  margin: 2rem 0
-  text-align: center
+  margin: 0
+  text-align: center
+  background: var(--block)
+  border-radius: $border-card
+  position relative
+  padding: 2rem
+  svg  
+    margin: 4px
+  &:after 
+    content: hexo-config('style.loading.loading')
+    color: var(--text-p1)
+    display: block
+    font-size: 14px
+  &.error
+    &:after
+      content: hexo-config('style.loading.error')

package/source/css/_common/title.styl

@@ -25,19 +25,6 @@ h6
 .fs12
   font-size: $fs-12
 
-.post-list
-  .post-title
-    font-weight: 500
-    margin: .75rem 0 .5rem
-    line-height: 1.2
-    font-size: $fs-h3
-    border-bottom: none
-    color: var(--text-p0)
-    trans1 color
-  .wiki .post-title
-    margin-top: 0.5rem
-    font-weight: 700
-
 .widgets
   .post-title
     margin: 0.75rem 0

package/source/css/_custom.styl

@@ -69,14 +69,14 @@ $border-image = 6px
 
 // 可以动态变化的属性
 :root
-  --width-left: 256px
+  --width-left: 288px
   --width-main: 720px
   --gap-l: 16px
   --gap-p: .75rem // gap for paragraph
   // desktop 2k or larger
   @media screen and (min-width: $device-2k)
     --gap-l: 32px
-    --width-left: 320px
+    --width-left: 352px
     --width-main: 780px
   // desktop 4k or larger
   @media screen and (min-width: $device-4k)
@@ -84,10 +84,10 @@ $border-image = 6px
     --gap-l: 64px
   // iPad 竖屏
   @media screen and (max-width: $device-tablet)
-    --width-left: 220px
+    --width-left: 252px
   // iPad 竖屏
   @media screen and (max-width: $device-mobile-max)
-    --width-left: 256px
+    --width-left: 288px
 
 
 

package/source/css/_layout/list.styl

@@ -1,6 +1,25 @@
 // list
 .post-list
   margin: 1rem
+  .post-title
+    margin-top: 1.5rem
+  .post-title:first-child
+    margin-top: .5rem
+
+.post-list
+  .post-title
+    font-weight: 500
+    margin: .75rem 0
+    line-height: 1.2
+    font-size: $fs-h3
+    border-bottom: none
+    color: var(--text-p0)
+    trans1 color
+    @media screen and (max-width: $device-mobile)
+      font-size: $fs-h4
+      margin: 0.5rem 0
+  .wiki .post-title
+    margin-top: 0.5rem
 
 // card
 .post-list .post-card
@@ -14,14 +33,18 @@
   position: relative
   .excerpt
     margin: 1rem 0
+    @media screen and (max-width: $device-mobile)
+      margin: 0.5rem 0
     >p
       margin: 1rem 0
+      @media screen and (max-width: $device-mobile)
+        margin: 0.5rem 0
       line-height: 1.5
   .meta.cap
     display: flex
     flex-wrap: wrap
     align-items: center
-    margin: .5rem 0
+    margin: 0.25rem 0
     line-height: 1.5
     span+span
       margin-left: 0.5rem
@@ -37,10 +60,11 @@
 // common article
 .post-list article.md
   padding: 1rem
+  @media screen and (max-width: $device-mobile)
+    padding: 0.5rem 1rem
   p
     color: var(--text-p2)
-    @media screen and (min-width: $device-mobile)
-      font-size: $fs-14
+    font-size: $fs-14
 
 
 // posts
@@ -51,6 +75,7 @@
   margin-left: -1rem
   margin-top: -1rem
   margin-right: -1rem
+  background: var(--block)
   &:not(.lazy)
     trans1: transform 1s
   img
@@ -76,28 +101,31 @@
     img
       width: 100%
     .cover-info
-      padding: 1rem
+      padding: 1.5rem 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
+      color: var(--text-p0)
       &[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
+        margin-top: 4px
       .cap
-        color: white
         font-size: $fs-13
+        color: unset
       .title
         font-weight: 500
         font-size: $fs-h3
+      @media screen and (max-width: $device-mobile)
+        padding: 1rem
+        div+div
+          margin-top: 2px
+        .title
+          font-size: $fs-h4
+        .cap
+          font-size: $fs-12
   h2
     margin: .25rem 0
     font-size: $fs-h4

package/source/css/_layout/main.styl

@@ -5,7 +5,7 @@
     margin-left: "calc(2 * %s)" % var(--gap-l)
     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)
+    padding-top: "calc(1 * %s)" % var(--gap-l)
   header
     margin: 4rem 1rem 2rem
     .logo-wrap

package/source/css/_layout/md.styl

@@ -24,7 +24,7 @@ article.md.content
   &.indent
     >p:not([class])
       text-indent: 'calc(%s * 2)' % $fs-p
-      text-align: justify
+      text-align: convert(hexo-config('style.text-align'))
       a
         text-indent: 0
     h1,h2,h3,h4,h5,h6
@@ -68,9 +68,6 @@ article.md.content
   .tag-plugin,iframe
     margin-top: var(--gap-p)
     margin-bottom: var(--gap-p)
-  p,.tag-plugin
-    .highlight,table
-      --gap-p: 1rem
   iframe
     display: block
 

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

@@ -1,7 +1,7 @@
 .nav-wrap
   position: sticky
   position: -webkit-sticky
-  margin-top: 1.75rem
+  margin-top: .75rem
   top: -2px
   background: var(--site-bg)
   padding: 0 1rem

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

@@ -1,5 +1,6 @@
 .related-wrap
-  padding: 2rem 1rem
+  padding: 1rem
+  margin: 2rem 0
   &:empty
     display: none
   section.header
@@ -18,108 +19,76 @@
     color: var(--text-p1)
 
 
-.related-wrap#related-posts
-  .related-posts
-    width: 100%
-    display: flex
-    margin: 1rem 0
-    overflow-x: scroll
-    align-items: flex-start
-    scrollbar(8px, 4px)
-    padding-bottom: 8px
-    border-radius: $border-block
-    a
-      flex-grow: 0
-      flex-shrink: 0
-      background: var(--card)
-      border-radius: $border-block
-      padding-bottom: 1rem
-      line-height: 1.2
-      display: flex
-      flex-direction: column
+
+.related-posts
+  width: 100%
+  margin: 1rem 0
+  .item
+    line-height: 1.2
+    display: block
+    border-left: 0
+    margin-top: 1rem
+    .title
+      color: var(--text-p1)
+      font-weight: 500
+      font-size: 1rem
+      trans1 color
+      position: relative
+      padding-bottom: 4px
+      &:after
+        content: ''
+        position: absolute
+        left: 0
+        width: 0
+        height: 2px
+        bottom: 0
+        border-radius: 2px
+        background: $color-hover
+        trans1 width
+    .excerpt
+      color: var(--text-p3)
+      font-size: $fs-12
+      margin-top: 0.5rem
+      display: -webkit-box
+      -webkit-box-orient: vertical
       overflow: hidden
-      min-width: 280px
-      width: 40vw
-      max-width: 460px
-      border: 1px solid var(--block-hover)
-      z-index: 1
-      .img
-        min-width: 100%
-        min-height: 140px
-        height: "calc(%s * 0.5)" % @width
-        max-height: 230px
-        overflow: hidden
-        img
-          width: 100%
-          height: 100%
-          object-fit: cover
-          &:not(.lazy)
-            trans1: transform 1s
-      @media screen and (max-width: $device-tablet)
-        width: 70vw
-        .img
-          height: "calc(%s * 0.5)" % @width
+      -webkit-line-clamp: 2
+    &:hover
       .title
-        color: var(--text-p1)
-        font-weight: 500
-        font-size: $fs-15
-        margin: .75rem .75rem 0 .75rem
-        display: -webkit-box
-        -webkit-box-orient: vertical
-        overflow: hidden
-        -webkit-line-clamp: 2
-      .excerpt
-        color: var(--text-p2)
-        font-size: $fs-13
-        margin: 0.4rem .75rem 0 .75rem
-        display: -webkit-box
-        -webkit-box-orient: vertical
-        overflow: hidden
-        -webkit-line-clamp: 3
-      &:hover
-        img
-          transform: scale(1.04)
-    a+a
-      margin-left: 1rem
+        color: $color-hover
+        &:after
+          width: 100%
 
 
 .related-wrap#read-next
   .body
-    background: var(--block)
-    border-radius: $border-block
-    border: 1px solid var(--block-border)
-    margin-top: 1rem
-    overflow: hidden
-    .line
-      margin: 0
-      height: 1px
-      background: var(--block-border)
-      &+.line,&:first-child,&:last-child
-        display: none
-    >a
-      display: flex
+    display: grid
+    grid-gap: 16px
+    grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
+    .item  
+      border-top: 1px dashed var(--block-border)
+      border-bottom: 1px dashed var(--block-border)
+      padding: 1rem 0
+    .note
+      margin-bottom: 0.75rem
+      font-size: $fs-12
+      color: var(--text-p4)
+      font-weight: 500
+    a
       margin: 0
       line-height: 1.2
-      padding: 0.75rem 0.5rem
-      color: var(--text-p3)
-      justify-content: space-between
-      align-items: center
-      font-weight: 500
-      font-size: $fs-12
-      &:first-child
-        color: var(--text-p1)
-        font-size: $fs-h4
-        font-weight: 400
-      .note
-        flex-shrink: 0
-        margin-left: 4px
-        font-size: $fs-12
-        color: var(--text-p4)
-        font-weight: 500
+      color: var(--text-p1)
+      font-size: $fs-h4
       &:hover
         color: $color-hover !important
-        background: var(--card)
-
+    #next
+      text-align: right
+.wiki+.related-wrap#read-next
+  .item
+    a
+      font-size: $fs-h3
+    &#prev a
+      color: var(--text-p3)
 
 
 .related-wrap#comments

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

@@ -1,5 +1,5 @@
-.l_left .footer
-  margin-top: .5rem
+.l_left>.footer
+  margin: 0.5rem var(--gap-l) 0
   @media screen and (max-width: $device-tablet)
     margin-bottom: 1rem
 
@@ -26,6 +26,8 @@
       if hexo-config('style.darkmode') == 'auto'
         @media (prefers-color-scheme: dark)
           box-shadow: none
+      if hexo-config('style.darkmode') == 'always'
+        box-shadow: none
 
 .proj-wrap
   display: grid