hexo-theme-stellar 1.20.0 → 1.22.0

package/scripts/tags/lib/banner.js

@@ -0,0 +1,67 @@
+/**
+ * banner.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% banner title [subtitle] [bg:src] [avatar:src] [link] %}
+ * {% navbar xxx %}
+ * {% endbanner %}
+ */
+
+'use strict';
+
+module.exports = ctx => function(args, content) {
+  args = ctx.args.map(args, ['bg', 'avatar', 'link'], ['title', 'subtitle'])
+  var el = ''
+  el += `<div class="tag-plugin banner">`
+  // bg
+  el += `<img class="bg" src="${args.bg ? args.bg : ctx.theme.config.default.banner}">`
+  // content
+  el += `<div class="content">`
+  // content.top
+  el += `<div class="top">`
+  // content.top.back
+  if (args.link?.length > 0) {
+    el += `<div></div>`
+  } else {
+    el += `
+    <button class="back cap" onclick="window.history.back()">
+      <svg aria-hidden="true" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path></svg>
+    </button>
+    `
+  }
+  
+  // content.top.menus
+  const rows = content.split('\n').filter(item => item.trim().length > 0)
+  for (let row of rows) {
+    if (row.includes('tag-plugin navbar')) {
+      el += row
+      break
+    }
+  }
+  el += `</div>`
+  // content.bottom
+  el += `<div class="bottom">`
+  // content.bottom.avatar
+  if (args.avatar?.length > 0) {
+    el += `<img class="avatar" src="${args.avatar}">`
+  }
+  // content.bottom.text-area
+  if (args.title?.length > 0 || args.subtitle?.length > 0) {
+    el += `<div class="text-area">`
+    if (args.title?.length > 0) {
+      el += `<div class="text title">${args.title}</div>`
+    }
+    if (args.subtitle?.length > 0) {
+      el += `<div class="text subtitle">${args.subtitle}</div>`
+    }
+    el += `</div>`
+  }
+  el += `</div>`
+  el += `</div>`
+  // link
+  if (args.link?.length > 0) {
+    el += `<a class="banner-link" href="${args.link}"></a>`
+  }
+  el += `</div>`
+  return el
+}

package/scripts/tags/lib/{ablock.js → box.js}

@@ -1,10 +1,10 @@
 /**
- * ablock.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * box.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% ablock [color:color] [child:codeblock/tabs] title %}
+ * {% box [color:color] [child:codeblock/tabs] title %}
  * body
- * {% endablock %}
+ * {% endbox %}
  */
 
 'use strict';

package/scripts/tags/lib/gallery.js

@@ -0,0 +1,58 @@
+/**
+ * gallery.js v2.1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% gallery [layout:grid/flow] [size:mix/s/m/l/xl] [ratio:origin/square] %}
+ * ![title](/xxx.png)
+ * ![title](/xxx.png)
+ * ![title](/xxx.png)
+ * ![title](/xxx.png)
+ * {% endgallery %}
+ * 
+ * layout:grid 网格布局，支持通过 size/ratio 设置尺寸和长宽比
+ * layout:flow 瀑布流布局，竖排，适合图片量大的时候使用（体验不佳请慎用）
+ */
+
+'use strict'
+
+function img(src, alt) {
+  let img = ''
+  img += `<img src="${src}"`
+  if (alt?.length > 0) {
+    img += ` alt="${alt}"`
+  }
+  img += `/>`
+  // cap
+  img += `<div class="image-meta">`
+  if (alt?.length > 0) {
+    img += `<span class="image-caption">${alt}</span>`
+  }
+  img += `</div>`
+  return img
+}
+
+module.exports = ctx => function(args, content) {
+  args = ctx.args.map(args, ['layout', 'size', 'ratio'])
+  if (args.layout == null) {
+    args.layout = ctx.theme.config.tag_plugins.gallery.layout
+  }
+  if (args.size == null) {
+    args.size = ctx.theme.config.tag_plugins.gallery.size
+  }
+  if (args.ratio == null) {
+    args.ratio = ctx.theme.config.tag_plugins.gallery.ratio
+  }
+  var el = ''
+  el += `<div class="tag-plugin gallery" ${ctx.args.joinTags(args, ['layout', 'size', 'ratio']).join(' ')}>`
+  const img_mds = content.split('\n').filter(item => item.trim().length > 0)
+  for (let md of img_mds) {
+    const matches = md.match(/\!\[(.*?)\]\((.*?)\)/i)
+    if (matches?.length > 2) {
+      let alt = matches[1]
+      let src = matches[2]
+      el += `<div class="cell">${img(src, alt)}</div>`
+    }
+  }
+  el += `</div>`
+  return el
+}

package/scripts/tags/lib/navbar.js

@@ -1,11 +1,11 @@
 /**
- * navbar.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * navbar.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% navbar [markdown link] ... %}
+ * {% navbar [active:url] [markdown-link] ... %}
  *
  * example:
- * {% navbar active:1 [Home](/) [About](/about/) [Comments](#comments) %}
+ * {% navbar active:/about/ [Home](/) [About](/about/) [Comments](#comments) %}
  */
 
 'use strict'
@@ -18,40 +18,21 @@ module.exports = ctx => function(args) {
   if (args.links) {
     args.links = args.links.split(' ')
   }
-  var el = '<div class="tag-plugin navbar"><nav class="cap">'
-  function layoutItem(a, i) {
-    var text = ''
-    var href = ''
-    var el = '<a'
-    if ((i+1).toString() === args.active) {
-      el += ' class="active"'
-    }
-    if (a.includes('](')) {
-      // markdown
-      let tmp = a.split('](')
-      if (tmp.length > 1) {
-        text = tmp[0]
-        if (text.length > 1) {
-          text = text.substring(1, text.length)
-        }
-        href = tmp[1]
-        if (href.length > 1) {
-          href = href.substring(0, href.length-1)
-        }
-        el += ' href="' + href + '"'
+  var el = `<div class="tag-plugin navbar"><nav class="cap">`
+  for (let link of args.links) {
+    const matches = link.match(/\[(.*?)\]\((.*?)\)/i)
+    if (matches?.length > 2) {
+      let text = matches[1]
+      let href = matches[2]
+      if (href == args.active) {
+        el += `<a class="link blur active" href="${href}">${text}</a>`
+      } else {
+        el += `<a class="link" href="${href}">${text}</a>`
       }
     } else {
-      el += ' href="#' + a + '"'
-      text = a
+      el += `<a class="link" href="#${link}">${link}</a>`
     }
-    el += '>'
-    el += text
-    el += '</a>'
-    return el
   }
-  (args.links || []).forEach((item, i) => {
-    el += layoutItem(item, i)
-  })
-  el += '</nav></div>'
+  el += `</nav></div>`
   return el
 }

package/scripts/tags/lib/swiper.js

@@ -22,7 +22,7 @@ module.exports = ctx => function(args, content) {
       })
     }
   }
-  el += '<div class="tag-plugin gallery swiper" id="swiper-api"'
+  el += '<div class="tag-plugin swiper" id="swiper-api"'
   el += ' ' + ctx.args.joinTags(args, ['width', 'effect']).join(' ')
   el += '>'
   el += '<div class="swiper-wrapper">'

package/scripts/tags/lib/timeline.js

@@ -1,5 +1,5 @@
 /**
- * timeline.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * timeline.js v2.1 | https://github.com/xaoxuu/hexo-theme-stellar/
  *
  * {% timeline %}
  *
@@ -35,14 +35,14 @@ function layoutNodeContent(ctx, content) {
 }
 
 module.exports = ctx => function(args, content = '') {
-  args = ctx.args.map(args, ['api', 'user', 'type', 'limit', 'hide'])
+  args = ctx.args.map(args, ['api', 'user', 'type', 'limit', 'hide', 'avatar'])
   var el = ''
   if (!args.type) {
     args.type = 'timeline'
   }
   if (args.api && args.api.length > 0) {
     el += '<div class="tag-plugin timeline stellar-' + args.type + '-api"'
-    el += ' ' + ctx.args.joinTags(args, ['api', 'user', 'limit', 'hide']).join(' ')
+    el += ' ' + ctx.args.joinTags(args, ['api', 'user', 'limit', 'hide', 'avatar']).join(' ')
     el += '>'
   } else {
     el += '<div class="tag-plugin timeline">'

package/source/css/_common/highlight.styl

@@ -78,6 +78,7 @@ p>code:not([class]),li>code:not([class])
   .gist-file 
     border: 1px solid var(--block-border)
     border-radius: $border-block
+    overflow: hidden
   .gist-data
     border-bottom: 1px solid var(--block-border)
   .highlight

package/source/css/_layout/list.styl

@@ -145,12 +145,11 @@
 
 .post-list .post-card.wiki article .preview
   display: flex
-  width: 200px
-  margin: 1rem .5rem
-  @media screen and (min-width: 950px)
-    margin: 1rem
+  margin: 1rem 3rem
   align-items: center
   img
+    width: 96px
+    max-height: 96px
     object-fit: contain
     &:not(.lazy)
       trans1: transform 0.75s
@@ -162,5 +161,14 @@
   flex: 1
   overflow: hidden
   word-wrap: break-word
+  .caps
+    line-height: 1
+    margin-bottom: 0.75rem
+  .cap
+    background: var(--theme-block)
+    padding: 2px 4px
+    border-radius: 2px
   p:last-child
     margin-bottom: 0
+  .cap+.cap
+    margin-left: 4px

package/source/css/_layout/md.styl

@@ -35,7 +35,7 @@ h1.article-title
   >:first-child:not(h1)
     margin-top: 0
   h1:not(:first-child)
-    margin-top: 2em
+    margin-top: 1em
   h2
     margin-bottom: 1rem
   h3,h4,h5,h6

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

@@ -63,6 +63,8 @@
     margin-bottom: 2rem
     img
       object-fit: contain
+      min-width: 96px
+      min-height: 96px
       max-height: 35vh
       max-width: 100%
       @media screen and (max-width: $device-mobile)

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

@@ -28,10 +28,10 @@
     background-clip: content-box
     &.next
       border-left: 1px dashed var(--block-border)
-      background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.4/arrow/064b95430caf4.svg')
+      background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/arrow/064b95430caf4.svg')
     &.prev
       border-right: 1px dashed var(--block-border)
-      background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.4/arrow/f049bbd4e88ec.svg')
+      background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/arrow/f049bbd4e88ec.svg')
   .current
     font-family: $ff-code
     background: var(--block)

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

@@ -0,0 +1,107 @@
+.tag-plugin.banner
+  border-radius: $border-card
+  position: relative
+  overflow: hidden
+  display: flex 
+  flex-direction: column
+  justify-content: flex-end
+  align-items: flex-start
+  color: white
+  height: 240px
+  @media screen and (max-width: $device-mobile-max)
+    height: 200px
+  .bg
+    z-index: 0
+  .content 
+    z-index: 1
+    width: 100%
+    height: 100%
+    display: flex
+    flex-direction: column
+    justify-content: space-between
+    .top
+      display: flex
+      justify-content: space-between
+      align-items: center
+      line-height: 1
+      margin: 1rem
+      .navbar
+        margin: 0
+        nav.cap
+          border-radius: 6px
+          background: rgba(black, 0.2)
+        .link
+          color: rgba(white, 0.8)
+          padding: 2px 6px
+          border-radius: 4px
+          background: none
+          line-height: 1.5
+          font-size: $fs-15
+          &:hover
+            color: white
+            background: rgba(black, 0.5)
+          &.active
+            color: white
+            background: rgba(white, 0.25)
+      .back
+        background: none
+        padding: 0
+        line-height: 0
+        visibility: hidden
+        @media screen and (max-width: $device-mobile-max)
+          visibility: visible
+        svg
+          width: 20px
+          height: 20px
+          fill: white
+  .banner-link
+    position: absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+    opacity: 0
+    z-index: 2
+  img
+    object-fit: cover
+    disable-select()
+    margin: 0
+    height: 100%
+    width: 100%
+  img.bg
+    position absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+  img.avatar
+    border-radius: 50%
+    width: 48px
+    height: 48px
+    border: 2px solid white
+  .bottom
+    display: flex
+    padding: 1rem
+    width: 100%
+    box-sizing: border-box
+    background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2))
+    text-shadow: 0 0 1px rgba(0,0,0,0.12)
+    .title
+      font-size: 1.5rem
+      font-weight: 600
+    .avatar+.text-area
+      margin-left: 0.75rem
+    .text-area .text
+      line-height: 1.2
+      margin-top: 0.25rem
+      margin-bottom: 0.25rem
+    .avatar+.text-area .title
+      font-size: 1.2rem
+    .subtitle
+      font-size: $fs-14
+
+.tag-plugin.banner
+  trans1(transform, 2s)
+  &:hover
+    img.bg
+     transform: scale(1.01)

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

@@ -13,8 +13,9 @@ set_text_black()
 
 set_dynamic_color($theme)
   --theme: $theme
-  --theme-block: hsl(hue($theme), 90, 92)
   --theme-border: hsl(hue($theme), 50, 80)
+  --theme-block: hsl(hue($theme), 90, 92)
+  --theme-codeblock: hsl(hue($theme), 50, 95)
   --text-p0: hsl(hue($theme), 55, 16)
   --text-p1: hsl(hue($theme), 55, 20)
   --text-p2: hsl(hue($theme), 90, 24)
@@ -23,6 +24,7 @@ set_dynamic_color($theme)
   --theme: var(--text-p1)
   --theme-border: var(--block-border)
   --theme-block: var(--block)
+  --theme-codeblock: var(--block)
 
 .colorful[color='red']
   set_dynamic_color($c-red)
@@ -63,8 +65,9 @@ set_dynamic_color($theme)
 set_darkmode_tags()
   set_dynamic_color($theme)
     --theme: $theme
-    --theme-block: hsl(hue($theme), 16, 16)
     --theme-border: hsl(hue($theme), 50, 24)
+    --theme-block: hsl(hue($theme), 16, 16)
+    --theme-codeblock: hsl(hue($theme), 12, 18)
     --text-p0: hsl(hue($theme), 100, 85)
     --text-p1: hsl(hue($theme), 50, 75)
     --text-p2: hsl(hue($theme), 80, 72)

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

@@ -27,7 +27,7 @@
       margin-top: 19px
       margin-bottom: 20px
     .frame
-      background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.4/frame/iphone11.svg);
+      background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/frame/iphone11.svg);
       width: 329px
       height: 658px
   &[focus='top']

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

@@ -0,0 +1,95 @@
+.tag-plugin.gallery
+  .cell
+    display: block
+    overflow hidden
+    z-index 0
+    position: relative
+    &:hover
+      .image-meta
+        background: rgba(black, 0.5)
+      .image-caption
+        color: white
+  img 
+    object-fit: cover
+    max-height: 100%
+    display: block
+  .image-meta
+    position: absolute
+    z-index: 1
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    pointer-events: none
+    background: transparent
+    trans1(background)
+    display: flex
+    flex-direction: column
+    justify-content: flex-end
+    .image-caption
+      display: block
+      font-size: $fs-13
+      color: transparent
+      line-height: 1.2
+      margin: 0.5rem
+      trans1(color)
+      &:empty
+        display: none
+
+.tag-plugin.gallery[layout='grid'] .cell
+  trans1(transform, 0.5s)
+  &:hover
+    img
+      transform: scale(1.1)
+    
+
+// 网格布局
+.tag-plugin.gallery[layout='grid']
+  display: grid
+  &[size='s']
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))
+    grid-gap: 2px
+    .cell,img
+      border-radius: 2px
+  &[size='m']
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+    grid-gap: 4px
+    .cell,img
+      border-radius: 4px
+  &[size='l']
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
+    grid-gap: 8px
+    .cell,img
+      border-radius: 8px
+  &[size='xl'] // 2列
+    grid-template-columns: repeat(2, 1fr)
+    grid-gap: 16px
+    .cell,img
+      border-radius: 16px
+  &[size='mix'] // 1张大图+2张小图
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
+    grid-gap: 4px
+    .cell,img
+      border-radius: 4px
+    .cell
+      &:nth-child(3n+1)
+        grid-column: auto / span 2
+        grid-row: auto / span 2
+  &[ratio='square']
+    .cell
+      aspect-ratio: 1
+  .cell
+    background: var(--block)
+    img  
+      width: 100%
+      height: 100%
+// 瀑布流布局
+.tag-plugin.gallery[layout='flow']
+  column-count: 3
+  column-gap: 8px
+  .cell
+    border-radius: 8px
+    padding-bottom: 8px
+  .image-meta
+    border-radius: 8px
+    margin-bottom: 8px

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

@@ -3,7 +3,6 @@
   grid-gap: 16px
   grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
   >.cell
-    margin: 1rem 0
     p:first-child>strong:only-child
       font-size: 1rem
   >.cell>
@@ -18,14 +17,6 @@
     p:last-child
       margin-bottom: -0.25em
 
-.md-text .tag-plugin.grid
-  margin-top: -0.5rem
-  margin-bottom: -0.5rem 
-
-.tag-plugin.grid
-  @media screen and (max-width: $device-tablet)
-    display: block
-
 .tag-plugin.grid
   &[bg]>.cell
     padding: 1rem

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

@@ -31,6 +31,7 @@
     background: var(--block-hover)
 .md-text .tag-plugin.note[child=codeblock]
   padding: 0
+  background: var(--theme-codeblock)
   >.title, >.body:only-child
     margin-top: 0
   >.body

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

@@ -206,4 +206,17 @@
   h5,h6
     font-size: $fs-15
     margin: 0.5rem 0
-    line-height: 1.2
+    line-height: 1.2
+
+.tag-plugin.timeline.stellar-memos-api .body
+  p:first-child 
+    margin-top: 2px
+  p:last-child
+    margin-bottom: 2px
+  img  
+    margin: 0
+    max-height: 128px
+  .tag-plugin.image
+    display: flex
+    .image-bg+.image-bg
+      margin-left: 4px

package/source/css/_layout/widgets/ghuser.styl

@@ -8,7 +8,7 @@
   padding: 1rem
   box-shadow: $boxshadow-card
 
-.widget-wrapper.ghuser 
+.widgets .widget-wrapper.ghuser 
   .avatar
     display: block
     border-radius: 100%
@@ -20,15 +20,14 @@
     @media screen and (max-width: $device-tablet)
       max-width: 50%
 
-  .username
+  p.username
     font-weight: 900
     font-size: $fs-h2
     color: var(--text-p0)
-    margin: 0.5rem 0
-
-  .bio
+    margin: 0
+  p.bio
     font-size: $fs-13
-    margin: 0.5rem 0
+    margin: 0
 
   .follow 
     font-weight: 500

package/source/css/_layout/widgets/toc_common.styl

@@ -24,7 +24,7 @@
       padding: 0.5rem
       font-weight: 500
       font-size: $fs-13
-      color: var(--text-p2)
+      color: var(--text-p1)
     .toc-child .toc-item .toc-link
       padding: 0.25rem 0.5rem 0.25rem 1.3rem
       font-weight: 400
@@ -69,3 +69,14 @@
     color: $color-theme !important
     &:before
       visibility: visible
+
+
+// 激活上级目录时显示子目录
+.toc-item a.toc-link+ol
+  display: none
+.toc a.toc-link.active+ol
+  display: block
+ol:has(> .toc-item a.active)
+  display: block
+.doc-tree:hover a.toc-link+ol
+  display: block