hexo-theme-stellar 1.28.0 → 1.29.0

package/scripts/tags/lib/image.js

@@ -2,7 +2,7 @@
  * image.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% image src [alt] [width:400px] [bg:#eee] [download:true/false/url] %}
+ * {% image src [alt] [width:400px] [bg:#eee] [download:true/false/url] [fancybox:true/false/url] %}
  */
 
 'use strict'
@@ -18,6 +18,7 @@ module.exports = ctx => function(args) {
   }
   // fancybox
   var fancybox = false
+  var fancyboxHref = null
   if (ctx.theme.config.plugins.fancybox && ctx.theme.config.plugins.fancybox.enable) {
     // 主题配置
     if (ctx.theme.config.tag_plugins.image && ctx.theme.config.tag_plugins.image.fancybox) {
@@ -27,8 +28,11 @@ module.exports = ctx => function(args) {
     if (args.fancybox && args.fancybox.length > 0) {
       if (args.fancybox == 'false') {
         fancybox = false
-      } else {
+      } else if (args.fancybox === 'true') {
         fancybox = args.fancybox
+      } else {
+        fancybox = true
+        fancyboxHref = args.fancybox
       }
     }
   }
@@ -36,16 +40,24 @@ module.exports = ctx => function(args) {
   function img(src, alt, style) {
     let img = ''
     img += '<img src="' + src + '"'
+    let a = '<a data-fancybox'
     if (alt) {
       img += ' alt="' + alt + '"'
+      a += ` data-caption="${alt}"`
     }
-    if (fancybox) {
+    if (fancybox && !fancyboxHref) {
       img += ` data-fancybox="${fancybox}"`
     }
     if (style.length > 0) {
       img += ' style="' + style + '"'
     }
     img += '/>'
+
+    if (fancyboxHref) {
+      a += ` href="${fancyboxHref}">${img}</a>`
+      return a
+    }
+
     return img
   }
 
@@ -87,4 +99,4 @@ module.exports = ctx => function(args) {
 
   el += '</div>'
   return el
-}
+}

package/scripts/tags/lib/quot.js

@@ -9,7 +9,7 @@
 
 'use strict'
 
-module.exports = ctx => function(args) {
+module.exports = ctx => function (args) {
   var el = ''
   args = ctx.args.map(args, ['el', 'icon', 'prefix', 'suffix'], ['text'])
   if (!args.el) {
@@ -43,7 +43,6 @@ module.exports = ctx => function(args) {
   if (args.el.includes('h')) {
     el += '<div' + ' class="tag-plugin quot">'
     el += '<' + args.el + ' class="content" id="' + args.text + '"' + type + '>'
-    el += '<a href="#' + args.text + '" class="headerlink" title="' + args.text + '"></a>'
     el += content()
     el += '</' + args.el + '>'
     el += '</div>'

package/scripts/tags/lib/read/paper.js

@@ -0,0 +1,90 @@
+/**
+ * paper.js v1.1 | https://github.com/HcGys/stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * paper:
+ * {% paper [style:underline|无] [title:标题] [author:作者] [date:日期] [footer:footer] %}
+ * 
+ * <!-- section section-title -->
+ * section-content
+ * 
+ * <!-- paragraph -->
+ * paragraph-content
+ * 
+ *  <!-- line [right|left] -->
+ * line-content
+ * 
+ * {% endpaper %}
+ *
+ */
+
+'use strict'
+
+module.exports = ctx => function(args, content) {
+  var el = ''
+  args = ctx.args.map(args, ['style','title', 'author', 'date', 'footer'])
+
+  el += '<div class="tag-plugin paper">'
+
+  el += '<div class="content' + (typeof args.style === 'undefined' ? '' : ' ' + args.style)  + '">'
+  el += '<div class="title">'  // 布局需要
+  if (args.title) el += args.title
+  el += '</div>'
+
+
+  el += '<div class="body">'
+
+  var arr = content.split(/<!--\s*(paragraph|section|line) (.*?)\s*-->/g).filter(item => item.trim().length > 0)
+  if (arr.length > 0) {
+    var nodeType = ''
+    var innerTitle = ''
+    arr.forEach((node, i) => {
+      if (node == 'paragraph' || node == 'section' || node == 'line') {
+        nodeType = node
+      } else if (nodeType == 'paragraph'){
+        el += '<div class="paragraph">'
+        el += ctx.render.renderSync({text: (node || ''), engine: 'markdown'}).split('\n').join('')
+        el += '</div>'
+      } else if (nodeType == 'line'){
+        if (innerTitle == '') {
+          innerTitle = node
+        } else {
+          el += '<div class="line'
+          el += innerTitle == 'right' ? ' right">' : '">'
+          el += ctx.render.renderSync({text: (node || ''), engine: 'markdown'}).split('\n').join('')
+          el += '</div>'
+          innerTitle = ''  // 防止被下一个section|line使用
+        }
+      } else if (nodeType == 'section') {
+        if (innerTitle == '') {
+          innerTitle = node
+        } else {
+          el += '<div class="section">'
+          el += '<div class="section-title">'
+          el += innerTitle + '</div>'
+          el += '<div class="section-content">'
+          el += ctx.render.renderSync({text: (node || ''), engine: 'markdown'}).split('\n').join('')
+          el += '</div></div>'
+          innerTitle = ''  // 防止被下一个section|line使用
+        }
+      }
+    })
+  }
+
+  el += '</div>'
+
+
+  el += '<div class="footer">'  // 布局需要
+  if (args.author || args.date) {
+    el += '<div class="author-date">'
+    if (args.author) el += '<span class="author">' + args.author + '</span>'
+    if (args.date) el += '<span class="date">' + args.date + '</span>'
+    el += '</div>'
+  }
+  if (args.footer) el += args.footer
+  el += '</div>'
+
+  el += '</div>'
+  el += '</div>'
+  return el
+}

package/scripts/tags/lib/read/reel.js

@@ -0,0 +1,43 @@
+/**
+ * reel.js v1.1 | https://github.com/HcGys/stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * reel:
+ * {% reel [title] [author:作者] [date:日期] [footer:footer] %}
+ * body
+ * {% endreel %}
+ *
+ */
+
+'use strict'
+
+module.exports = ctx => function(args, content) {
+  var el = ''
+  args = ctx.args.map(args, ['author', 'date', 'footer'], ['title'])
+
+  el += '<div class="tag-plugin reel"'
+  el += '>'
+  el += '<div class="content">'
+  el += '<div class="title">'
+  if (args.title) el += args.title   // 布局需要
+  el += '</div>'
+  if (args.author) {
+    el += '<div class="meta">'
+    if (args.author) {
+      el += '<span>' + args.author + '</span>'
+    }
+    el += '</div>'
+  }
+  el += '<div class="body"><div class="main">'
+  el += ctx.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')
+  el += '</div></div>'
+  if (args.date) {
+    el += '<div class="date">' + args.date + '</div>'
+  }
+  el += '<div class="footer">'
+  if(args.footer) el += args.footer  // 布局需要
+  el += '</div>'
+  el += '</div>'
+  el += '</div>'
+  return el
+}

package/scripts/tags/lib/video.js

@@ -8,21 +8,26 @@
 
 'use strict';
 
-module.exports = ctx => function(args) {
-  args = ctx.args.map(args, ['type', 'bilibili', 'ratio', 'width', 'autoplay'], ['src'])
+module.exports = ctx => function (args) {
+  args = ctx.args.map(args, ['type', 'bilibili', 'youtube', '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};max-width:${args.width};">
+    return `<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>
     `
   }
-  return `
-  <div class="tag-plugin video" style="max-width:${args.width};">
+  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" >
+    </iframe>
+    </div>
+    `
+  }
+  return `<div class="tag-plugin video" style="max-width:${args.width};">
   <video controls preload>
   <source src="${args.src}" type="${args.type || 'video/mp4'}">Your browser does not support the video tag.
   </video>

package/source/css/_common/button.styl

@@ -59,9 +59,9 @@ a.button.start.gradient
     &:hover:after
       filter: blur(36px)
       opacity 1
-  
-  if theme(dark)
+
+  :root[data-theme="dark"] &
     ondark()
-  else if theme(auto)
+  :root:not([data-theme]) &
     @media (prefers-color-scheme: dark)
       ondark()

package/source/css/_common/device.styl

@@ -27,9 +27,9 @@
   trans1: all
   ondark()
     --blur-bg: alpha(#000, .4)
-  if theme(dark)
+  :root[data-theme="dark"] &
     ondark()
-  else if theme(auto)
+  :root:not([data-theme]) &
     @media (prefers-color-scheme: dark)
       ondark()
 
@@ -52,7 +52,7 @@
 // 侧边栏弹出后
 .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
-  
+
 .l_body[leftbar] .float-panel button.leftbar-toggle
   background: var(--alpha100)
 

package/source/css/_common/highlight.styl

@@ -75,7 +75,6 @@ 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-card
@@ -86,9 +85,12 @@ p>code:not([class]),li>code:not([class])
     display: inherit
     border: none
     border-radius: 0
-    background: none
+    background: var(--block)
     margin: 0
     padding: 1em 0
+  .blob-code-inner
+    color: var(--text-p1)
+    font-family: $ff-codeblock
   .gist-meta
     background: var(--block-border)
 

package/source/css/{_layout → _components}/md.styl

@@ -30,7 +30,7 @@
     margin-left: 0.5em
   h1,h2,h3,h4,h5,h6
     text-align: center
-    a.headerlink
+    >a:first-child
       display: none
   h2
     margin: 2em 0 1.5em
@@ -71,29 +71,29 @@
   h1,h2,h3,h4,h5,h6
     color: var(--text)
     line-height: 1.8
+    >a:first-child
+      background: $color-theme
+      border-radius: 2px
+      margin-right: 8px
+      trans1 background
+      &:hover
+        background: $color-hover
+      &:before
+        content: ''
+        color: white
+        font-weight: 700
+        padding: 0 2px
+        font-size: $fs-12
+  h2
+    font-weight: 500
+    >a:first-child:before
+      content: ':'
+    
   blockquote, .tag-plugin
     h2,h3,h4,h5,h6
       margin-top: 0.25em
       margin-bottom: 0.25em
       
-  a.headerlink 
-    background: $color-theme
-    border-radius: 2px
-    margin-right: 8px
-    trans1 background
-  a.headerlink:hover
-    background: $color-hover
-  a.headerlink:before
-    content: ''
-    color: white
-    font-weight: 700
-    padding: 0 2px
-    font-size: $fs-12
-  h2
-    font-weight: 500
-    a.headerlink:before
-      content: ':'
-  
 .md-text.content:first-child .tag-plugin:first-child
   margin-top: 0
 
@@ -103,6 +103,8 @@
 .md-text pre
   -webkit-font-smoothing: auto
   -moz-osx-font-smoothing: auto
+  &.mermaid
+    overflow: auto
 
 .md-text
   .center

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

@@ -0,0 +1,65 @@
+.md-text .tag-list
+  display: flex
+  flex-wrap: wrap
+  padding: 0
+  margin-top: 2rem
+  a.tag
+    display: inline-flex
+    align-items: center
+    position: relative
+    color: var(--text-p2)
+    margin: 4px
+    padding: .5em .75rem
+    border-radius: 4px
+    background: var(--block)
+    font-size: $fs-13
+    font-weight: 500
+    &:before
+      content: "#"
+      margin-left: -2px
+      margin-right: 2px
+      opacity: .4
+    &:hover
+      &:before
+        color $color-theme
+        opacity: 1
+      color: var(--text)
+      background: var(--block-hover)
+
+.post-list .post-card .meta.cap .tag
+  &:before
+    content: "#"
+    margin-left: -2px
+    margin-right: 2px
+    opacity: .4
+
+.widget-body.tag-tree .tag-subtree > a > .tag-switcher-wrapper
+  width: 1.75rem
+  height: 0.875rem
+  display: flex
+  justify-content: end
+  align-items: center
+  &:hover
+    color: $color-theme
+
+.widget-body.tag-tree .tag-subtree.parent-tag > a .tag-switcher
+  display: inline-block
+  height: 0.5rem
+  width: 0.5rem
+  border-width: 1px
+  border-style: none solid solid none
+  transform: translateX(-25%) rotate(-45deg)
+
+.widget-body.tag-tree .tag-subtree.parent-tag.expanded > a .tag-switcher
+  transform: translateY(-25%) rotate(45deg)
+
+.widget-body.tag-tree .tag-subtree.parent-tag > .tag-subtree
+  display: none
+
+.widget-body.tag-tree .tag-subtree.parent-tag.expanded > .tag-subtree
+  display: block
+
+.widget-body.tag-tree .tag-subtree .tagcon
+  font-size: smaller
+  opacity: 0.4
+  margin-right: 0.25rem

package/source/css/{_layout → _components}/partial/article-banner.styl

@@ -13,7 +13,7 @@
 .article.banner .content
   .top
     align-items: flex-start
-    margin: 1rem 'calc(1rem - 4px)'
+    margin: 1rem calc(1rem - 4px)
   .title
     font-size: $fsh1
     color: var(--text-banner)
@@ -26,7 +26,7 @@
 
 .l_body[text-indent] .article.banner .content .bottom.only-title
   justify-content: center
-  
+
 
 // 动画配置
 .article.banner
@@ -50,8 +50,8 @@
   --button-hover-bg: rgba(black, 0.05)
   ondark()
     --button-hover-bg: rgba(white, 0.15)
-  if theme(dark)
+  :root[data-theme="dark"] &
     ondark()
-  else if theme(auto)
+  :root:not([data-theme]) &
     @media (prefers-color-scheme: dark)
       ondark()

package/source/css/{_layout → _components}/tag-plugins/common.styl

@@ -109,9 +109,9 @@ _dark_tags()
     set_text_black()
 
 
-if theme(dark)
+:root[data-theme="dark"]
   _dark_tags()
-else if theme(auto)
+:root:not([data-theme])
   @media (prefers-color-scheme: dark)
     _dark_tags()
 

package/source/css/_components/tag-plugins/index.styl

@@ -0,0 +1 @@
+@import 'read/*'

package/source/css/{_layout → _components}/tag-plugins/media.styl

@@ -1,6 +1,6 @@
 .tag-plugin.video
   line-height: 0
-  text-align: center
+  margin: auto
   video, iframe
     border-radius: $border-card
     box-shadow: $boxshadow-card-float

package/source/css/{_layout → _components}/tag-plugins/quot.styl

@@ -11,8 +11,6 @@
     border-bottom: none
     font-weight: 700
     padding: 0 24px
-    a.headerlink
-      display: none
     @media screen and (max-width: $device-mobile)
       padding: 0 20px
     line-height: 1.2

package/source/css/_components/tag-plugins/read/paper.styl

@@ -0,0 +1,98 @@
+.md-text .tag-plugin.paper
+  display: flex
+  flex-direction: column
+  align-items: center
+  padding-top: var(--gap-padding)
+  padding-bottom: var(--gap-padding)
+  >.content
+    border-left: 1px dashed var(--text-meta)
+    border-right: 1px dashed var(--text-meta)
+    border-bottom: 1px dashed var(--text-meta)
+    border-bottom-left-radius: $border-card
+    border-bottom-right-radius: $border-card
+    padding: 1rem
+    // max-width: calc(100% - 80px)
+    max-width: calc(95%)
+    >.title
+      font-weight: 500
+      text-align: center
+    >.meta
+      color: var(--text-p2)
+      font-size: $fs-12
+      font-weight: 500  
+    >.body
+      >.paragraph
+        text-indent: 2em
+      >.section
+        >.section-title
+          text-align: center
+        >.section-content
+          text-indent: 2em
+      >.line.right
+        >p
+          text-align: right
+      .tag-plugin
+        margin: 0
+    >.footer
+      color: var(--text-p4)
+      font-size: $fs-12
+      text-align: right
+      >.author-date
+        text-align: right
+        >span
+          color: var(--text-p2)
+          font-size: $fs-12
+          font-weight: 500
+        >.author
+          margin-right: calc(0.5*var(--gap-p))
+
+// 描边修饰
+.md-text .tag-plugin.paper>.content
+  position: relative
+  &:before
+    content: ''
+    position: absolute
+    height: 4px
+    left: -16px
+    top: -4px
+    right: -16px
+    border-radius: 4px
+    background: var(--block)
+  >.title
+    position: relative
+    &:before
+      content: ''
+      position: absolute
+      height: 4px
+      left: calc(-1rem - 6px)
+      top: calc(-1rem - 4px)
+      right: calc(100% + 1rem - 6px)
+      border-radius: 4px
+      background: $color-accent
+    &:after
+      content: ''
+      position: absolute
+      height: 4px
+      right: calc(-1rem - 6px)
+      top: calc(-1rem - 4px)
+      left: calc(100% + 1rem - 6px)
+      border-radius: 4px
+      background: $color-accent
+
+// 下划线修饰
+.md-text .tag-plugin.paper > .content.underline > .title,
+.md-text .tag-plugin.paper > .content.underline > .meta,
+.md-text .tag-plugin.paper > .content.underline > .author-date,
+.md-text .tag-plugin.paper > .content.underline > .footer,
+.md-text .tag-plugin.paper > .content.underline > .body 
+  background: linear-gradient(transparent 1.5rem,var(--text-meta) 1px)
+  background-size: 100% calc(1.5rem + 1px)
+  line-height: calc(1.5rem + 1px)
+  // 若要前后有一定的间隙，可以打开下面的代码;反之，可以注释掉。注意：这里的间隙不是指段落开头的空两个字，而是指每行文字距离下划线开头（末尾）的距离
+  padding: 0 3px
+
+.md-text .tag-plugin.paper > .content.underline
+  p
+    margin: 0
+  >.title
+    border-top: 1px solid var(--text-meta)