hexo-theme-stellar 1.32.0 → 1.32.2

package/scripts/tags/lib/albums.js

@@ -23,15 +23,16 @@ module.exports = ctx => function(args) {
   var el = ''
   el += `<div class="tag-plugin albums-wrap">`
   if (api) {
-    el += `<div class="ds-friends" api="${api}"><div class="tag-plugin gallery grid-box" layout="grid" ratio="square" ${ctx.args.joinTags(args, ['size']).join(' ')}></div></div>`
+    el += `<div class="data-service ds-friends" api="${api}"><div class="tag-plugin gallery grid-box" layout="grid" ratio="square" ${ctx.args.joinTags(args, ['size']).join(' ')}></div></div>`
   } else if (args.group) {
     const links = ctx.theme.config.links || {}
     el += `<div class="tag-plugin gallery grid-box" layout="grid" ratio="square" ${ctx.args.joinTags(args, ['size']).join(' ')}>`
     for (let item of (links[args.group] || [])) {
       if (item?.url) {
         el += `<div class="grid-cell album-card">`
-        el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
-        el += `<img src="${item.cover || item.icon || item.avatar || ctx.theme.config.default.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        el += `<a class="card-link lazy-box" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
+        el += `<img class="lazy" data-src="${item.cover || item.icon || item.avatar || ctx.theme.config.default.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        el += `<div class="lazy-icon" style="background-image:url(${ctx.theme.config.default.loading});"></div>`
         el += `<div class="image-meta">`
         if (item.title) {
           el += `<span class="image-caption">${item.title}</span>`

package/scripts/tags/lib/banner.js

@@ -14,7 +14,7 @@ module.exports = ctx => function(args, content) {
   var el = ''
   el += `<div class="tag-plugin banner">`
   // bg
-  el += `<img class="bg" src="${args.bg ? args.bg : ctx.theme.config.default.banner}">`
+  el += `<img class="lazy bg" data-src="${args.bg ? args.bg : ctx.theme.config.default.banner}">`
   // content
   el += `<div class="content">`
   // content.top

package/scripts/tags/lib/{quote.js → blockquote.js}

@@ -1,11 +1,11 @@
 /**
- * quote.js v1.1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * blockquote.js v1.1 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * quote:
- * {% quote [indent:true/false] %}
+ * blockquote:
+ * {% blockquote [indent:true/false] %}
  * body
- * {% endquote %}
+ * {% endblockquote %}
  *
  */
 
@@ -15,7 +15,7 @@ module.exports = ctx => function(args, content) {
   var el = ''
   args = ctx.args.map(args, ['indent'], [])
   
-  el += `<div class="tag-plugin quote" indent="${args.indent}">`
+  el += `<div class="tag-plugin blockquote" indent="${args.indent}">`
   el += ctx.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')
   el += `</div>`
   return el

package/scripts/tags/lib/chat.js

@@ -110,11 +110,7 @@ module.exports = ctx => function(args, content) {
 
   function loadIcon(url) {
     var el = ''
-    if (ctx.theme.config.plugins.lazyload && ctx.theme.config.plugins.lazyload.enable) {
-      el += '<div class="lazy img" data-bg="' + ctx.theme.config.default.link + '"></div>'
-    } else {
-      el += '<div class="img" style="background-image:url(&quot;' + ctx.theme.config.default.link + '&quot;)"></div>'
-    }
+    el += '<div class="lazy img" data-bg="' + ctx.theme.config.default.link + '"></div>'
     return el
   }
 

package/scripts/tags/lib/friends.js

@@ -19,7 +19,7 @@ module.exports = ctx => function(args) {
   
   var el = `<div class="tag-plugin ${args.posts ? 'users-posts-wrap' : 'users-wrap'}">`
   if (api) {
-    el += `<div class="ds-friends${args.posts ? '_and_posts' : ''}" ${ctx.args.joinTags(args, ['size']).join(' ')} api="${api}"><div class="grid-box"></div></div>`
+    el += `<div class="data-service ds-friends${args.posts ? '_and_posts' : ''}" ${ctx.args.joinTags(args, ['size']).join(' ')} api="${api}"><div class="grid-box"></div></div>`
   } else if (args.group) {
     const links = ctx.theme.config.links || {}
     el += '<div class="grid-box">'

package/scripts/tags/lib/gallery.js

@@ -17,13 +17,14 @@
 
 var index = 0
 
-function img(src, alt) {
+function img(src, alt, loading) {
   let img = ''
-  img += `<img data-fancybox="gallery-${index}" src="${src}"`
+  img += `<img class="lazy" data-fancybox="gallery-${index}" data-src="${src}"`
   if (alt?.length > 0) {
     img += ` alt="${alt}"`
   }
   img += `/>`
+  img += `<div class="lazy-icon" style="background-image:url(${loading});"></div>`
   // cap
   img += `<div class="image-meta">`
   if (alt?.length > 0) {
@@ -54,7 +55,7 @@ module.exports = ctx => function(args, content) {
     if (matches?.length > 2) {
       let alt = matches[1]
       let src = matches[2]
-      el += `<div class="${layoutType}-cell">${img(src, alt)}</div>`
+      el += `<div class="${layoutType}-cell lazy-box">${img(src, alt, ctx.theme.config.default.loading)}</div>`
     }
   }
   el += `</div>`

package/scripts/tags/lib/image.js

@@ -38,11 +38,11 @@ module.exports = ctx => function(args) {
   }
 
   function img(src, alt, style) {
-    let img = ''
-    img += `<img src="${src}" data-src="${src}"`
     let a = '<a data-fancybox'
+    let img = ''
+    img += `<img class="lazy" src="${src}" data-src="${src}"`
     if (alt) {
-      img += ' alt="' + alt + '"'
+      img += ` alt="${alt}"`
       a += ` data-caption="${alt}"`
     }
     if (fancybox && !fancyboxHref) {
@@ -53,12 +53,12 @@ module.exports = ctx => function(args) {
     }
     img += `onerror="this.src=&quot;${ctx.theme.config.default.image_onerror}&quot;"`
     img += '/>'
-
+    // loading
+    img += `<div class="lazy-icon" style="background-image:url(${ctx.theme.config.default.loading});"></div>`
     if (fancyboxHref) {
       a += ` href="${fancyboxHref}">${img}</a>`
       return a
     }
-
     return img
   }
 

package/scripts/tags/lib/link.js

@@ -45,11 +45,7 @@ module.exports = ctx => function(args) {
 
   function loadIcon() {
     var el = ''
-    if (ctx.theme.config.plugins.lazyload && ctx.theme.config.plugins.lazyload.enable) {
-      el += '<div class="lazy img" data-bg="' + (args.icon || ctx.theme.config.default.link) + '"></div>'
-    } else {
-      el += '<div class="lazy img" style="background-image:url(&quot;' + (args.icon || ctx.theme.config.default.link) + '&quot;)"></div>'
-    }
+    el += '<div class="lazy img" data-bg="' + (args.icon || ctx.theme.config.default.link) + '"></div>'
     return el
   }
   function loadTitle() {

package/scripts/tags/lib/md.js

@@ -15,6 +15,6 @@ module.exports = ctx => function(args) {
   args = ctx.args.map(args, [''], ['src'])
   const md_id = "md_" + ++md_index
   return `
-  <div class="ds-mdrender" src="${args.src}" id="${md_id}"></div>
+  <div class="data-service ds-mdrender" src="${args.src}" id="${md_id}"></div>
   `
 }

package/scripts/tags/lib/navbar.js

@@ -18,7 +18,7 @@ module.exports = ctx => function(args) {
   if (args.links) {
     args.links = args.links.split(' ')
   }
-  var el = `<div class="tag-plugin navbar"><nav>`
+  var el = `<div class="tag-plugin navbar">`
   for (let link of args.links) {
     const matches = link.match(/\[(.*?)\]\((.*?)\)/i)
     if (matches?.length > 2) {
@@ -33,6 +33,6 @@ module.exports = ctx => function(args) {
       el += `<a class="link" href="#${link}">${link}</a>`
     }
   }
-  el += `</nav></div>`
+  el += `</div>`
   return el
 }

package/scripts/tags/lib/posters.js

@@ -23,15 +23,16 @@ module.exports = ctx => function(args) {
   var el = ''
   el += `<div class="tag-plugin posters-wrap">`
   if (api) {
-    el += `<div class="ds-friends" api="${api}"><div class="tag-plugin gallery grid-box" layout="grid" ratio="square" ${ctx.args.joinTags(args, ['size']).join(' ')}></div></div>`
+    el += `<div class="data-service ds-friends" api="${api}"><div class="tag-plugin gallery grid-box" layout="grid" ratio="square" ${ctx.args.joinTags(args, ['size']).join(' ')}></div></div>`
   } else if (args.group) {
     const links = ctx.theme.config.links || {}
     el += `<div class="tag-plugin gallery grid-box" layout="grid" ratio="portrait" ${ctx.args.joinTags(args, ['size']).join(' ')}>`
     for (let item of (links[args.group] || [])) {
       if (item?.url) {
         el += `<div class="grid-cell poster-card">`
-        el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
-        el += `<img src="${item.cover || item.icon || item.avatar || ctx.theme.config.default.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        el += `<a class="card-link lazy-box" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
+        el += `<img class="lazy" data-src="${item.cover || item.icon || item.avatar || ctx.theme.config.default.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        el += `<div class="lazy-icon" style="background-image:url(${ctx.theme.config.default.loading});"></div>`
         el += `<div class="image-meta">`
         if (item.title) {
           el += `<span class="image-caption">${item.title}</span>`

package/scripts/tags/lib/sites.js

@@ -19,7 +19,7 @@ module.exports = ctx => function(args) {
   
   var el = '<div class="tag-plugin sites-wrap">'
   if (api) {
-    el += '<div class="ds-sites"'
+    el += '<div class="data-service ds-sites"'
     el += ' api="' + api + '"'
     el += '>'
     el += '<div class="grid-box"></div>'
@@ -31,9 +31,15 @@ module.exports = ctx => function(args) {
       if (item?.url && item?.title) {
         el += `<div class="grid-cell site-card">`
         el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
+        el += `<div class="lazy-box snapshot">`
         el += `<img src="${item.cover || item.snapshot || item.screenshot || ('https://image.thum.io/get/width/1280/crop/720/' + item.url)}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        el += `<div class="lazy-icon" style="background-image:url(&quot;${ctx.theme.config.default.loading}&quot;);"></div>`
+        el += `</div>`
         el += `<div class="info">`
+        el += `<div class="lazy-box icon">`
         el += `<img src="${item.icon || item.avatar || ctx.theme.config.default.link}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${item.icon || item.avatar || ctx.theme.config.default.link}&quot;;"/>`
+        el += `<div class="lazy-icon" style="background-image:url(&quot;${ctx.theme.config.default.loading}&quot;);"></div>`
+        el += `</div>`
         el += `<span class="title">${item.title}</span>`
         el += `<span class="desc">${item.description || item.url}</span>`
         el += `</div>`

package/scripts/tags/lib/timeline.js

@@ -41,7 +41,7 @@ module.exports = ctx => function(args, content = '') {
     args.type = 'timeline'
   }
   if (args.api && args.api.length > 0) {
-    el += `<div class="tag-plugin timeline ds-${args.type}"`
+    el += `<div class="tag-plugin timeline data-service ds-${args.type}"`
     el += ' ' + ctx.args.joinTags(args, ['api', 'user', 'limit', 'hide', 'avatar']).join(' ')
     el += '>'
   } else {

package/source/css/_common/base.styl

@@ -8,9 +8,9 @@ pre
 
 a
   text-decoration: none
-  color: var(--theme-link)
+  color: var(--link)
   &:hover
-    color: $color-hover
+    color: var(--accent)
 
 .md-text p:not([class]) 
   text-align: convert(hexo-config('style.text-align'))
@@ -35,24 +35,32 @@ ul,ol
 table:not([class])
   border-collapse: collapse
   overflow: auto
-  display: block
   margin: 1rem 0
   max-width: 100%
   vertical-align: text-top
   --fsp: $fsp2
   font-size: var(--fsp)
+  scrollbar(0,0)
+  display: table
   th
     background: var(--block)
+    border-top: 1px solid var(--block-border)
+    border-bottom: 1px solid var(--block-border)
   td,th
-    padding: 0.5em 1em
-    border: 1px solid var(--block-border)
+    padding: 4px 1em
     line-height: 1.5
   tr
-    word-break: keep-all
-    white-space:nowrap
+    border-bottom: 1px dashed var(--block-border)
     trans()
     &:hover
       background: var(--block)
 
-*[ff=title]
-  font-family: $ff-logo
+  @media screen and (min-width: $device-mobile-max)
+    width 100%
+
+  @media screen and (max-width: $device-mobile-max)
+    display: block
+    tr
+      word-break: keep-all
+      white-space:nowrap
+

package/source/css/_common/blockquote.styl

@@ -18,4 +18,4 @@ blockquote
     opacity: 0.5
     background: var(--text-meta)
   &:hover:before
-    background: $color-theme
+    background: var(--theme)

package/source/css/_common/blur.styl

@@ -1,15 +1,15 @@
 :root
   --blur-px: 12px
-  --blur-bg: var(--alpha50)
-
+  --blur-bg: var(--bg-a50)
+  --blur-sat: 300%
 blur-effect()
-  background: var(--blur-bg)
+  background-color: var(--blur-bg)
   @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
-    background: var(--blur-bg) !important
-    backdrop-filter: saturate(300%) blur(var(--blur-px))
-    -webkit-backdrop-filter: saturate(300%) blur(var(--blur-px))
+    background-color: var(--blur-bg) !important
+    backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+    -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
   &:hover
-    background: var(--card)
+    background-color: var(--card)
 
 .blur
   blur-effect()

package/source/css/_common/button.styl

@@ -13,10 +13,10 @@ a.button
   font-size: $fs-15
   user-select: none
   &.theme
-    background: $color-theme
+    background: var(--theme)
     color: var(--card)
     &:hover
-      background: $color-hover
+      background: var(--accent)
   &.start
     border-radius: 100px
     background: var(--text-p1)

package/source/css/_common/canonical.styl

@@ -5,7 +5,7 @@
   left: 50%
   transform: translateX(-50%)
   max-width: 90%
-  background-color: var(--block-border)
+  background-color: var(--card)
   color: var(--text-p1)
   font-size: 1rem
   font-family: #fff8e1

package/source/css/_common/cap.styl

@@ -8,4 +8,4 @@
   &.cyan
     color: darken($color-mac-cyan, 6)
   &.theme
-    color: darken($color-theme, 5)
+    color: var(--theme)

package/source/css/_common/device.styl

@@ -50,12 +50,12 @@
 
 // 侧边栏弹出后
 .l_body[leftbar] .float-panel, .l_body[rightbar] .float-panel
-  box-shadow: 0 0 4px -1px $color-theme, 0 0 16px -4px $color-theme, 0 0 32px -12px $color-theme, 0 0 128px -32px $color-theme
+  box-shadow: 0 0 4px -1px var(--theme), 0 0 16px -4px var(--theme), 0 0 32px -12px var(--theme), 0 0 128px -32px var(--theme)
   &:before
-    background: var(--alpha50)
+    background: var(--bg-a50)
 
 .l_body[leftbar] .float-panel button.leftbar-toggle
-  color: $color-theme
+  color: var(--theme)
   svg g
     fill: currentColor
     fill-opacity: 0.3
@@ -68,7 +68,7 @@
   display: none !important
 
 .l_body[rightbar] .float-panel button.rightbar-toggle
-  color: $color-theme
+  color: var(--theme)
   svg g
     fill: currentColor
     fill-opacity: 0.3

package/source/css/_common/highlight.styl

@@ -11,6 +11,7 @@ p>code:not([class]),li>code:not([class])
   color: var(--text-code)
 
 .md-text .highlight, pre:not([class]):has(>code)
+  --theme: var(--text-p3)
   margin: var(--gap-p) 0
   border-radius: $border-card
   overflow: hidden
@@ -36,7 +37,7 @@ p>code:not([class]),li>code:not([class])
       display: block
       border-bottom-left-radius: $border-button
       border-bottom-right-radius: $border-button
-      background: var(--block-border)
+      background: var(--block)
   >table
     overflow: auto
     display: block
@@ -50,6 +51,7 @@ p>code:not([class]),li>code:not([class])
     scrollbar-codeblock(convert(hexo-config('style.codeblock.scrollbar')))
     tr
       background: transparent
+      border: none
       &:hover
         background: transparent
 
@@ -80,6 +82,7 @@ p>code:not([class]),li>code:not([class])
     border-radius: $border-card
     overflow: hidden
   .gist-data
+    --bgColor-default: var(--block)
     border-bottom: 1px solid var(--block-border)
   .highlight
     display: inherit
@@ -88,11 +91,13 @@ p>code:not([class]),li>code:not([class])
     background: var(--block)
     margin: 0
     padding: 1em 0
+    pre
+      background: none
   .blob-code-inner
     color: var(--text-p1)
     font-family: $ff-codeblock
   .gist-meta
-    background: var(--block-border)
+    background: var(--block)
 
 
 table:not([class])

package/source/css/_common/html.styl

@@ -9,7 +9,7 @@ html
   if hexo-config('style.smooth_scroll')
     scroll-behavior: smooth
 body
-  background: var(--site-bg)
+  background: var(--background)
   margin: 0
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale

package/source/css/_common/svg.styl

@@ -6,4 +6,4 @@ svg.icon
   overflow: hidden
 
 svg.active-icon
-  color: $color-theme
+  color: var(--theme)

package/source/css/_common/title.styl

@@ -40,4 +40,4 @@ h6
       color: inherit
       font-weight: 500
       &:hover
-        color: $color-hover
+        color: var(--accent)

package/source/css/_components/layout.styl

@@ -45,10 +45,10 @@
       max-height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $rightbar-bottom-margin)
       box-shadow: $boxshadow-card-float
       z-index: 10
-      background: var(--site-bg)
+      background: var(--background)
       overflow: auto
       scrollbar(0, 0)
-      --blur-bg: var(--alpha60)
+      --blur-bg: var(--bg-a60)
       --blur-px: 50px
   .l_body[rightbar]
     .l_right

package/source/css/_components/list.styl

@@ -187,8 +187,7 @@
     width: 96px
     max-height: 96px
     object-fit: contain
-    &:not(.lazy)
-      trans1: transform 0.75s
+    trans1: all 0.75s
 .post-list .post-card.wiki article .excerpt
   margin: 1rem .5rem
   @media screen and (min-width: 950px)

package/source/css/_components/main.styl

@@ -20,13 +20,17 @@ body>.sitebg
   right: 0
   bottom: 0
   background-size: cover
-  if hexo-config('style.site') && hexo-config('style.site.background-image')
-    background-image: convert(hexo-config('style.site.background-image'))
+  if $site-background
+    background-image: convert($site-background)
   .siteblur
     width: 100%
     height: 100%
+    --blur-px: 0
+    --blur-sat: 200%
     blur-effect()
-    if hexo-config('style.site') && hexo-config('style.site.blur-px')
+    if hexo-config('style.site.blur-sat') 
+      --blur-sat: convert(hexo-config('style.site.blur-sat'))
+    if hexo-config('style.site.blur-px')
       --blur-px: convert(hexo-config('style.site.blur-px'))
-    if hexo-config('style.site') && hexo-config('style.site.blur-bg')
+    if hexo-config('style.site.blur-bg')
       --blur-bg: convert(hexo-config('style.site.blur-bg'))

package/source/css/_components/md.styl

@@ -92,9 +92,9 @@ table a:not([class])
   background: linear-gradient(0deg,var(--block-border),var(--block-border)) no-repeat left 100%/100% 2px
   &:hover
     text-decoration: none
-    color: var(--theme-link)
+    color: var(--link)
     border-radius: 4px
-    background: linear-gradient(0deg,var(--theme-link-opa),var(--theme-link-opa)) no-repeat left 100%/100% 100%
+    background: linear-gradient(0deg,var(--link-a20),var(--link-a20)) no-repeat left 100%/100% 100%
   &:has(img)
     background: none
     &:hover

package/source/css/_components/pages/archives.styl

@@ -18,7 +18,7 @@
       right: 0
       z-index: -1
       border-radius: 4px
-      background: $color-theme
+      background: var(--theme)
   a.post
     display: inline-flex
     align-items: baseline
@@ -33,10 +33,10 @@
       flex-shrink: 0
       color: var(--text-p4)
     &:hover
-      border-bottom: 1px solid $color-theme
+      border-bottom: 1px solid var(--theme)
       color: var(--text)
       time
-        color: $color-theme
+        color: var(--theme)
 
 
 
@@ -71,7 +71,7 @@
       color: var(--text)
       .badge
         opacity: 1
-        color: $color-theme
+        color: var(--theme)
 
 .post-list #tags
   display: flex
@@ -96,7 +96,7 @@
       opacity: .4
     &:hover
       &:before
-        color $color-theme
+        color var(--theme)
         opacity: 1
       color: var(--text)
       background: var(--block-border)