hexo-theme-stellar 1.29.1 → 1.30.1

package/scripts/tags/lib/folders.js

@@ -39,7 +39,7 @@ module.exports = ctx => function(args, content) {
     nodes.forEach((node, i) => {
       el += '<details class="folder" index="' + (i) + '">'
       // summary
-      el += '<summary><span>' + (node.header || '') + '</span></summary>'
+      el += '<summary>' + ctx.render.renderSync({text: (node.header || ''), engine: 'markdown'}) + '</summary>'
       // content
       el += '<div class="body">'
       el += ctx.render.renderSync({text: (node.body || ''), engine: 'markdown'}).split('\n').join('')

package/scripts/tags/lib/folding.js

@@ -20,10 +20,10 @@ module.exports = ctx => function(args, content) {
   }
   el += '>'
   // summary
-  el += '<summary><span>' + (args.title || '') + '</span></summary>'
+  el += '<summary>' + ctx.render.renderSync({text: (args.title || ''), engine: 'markdown'}) + '</summary>'
   // content
   el += '<div class="body">'
-  el += ctx.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')
+  el += ctx.render.renderSync({text: content, engine: 'markdown'}).split('\n').join(' ')
   el += '</div></details>'
 
   return el

package/scripts/tags/lib/friends.js

@@ -2,13 +2,13 @@
  * friends.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% friends [group] [repo:owner/repo] [api:http] %}
+ * {% friends [group] [repo:owner/repo] [posts:true/false] [api:http] %}
  */
 
 'use strict'
 
 module.exports = ctx => function(args) {
-  args = ctx.args.map(args, ['repo', 'api'], ['group'])
+  args = ctx.args.map(args, ['repo', 'api', 'posts'], ['group'])
   var api
   if (args.api) {
     api = args.api
@@ -16,9 +16,9 @@ module.exports = ctx => function(args) {
     api = 'https://api.vlts.cc/output_data/v2/' + args.repo
   }
   
-  var el = '<div class="tag-plugin users-wrap">'
+  var el = `<div class="tag-plugin ${args.posts ? 'users-posts-wrap' : 'users-wrap'}">`
   if (api) {
-    el += `<div class="ds-friends" ${ctx.args.joinTags(args, ['size']).join(' ')} api="${api}"><div class="grid-box"></div></div>`
+    el += `<div class="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/sites.js

@@ -30,7 +30,7 @@ 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 += `<img src="${item.cover || item.screenshot || ('https://api.vlts.cc/screenshot?url=' + item.url + '&width=1280&height=720')}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        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="info">`
         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 += `<span class="title">${item.title}</span>`

package/scripts/tags/lib/video.js

@@ -21,8 +21,13 @@ module.exports = ctx => function (args) {
     `
   }
   if (args.youtube) {
-    return `<div class="tag-plugin video" style="aspect-ratio:${args.ratio || 16/9};max-width:${args.width};">
-    <iframe src="https://www.youtube.com/embed/${args.youtube}?rel=0&color=white&disablekb=1&playsinline=1&&rel=0&autoplay=${args.autoplay || '0'}" picture-in-picture="true" allowfullscreen="true" >
+    if(args.autoplay == 'true' || args.autoplay == '1') { 
+      args.autoplay = '1&mute=1'
+    } else {
+      args.autoplay = '0'
+    }
+    return `<div class="tag-plugin video" style="aspect-ratio:${args.ratio || 16 / 9};max-width:${args.width};">
+    <iframe style="border:none" src="https://www.youtube.com/embed/${args.youtube}?rel=0&disablekb=1&playsinline=1&autoplay=${args.autoplay}" picture-in-picture="true" allowfullscreen="true" >
     </iframe>
     </div>
     `

package/source/css/_components/list.styl

@@ -23,13 +23,23 @@
 .post-list .post-card
   display: block
   margin: 1rem 0
-  border-radius: $border-card
+  border-radius: $border-card-l
   background: var(--card)
   hoverable-card()
   overflow: hidden
   z-index: 0
-  
   position: relative
+  --img-br: 100%
+  --img-sat: 100%
+  --blur-px: 1em
+  --blur-sat: 120%
+  &:hover
+    --img-br: 75%
+    --img-sat: 120%
+    --blur-sat: 200%
+  img
+    filter: brightness(var(--img-br)) saturate(var(--img-sat))
+    trans1 all
   .excerpt
     margin: 1rem 0
     @media screen and (max-width: $device-mobile)
@@ -62,9 +72,6 @@
       svg
         color: $c-red
 
-.post-list.post .post-card:hover
-  img
-    filter: brightness(50%)
 
 // common article
 .post-list .md-text
@@ -100,7 +107,23 @@
     img
       width: 100%
       object-fit: cover
-      aspect-ratio: hexo-config('article.cover_ratio')
+      aspect-ratio: hexo-config('article.cover_ratio') 
+      z-index 0
+    &:before
+      content: ''
+      z-index 1
+      position: absolute
+      left: 0
+      right: 0
+      height: 128px
+      backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+      trans1 all
+    &[position=top]:before
+      top: 0
+      mask: linear-gradient(black, rgba(black, 0.75), transparent)
+    &[position=bottom]:before
+      bottom: 0
+      mask: linear-gradient(transparent, rgba(black, 0.75), black)
     .cover-info
       padding: 1.5rem 1rem
       position: absolute
@@ -108,6 +131,7 @@
       width: 'calc(100% - %s * 2)' % 1rem
       --text-banner: white
       color: var(--text-banner)
+      z-index: 2
       &[position=top]
         top: 0
         background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0))
@@ -116,20 +140,25 @@
         background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2))
       div+div
         margin-top: 4px
-      .cap
-        font-size: $fs-13
+      .text
         color: unset
-      .title
+        trans1 all
+        text-shadow: 0 2px 4px rgba(0,0,0,0.2)
+      .topic
+        font-size: $fs-13
+      .headline
         font-weight: 500
         font-size: $fsh3
+      .caption
+        font-size: $fs-14
       @media screen and (max-width: $device-mobile)
         padding: 1rem
         div+div
           margin-top: 2px
-        .title
+        .headline
           font-size: $fsh4
-        .cap
-          font-size: $fs-12
+        .caption
+          font-size: $fs-13
   h2
     margin: .25rem 0
     font-size: $fsh4

package/source/css/_components/partial/article-banner.styl

@@ -31,20 +31,34 @@
 // 动画配置
 .article.banner
   .bg+.content
-    trans1 all
     --blur-bg: rgba(black, 0)
     --blur-px: 0px
     --blur-sat: 100%
-    background: var(--blur-bg)
-    @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
-      background: var(--blur-bg)
-      backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
-      -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
-  &:hover
-    .bg+.content
+    &:hover
       --blur-bg: rgba(black, 0.1)
-      --blur-px: 20px
+      --blur-px: 1em
       --blur-sat: 150%
+    background: var(--blur-bg)
+    trans1 all
+    &:before,&:after
+      content: ''
+      position: absolute
+      z-index 0
+      left: 0
+      width: 100%
+      backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+      trans1 all
+    &:before
+      top: 0
+      height: 4rem
+      mask: linear-gradient(black, rgba(black, 0.75), transparent)
+    &:after
+      bottom: 0
+      height: 5rem
+      mask: linear-gradient(transparent, rgba(black, 0.75), black)
+    .top,.bottom
+      z-index 1
+  
 
 .article.banner
   --button-hover-bg: rgba(black, 0.05)