hexo-theme-stellar 1.24.1 → 1.26.0

package/scripts/helpers/parse_config.js

@@ -1,39 +1,41 @@
 /**
- * md_link(theme.sidebar.menu['home']) is '/'
- * md_text(theme.sidebar.menu['home']) is 'Home'
+ * md_link(theme.menu['home']) is '/'
+ * md_text(theme.menu['home']) is 'Home'
  */
 
 'use strict';
 
 hexo.extend.helper.register('md_text', function(args) {
   if (args == undefined) {
-    return '';
+    return ''
   }
-  let tmp = args.split('](');
+  let tmp = args.split('](')
   if (tmp.length > 1) {
-    tmp = tmp[0];
+    tmp = tmp[0]
     if (tmp.length > 1) {
-      tmp = tmp.substring(1, tmp.length);
+      tmp = tmp.substring(1, tmp.length)
     }
   }
-  if (tmp == 'config.title') {
-    tmp = hexo.config.title;
-  } else if (tmp == 'config.avatar') {
-    tmp = hexo.config.avatar;
+  if (tmp == 'config.title' || tmp == '${config.title}') {
+    tmp = hexo.config.title
+  } else if (tmp == 'config.avatar' || tmp == '${config.avatar}') {
+    tmp = hexo.config.avatar
   }
-  return tmp;
-});
+  return tmp
+})
 
 hexo.extend.helper.register('md_link', function(args) {
   if (args == undefined) {
-    return '';
+    return ''
   }
-  let tmp = args.split('](');
+  let tmp = args.split('](')
   if (tmp.length > 1) {
-    tmp = tmp[1];
+    tmp = tmp[1]
     if (tmp.length > 1) {
-      tmp = tmp.substring(0, tmp.length-1);
+      tmp = tmp.substring(0, tmp.length-1)
     }
+  } else {
+    return ''
   }
-  return tmp;
-});
+  return tmp
+})

package/scripts/helpers/scrollreveal.js

@@ -1,9 +1,9 @@
 'use strict';
 
-hexo.extend.helper.register('scrollreveal', function(args){
-  const cfg = hexo.theme.config;
-  if (cfg.plugins.scrollreveal && cfg.plugins.scrollreveal.enable) {
-    return ' reveal';
+hexo.extend.helper.register('scrollreveal', function(args) {
+  if (hexo.theme.config.plugins.scrollreveal?.enable) {
+    return `${args ? args : ''}slide-up`
+  } else {
+    return ''
   }
-  return '';
-});
+})

package/scripts/tags/lib/audio.js

@@ -9,14 +9,19 @@
 'use strict';
 
 module.exports = ctx => function(args) {
-  args = ctx.args.map(args, ['type'], ['src'])
-  if (args.type == null) {
-    args.type = 'audio/mp3'
+  args = ctx.args.map(args, ['type', 'netease', 'autoplay'], ['src'])
+  if (args.netease) {
+    return `
+    <div class="tag-plugin audio">
+    <iframe src="//music.163.com/outchain/player?type=${args.type || '2'}&id=${args.netease}&auto=${args.autoplay == 'true' ? '1' : '0'}&height=32" frameborder="no" border="0" marginwidth="0" marginheight="0" width=288px height=52>
+    </iframe>
+    </div>
+    `
   }
   return `
   <div class="tag-plugin audio">
   <audio controls preload>
-  <source src="${args.src}" type="${args.type}">Your browser does not support the audio tag.
+  <source src="${args.src}" type="${args.type || 'audio/mp3'}">Your browser does not support the audio tag.
   </audio>
   </div>
   `

package/scripts/tags/lib/navbar.js

@@ -25,7 +25,7 @@ module.exports = ctx => function(args) {
       let text = matches[1]
       let href = matches[2]
       if (href == args.active) {
-        el += `<a class="link blur active" href="${href}">${text}</a>`
+        el += `<a class="link active" href="${href}">${text}</a>`
       } else {
         el += `<a class="link" href="${href}">${text}</a>`
       }

package/scripts/tags/lib/toc.js

@@ -14,7 +14,7 @@ function layoutDocTree(ctx, pages) {
   pages.forEach((p, i) => {
     el += '<li>'
     el += '<a class="list-link" href="' + url_for(p.path) + '">'
-    el += '<span>' + (p.title || p.seo_title) + '</span>'
+    el += '<span>' + p.title + '</span>'
     el += '</a>'
     el += '</li>'
   })

package/scripts/tags/lib/video.js

@@ -9,22 +9,22 @@
 'use strict';
 
 module.exports = ctx => function(args) {
-  args = ctx.args.map(args, ['type', 'bilibili', 'ratio'], ['src'])
+  args = ctx.args.map(args, ['type', 'bilibili', 'ratio', 'width', 'autoplay'], ['src'])
+  if (args.width == null) {
+    args.width = '100%'
+  }
   if (args.bilibili) {
     return `
-    <div class="tag-plugin video" style="aspect-ratio:${args.ratio || 16/9}">
-    <iframe src="https://player.bilibili.com/player.html?bvid=${args.bilibili}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
+    <div class="tag-plugin video" style="aspect-ratio:${args.ratio || 16/9};max-width:${args.width};">
+    <iframe src="https://player.bilibili.com/player.html?bvid=${args.bilibili}&autoplay=${args.autoplay || 'false'}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
     </iframe>
     </div>
     `
   }
-  if (args.type == null) {
-    args.type = 'video/mp4'
-  }
   return `
-  <div class="tag-plugin video">
+  <div class="tag-plugin video" style="max-width:${args.width};">
   <video controls preload>
-  <source src="${args.src}" type="${args.type}">Your browser does not support the video tag.
+  <source src="${args.src}" type="${args.type || 'video/mp4'}">Your browser does not support the video tag.
   </video>
   </div>
   `

package/source/css/_common/blur.styl

@@ -1,15 +1,8 @@
 :root
   --blur-px: 12px
-  --blur-bg: alpha(white, .5)
-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-bg: var(--alpha50)
 
-.blur
+blur-effect()
   background: var(--blur-bg)
   @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
     background: var(--blur-bg) !important
@@ -17,3 +10,6 @@ if hexo-config('style.darkmode') == 'always'
     -webkit-backdrop-filter: saturate(200%) blur(var(--blur-px))
   &:hover
     background: var(--card)
+
+.blur
+  blur-effect()

package/source/css/_common/cap.styl

@@ -2,7 +2,7 @@
   font-weight: 500
   font-size: $fs-12
   scrollbar-width: none
-  color: var(--text-p3)
+  color: var(--text-p2)
   &.blue
     color: darken($color-md-blue, 6)
   &.cyan

package/source/css/_common/device.styl

@@ -30,9 +30,9 @@
   cursor: pointer
   color: var(--text-p0)
   background: none
-  padding: 0.5rem
+  padding: 8px
   line-height: 0
-  font-size: 20px
+  font-size: 24px
   margin: 0
 
 

package/source/css/_common/highlight.styl

@@ -34,8 +34,8 @@ p>code:not([class]),li>code:not([class])
     span
       padding: 4px 0.5rem
       display: block
-      border-bottom-left-radius: $border-bar
-      border-bottom-right-radius: $border-bar
+      border-bottom-left-radius: $border-button
+      border-bottom-right-radius: $border-button
       background: var(--block-hover)
   >table
     overflow: auto
@@ -75,6 +75,7 @@ p>code:not([class]),li>code:not([class])
     padding-left: 0.25em
 
 .md-text .gist 
+  --fgColor-default: var(--text-p1)
   .gist-file 
     border: 1px solid var(--block-border)
     border-radius: $border-block

package/source/css/_common/layout.styl

@@ -0,0 +1,6 @@
+.flex
+  display: flex
+  align-items: center
+
+.flex.column
+  flex-direction: column

package/source/css/_common/svg.styl

@@ -4,3 +4,6 @@ svg.icon
   vertical-align: middle
   fill: currentColor
   overflow: hidden
+
+svg.active-icon
+  color: $c-green

package/source/css/_custom.styl

@@ -50,7 +50,7 @@ $fs-h3   = 1.375rem  // 22px
 $fs-h4   = 1.125rem  // 18px
 $fs-h5   = $fs-15
 $fs-h6   = $fs-12
-$fs-p    = convert(hexo-config('style.font-size.body'))
+$fs-body = convert(hexo-config('style.font-size.body'))
 $fs-code = convert(hexo-config('style.font-size.code'))
 $fs-codeblock = convert(hexo-config('style.font-size.codeblock'))
 
@@ -65,6 +65,7 @@ $border-button = 4px
 :root
   --width-left: 288px
   --width-main: 720px
+  --fs-p: $fs-body
   --gap-l: 16px
   --gap-p: 1rem // gap for paragraph
   --gap-p-compact: 0.75rem
@@ -84,7 +85,13 @@ $border-button = 4px
   @media screen and (max-width: $device-mobile-max)
     --width-left: 288px
 
-
+// 文章布局风格
+.l_body.story
+  --fs-p: 'calc(%s + 2px)' % $fs-body
+  --gap-p: 1.5rem
+  .tag-plugin,p>img
+    margin-top: 2.4rem
+    margin-bottom: 2.4rem
 
 // shadow
 $boxshadow-card = 0 1px 2px 0px rgba(0, 0, 0, 0.1)

package/source/css/_defines/theme.styl

@@ -35,6 +35,11 @@ set_text_light()
 :root
   --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
   --card: hsl($color-block-h, $color-block-s, 100)
+  --alpha20: rgba(white, 0.2)
+  --alpha50: rgba(white, 0.5)
+  --alpha60: rgba(white, 0.6)
+  --alpha100: white
+  --sidebar-bg: rgba(white, 0.5)
   --block: hsl($color-block-h, $color-block-s, 95)
   --block-border: hsl($color-block-h, $color-block-s, 90)
   --block-hover: hsl($color-block-h, $color-block-s, 92)
@@ -48,6 +53,11 @@ set_darkmode()
     --block: hsl($color-block-h, $color-block-s, 16)
     --block-border: hsl($color-block-h, $color-block-s, 24)
     --block-hover: hsl($color-block-h, $color-block-s, 20)
+    --alpha20: rgba(black, 0.2)
+    --alpha50: rgba(black, 0.5)
+    --alpha60: rgba(black, 0.6)
+    --alpha100: black
+    --sidebar-bg: rgba(black, 0.64)
     set_text_light()
     @media screen and (max-width: $device-mobile-max)
       --site-bg: black

package/source/css/_layout/layout.styl

@@ -10,7 +10,7 @@
   flex-shrink: 0
   position: sticky
   position: -webkit-sticky
-  top: 0
+  top: 8px
 
 .l_body .l_main
   flex-shrink: 1
@@ -20,6 +20,17 @@
 
 
 // 手机布局
+.main-mask
+  position: fixed
+  pointer-events: none
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  background: rgba(black, 0.5)
+  z-index: 9
+  opacity 0
+  trans1 opacity
 @media screen and (max-width: $device-mobile-max)
   .mobile-only
     display: block !important
@@ -29,10 +40,9 @@
       position: fixed
       transform: translateX(-320px)
       margin: 0
-      left: 0
-      background: var(--site-bg)
+      left: 8px
       box-shadow: $boxshadow-card-float
-      z-index: 9
+      z-index: 10
     .l_main
       max-width: 100%
   .l_body.mobile
@@ -41,3 +51,6 @@
   .l_body.mobile.sidebar
     .l_left
       transform: translateX(0px)
+    .main-mask
+      opacity 1
+      pointer-events: inherit

package/source/css/_layout/list.styl

@@ -1,10 +1,10 @@
 // list
-.post-list
+.l_main .post-list
   margin: 1rem
   .post-title:first-child
     margin-top: .5rem
 
-.post-list
+.l_main .post-list
   .post-title
     font-weight: 500
     margin: 1.25rem 0 .75rem 0
@@ -52,6 +52,9 @@
       img
         object-fit: contain
         height: 1.5em
+      svg
+        height: 1.5rem
+        color: $c-red
 
 .post-list .post-card:hover
   img 

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: 8px
   @media screen and (max-width: $device-mobile-max)
     padding-top: 1rem
   header
@@ -13,6 +13,7 @@
     .logo-wrap
       margin: 0
 
-.l_main.list
-  @media screen and (max-width: $device-mobile-max)
-    padding-top: 0
+.l_body.index
+  .l_main
+    @media screen and (max-width: $device-mobile-max)
+      padding-top: 0

package/source/css/_layout/md.styl

@@ -22,16 +22,6 @@ h1.article-title
   position: relative
   padding-bottom: 2rem
   overflow: hidden
-  &.indent
-    >p:not([class])
-      text-indent: 'calc(%s * 2)' % $fs-p
-      text-align: convert(hexo-config('style.text-align'))
-      a
-        text-indent: 0
-    h1,h2,h3,h4,h5,h6
-      text-align: center
-    >h2:not([class])
-      border-bottom: none
   >:first-child:not(h1)
     margin-top: 0
   h1:not(:first-child)
@@ -53,6 +43,17 @@ h1.article-title
       margin-bottom: 0.25em
       padding-top: 0
 
+.l_body[text-indent] .md-text.content
+  >p:not([class])
+    text-indent: 'calc(%s * 2)' % var(--fs-p)
+    text-align: convert(hexo-config('style.text-align'))
+    a
+      text-indent: 0
+  h1,h2,h3,h4,h5,h6
+    text-align: center
+  >h2:not([class])
+    border-bottom: none
+
 .md-text.content:first-child
   padding-top: 0
 
@@ -109,7 +110,7 @@ h1.article-title
     margin-top: -0.5rem
 
 .md-text p
-  font-size: $fs-p
+  font-size: var(--fs-p)
 
 .md-text pre
   -webkit-font-smoothing: auto

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.9/arrow/064b95430caf4.svg')
+      background-image: url(hexo-config('style.paginator.next'))
     &.prev
       border-right: 1px dashed var(--block-border)
-      background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/arrow/f049bbd4e88ec.svg')
+      background-image: url(hexo-config('style.paginator.prev'))
   .current
     font-family: $ff-code
     background: var(--block)

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

@@ -45,6 +45,9 @@ article.md-text.content+.related-wrap
       -webkit-box-orient: vertical
       overflow: hidden
       -webkit-line-clamp: 2
+    &.active
+      .title
+        border-bottom: 1px dashed $color-theme
     &:hover
       .title
         color: $color-hover

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

@@ -1,47 +1,20 @@
-.l_left>.footer
+.l_left footer.footer
   margin: 0.5rem var(--gap-l) 1rem
 
 .social-wrap
   display: grid
   grid-gap: 0.25rem 0.25rem
   grid-template-columns: repeat(auto-fill, 32px)
-  a.social
+  .social
     line-height: 0
     display: inline-block
     padding: 6px
-    border-radius: 4px
+    border-radius: 32px
     filter: grayscale(100%)
     overflow: hidden
     background: transparent
     trans3: box-shadow background transform
     &:hover
-      color: $color-hover
       z-index: 1
       filter: unset
-      transform: translateY(-1px)
-      background: linear-gradient(145deg, #ddd, #fff)
-      box-shadow: 2px 4px 8px #ddd, -2px -4px 8px #fff
-      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
-  grid-gap: 0.25rem 0.25rem
-  a.item
-    border-radius: 4px
-    font-size: $fs-13
-    font-weight: 500
-    color: var(--text-p2)
-    background: var(--block)
-    border: 1px solid var(--block-border)
-    overflow: hidden
-    padding: .75em
-    text-align: center
-    svg
-      margin-right: .5em
-    &:hover
-      color: $color-hover
-      background: var(--card)
+      background: var(--alpha100)

package/source/css/_layout/sidebar/{header.styl → logo.styl}

@@ -1,44 +1,15 @@
-.l_left 
-  nav.menu
-    margin-bottom: 0
-
-nav.menu
-  margin: 1rem 0
-  background: var(--block)
-  border: 1px solid var(--block-border)
-  border-radius: 6px
-  display: flex
-  flex-wrap: wrap
-  &::-webkit-scrollbar
-    display: none
-  &::-webkit-scrollbar-track-piece
-    background: transparent
-  &::-webkit-scrollbar-thumb
-    display: none
-  a.nav-item
-    text-overflow: ellipsis
-    word-break: keep-all
-    margin: 1px
-    border-radius: 4px
-    font-size: $fs-14
-    font-weight: 500
-    overflow: hidden
-    padding: 0.375rem 0.5rem
-    color: var(--text-p3)
-    text-align: center
-    &.active, &:hover
-      color: var(--text-p1)
-      background: var(--card)
-      box-shadow: $boxshadow-button
-
-.l_left .menu a.nav-item
-  flex-grow: 1
-
-
 .logo-wrap
   display: flex
   align-items: center
   overflow: hidden
+  min-height: 48px
+  img
+    object-fit: cover
+  .icon
+    width: 48px
+    height: 48px
+    margin-right: 1rem
+    border-radius: 4px
   a
     color: inherit
     display: flex
@@ -46,10 +17,10 @@ nav.menu
   a.avatar
     display: block
     position: relative
-    width: 50px
-    height: 50px
+    width: 48px
+    height: 48px
     flex-shrink: 0
-    border-radius: 50px
+    border-radius: 48px
     overflow: hidden
     margin-right: 1rem
     div.bg
@@ -58,7 +29,6 @@ nav.menu
       background-size: cover
     img.avatar
       margin: 2px
-      object-fit: cover
       width: "calc(100% - 2 * %s)" % @margin
       height: "calc(100% - 2 * %s)" % @margin
       border-radius: @width

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

@@ -0,0 +1,53 @@
+.nav-area .menu
+  width: 100%
+  display: grid
+  margin: 8px 0
+  grid-template-columns: repeat(hexo-config('menubar.columns'), 1fr)
+  grid-gap: 8px
+  &::-webkit-scrollbar
+    display: none
+  &::-webkit-scrollbar-track-piece
+    background: transparent
+  &::-webkit-scrollbar-thumb
+    display: none
+  
+  .nav-item
+    box-sizing: border-box
+    width: 100%
+    min-height: 40px
+    border-radius: $border-bar
+    font-size: $fs-15
+    font-weight: 500
+    color: var(--text-p3)
+    text-align: center
+    background: var(--alpha50)
+    trans1 background
+    position: relative
+    display: flex
+    flex-direction: column
+    align-items: center
+    justify-content: center
+    img,svg
+      height: 28px
+      object-fit: contain
+      filter: grayscale(100%) brightness(0.8) opacity(0.8)
+      trans1 all
+    span
+      text-overflow: ellipsis
+      word-break: keep-all
+    &.active, &:hover
+      color: var(--text-p1)
+      background: var(--alpha100)
+      img,svg
+        filter: unset
+    &.active:after
+      content: ''
+      position absolute
+      width: 16px
+      height: 2px
+      left: 50%
+      transform: translateX(-50%)
+      border-radius: 2px
+      bottom: 2px
+      background: var(--text-p1)
+

package/source/css/_layout/sidebar/nav-area.styl

@@ -0,0 +1,2 @@
+.nav-area
+  margin: 32px var(--gap-l) 0