hexo-theme-stellar 1.26.3 → 1.26.4

package/_config.yml

@@ -1,6 +1,6 @@
 ######## Stellar info ########
 stellar:
-  version: '1.26.3'
+  version: '1.26.4'
   homepage: 'https://xaoxuu.com/wiki/stellar/'
   repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
   main_css: /css/main.css
@@ -313,7 +313,7 @@ tag_plugins:
     max-height: 80vh
   # {% mark %}
   mark:
-    default_color: dark # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
+    default_color: yellow # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
   # {% hashtag %}
   hashtag:
     default_color: # red, orange, yellow, green, cyan, blue, purple
@@ -470,9 +470,9 @@ style:
   darkmode: auto # auto / always / false
   smooth_scroll: false # true / false 开启时如果目录过长可能无法准确定位
   font-size:
-    root: 16px
-    body: 1rem # 16px 
-    code: 85% # 14px
+    root: 16px # 改这个会影响全局所有文字的字号
+    body: 17px # 影响正文区域的字号，如果改成 px 则不受 root 影响
+    code: 85% # 相较于其所在行的文本大小，建议用百分比
     codeblock: 0.8125rem # 13px
   font-family:
     logo: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
@@ -480,10 +480,12 @@ style:
     code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
     codeblock: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
   text-align: left
+  prefix:
+    h2: https://api.iconify.design/ci:heading-h2.svg
   border-radius:
     card: 12px
     block: 12px
-    bar: 12px
+    bar: 8px
     image: 6px
   color:
     # 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
@@ -497,8 +499,6 @@ style:
     link: 'hsl(207 90% 54%)' # 超链接颜色
     button: 'hsl(192 98% 55%)' # 按钮颜色
     hover: 'hsl(14 100% 57%)' # 按钮高亮颜色
-  link:
-    underline: true # true / false
   animated_avatar:
     animate: auto # auto, always
     background: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/avatar/round/rainbow64@3x.webp
@@ -513,15 +513,20 @@ style:
     search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)'
   sidebar:
     # 可以设置：纯色/渐变色/图片作为背景
-    # background: 'linear-gradient(to bottom, #abc3, #abc3)'
-    # background: 'linear-gradient(to bottom, #20E2D744, #F9FEA544)'
-    background: 'url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg)'
-    # 在图片上层增加高斯模糊效果（同时附带饱和度增强效果）
-    blur: true
+    # background: var(--sidebar-bg)
+    # background-image: 'linear-gradient(to bottom, var(--sidebar-bg), var(--sidebar-bg))'
+    background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg)
+    blur-px: 100px
+    blur-bg: var(--alpha60)
   paginator:
     prev: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/arrow/f049bbd4e88ec.svg
     next: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/arrow/064b95430caf4.svg
   error_page: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/404/1c830bfcd517d.svg
+  site:
+    background-image: #'url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.14/image/site-bg1@small.webp)' # 未完全适配，慎用
+    blur-px: 100px
+    blur-bg: var(--alpha75)
+
 
 default:
   avatar: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/avatar/round/3442075.svg

package/layout/_partial/cover/index.ejs

@@ -3,9 +3,9 @@ function layoutCover() {
   if (page.wiki) {
     return partial('wiki_cover')
   }
-  if (page.layout === 'post') {
-    return partial('post_cover')
-  }
+  // if (page.layout === 'post') {
+  //   return partial('post_cover')
+  // }
   return ''
 }
 %>

package/layout/_partial/main/article/article_footer.ejs

@@ -122,7 +122,7 @@ function layoutDiv() {
     function qrcode() {
       if (theme.article.share.includes('wechat')) {
         return `
-        <div class="qrcode" id="qrcode-wechat" style="visibility:hidden;height:0">
+        <div class="qrcode" id="qrcode-wechat" style="opacity:0;height:0">
           <img src="https://api.qrserver.com/v1/create-qr-code/?size=256x256&data=${page.permalink}"/>
         </div>
         `

package/layout/_partial/main/footer.ejs

@@ -2,7 +2,7 @@
 const content = theme.footer.content?.replace('${author.name}', (config.author || 'Anonymity'))?.replace('${theme.name}', stellar_info('name'))?.replace('${theme.version}', stellar_info('version'))?.replace('${theme.tree}', stellar_info('tree'))
 function layoutDiv() {
   var el = ''
-  el += `<footer class="page-footer${scrollreveal(' ')} fs12">`
+  el += `<footer class="page-footer${scrollreveal(' ')} footnote">`
   el += '<hr>'
   // sitemap
   if (theme.footer.sitemap && Object.keys(theme.footer.sitemap).length > 0) {
@@ -13,7 +13,7 @@ function layoutDiv() {
         continue
       }
       el += '<div class="sitemap-group">'
-      el += '<span class="fs14">' + group + '</span>'
+      el += '<span class="fs15">' + group + '</span>'
       items.forEach((item, i) => {
         el += '<a href="' + url_for(md_link(item)) + '">'
         el += __(md_text(item))

package/layout/_partial/main/navbar/article_banner.ejs

@@ -0,0 +1,54 @@
+<%
+
+var banner_url = page.banner || ''
+
+function layoutTitle() {
+  const title = page.h1 != null ? page.h1 : page.title
+  if (title && title.length > 0) {
+    return `<h1 class="text title"><span>${title}</span></h1>`
+  } else {
+    return ''
+  }
+}
+
+function layoutBottom() {
+  const article_title = layoutTitle()
+  if (article_title.length > 0) {
+    return `
+    <div class="bottom">
+      <div class="text-area">
+        ${article_title}
+      </div>
+    </div>
+    `
+  } else {
+    return ``
+  }
+}
+
+function layoutDiv() {
+  const top = partial('article_top_area')
+  const bottom = layoutBottom()
+  if (top.trim().length == 0 && bottom.length == 0) {
+    return ``
+  }
+  var style = ``
+  var el = ``
+  el += `<div class="article banner top">`
+  if (banner_url.length > 0) {
+    el += `<img class="bg" src="${banner_url}">`
+    if (page.poster?.color) {
+      style += ' style="--text-banner:' + page.poster?.color + '"'
+    }
+  }
+  el += `
+  <div class="content"${style}>
+    ${top}
+    ${bottom}
+  </div>
+  `
+  el += `</div>`
+  return el
+}
+%>
+<%- layoutDiv() %>

package/layout/_partial/main/navbar/article_top_area.ejs

@@ -5,11 +5,11 @@ function layoutDiv() {
   }
   var el = ''
   // 1.main
-  el += `<div class="bread-nav fs12">`
+  el += `<div class="top bread-nav footnote">`
   // 2.left
   el += `<div class="left">`
   // 3.left.top: 面包屑导航
-  el += `<div id="breadcrumb">`
+  el += `<div class="flex-row" id="breadcrumb">`
     // 首页
     el += `<a class="cap breadcrumb" href="${url_for(config.root)}">${__("btn.home")}</a>`
     if (theme.wiki.tree[page.wiki]) {

package/layout/_partial/main/navbar/author_banner.ejs

@@ -2,7 +2,7 @@
 function layoutDiv() {
   const author = page.author
   var el = ``
-  el += `<div class="tag-plugin banner author">`
+  el += `<div class="banner author top">`
   if (author.banner) {
     el += `<img class="bg" src="${author.banner}">`
   }

package/layout/_partial/main/navbar/dateinfo.ejs

@@ -1,27 +1,26 @@
 <%
 function layoutDiv() {
   // 作者
-  const author = theme.authors ? (theme.authors[page.author] || theme.default_author) : null
   var el = ''
-  el += `<div id="post-meta">`
+  el += `<div class="flex-row" id="post-meta">`
   if (page.wiki) {
-    el += `<span class="author">${__("meta.updated") + __("symbol.colon")}</span>`
+    el += `<span class="text created">${__("meta.updated") + __("symbol.colon")}`
     el += `<time datetime="${date_xml(page.updated)}">${date(page.updated, config.date_format)}</time>`
     el += `</span>`
   } else {
+    const author = theme.authors ? (theme.authors[page.author] || theme.default_author) : null
     if (author) {
-      const link = `<a href="${url_for(author.path)}">${author.name}</a>`
-      el += `<span class="author">${__("meta.created_author", link) + __("symbol.colon")}</span>`
-    } else {
-      el += `<span class="author">${__("meta.created") + __("symbol.colon")}</span>`
+      el += `<a class="author" href="${url_for(author.path)}">${author.name}</a>`
+      el += `<span class="sep"></span>`
     }
     // 发布日期
-    el += `<span class="created">`
+    el += `<span class="text created">`
     el += `<time datetime="${date_xml(page.date)}">${date(page.date, config.date_format)}</time>`
     el += `</span>`
     // 更新日期
-    el += `<span class="updated">`
-    el += `${__("symbol.comma") + __("meta.updated") + __("symbol.colon")}`
+    el += `<span class="sep updated"></span>`
+    el += `<span class="text updated">`
+    el += `${__("meta.updated") + __("symbol.colon")}`
     el += `<time datetime="${date_xml(page.updated)}">${date(page.updated, config.date_format)}</time>`
     el += `</span>`
   }

package/layout/_partial/main/navbar/nav_tabs_blog.ejs

@@ -2,7 +2,7 @@
 function layoutDiv() {
   var el = '';
   el += '<div class="nav-wrap">';
-  el += '<nav class="sub post cap">';
+  el += '<nav class="sub post">';
   if (is_home()) {
     el += '<a class="active" href="' + url_for(config.index_generator.path) + '">' + __("btn.recent_publish") + '</a>';
   } else {

package/layout/_partial/main/navbar/nav_tabs_wiki.ejs

@@ -2,7 +2,7 @@
 function layoutDiv() {
   var el = '';
   el += '<div class="nav-wrap">';
-  el += '<nav class="sub wiki cap">';
+  el += '<nav class="sub wiki">';
   // 所有项目
   el += '<a';
   if (page.filter === false) {

package/layout/_partial/main/post_list/post_card.ejs

@@ -71,7 +71,7 @@ function div_default() {
   el += '<span class="cap" id="post-meta">';
   
   // time
-  el += __("meta.created") + '&nbsp;' + '<time datetime="' + date_xml(post.date) + '">' + date(post.date, config.date_format) + '</time>';
+  el += `<time datetime="${date_xml(post.date)}">${date(post.date, config.date_format)}</time>`
   el += '</span>';
   // cat
   if (post.categories && post.categories.length > 0) {

package/layout/_partial/sidebar/index.ejs

@@ -115,7 +115,7 @@ function layoutFooterDiv() {
         el += ' onclick="' + item.onclick + '"';
       }
       el += '>';
-      el += item.icon;
+      el += icon(item.icon, 'no-lazy')
       el += '</a>';
     }
   }

package/layout/_partial/sidebar/menu.ejs

@@ -12,13 +12,7 @@ function layoutDiv() {
     }
     el += `>`
     if (item.icon?.length > 0) {
-      if (item.icon.startsWith('<')) {
-        el += item.icon
-      } else if (theme.icons[item.icon]) {
-        el += theme.icons[item.icon]
-      } else {
-        el += `<img no-lazy src="${item.icon}">`
-      }
+      el += icon(item.icon, 'no-lazy')
     } else {
       el += `<span>${__(item.title)}</span>`
     }

package/layout/layout.ejs

@@ -25,10 +25,18 @@ if (page.indent != null) {
   indent = article_type === 'story'
 }
 
+var site_background = ''
+if (theme.style.site && theme.style.site['background-image']) {
+  site_background += `<div class="sitebg">`
+  site_background += `<div class="siteblur"></div>`
+  site_background += `</div>`
+}
+
 var html = `<!DOCTYPE html>`
 html += `<html lang="${page.lang}">`
   html += partial('_partial/head')
   html += `<body>`
+    html += site_background
     html += partial('_partial/cover/index')
     html += `<div class="l_body ${page_type} ${article_type}" id="start" layout="${page.layout}" ${indent ? 'text-indent' : ''}>`
       html += `<aside class="l_left">`

package/layout/page.ejs

@@ -22,15 +22,6 @@ if (page.title == null) {
   }
 }
 
-function layoutTitle() {
-  const title = page.h1 != null ? page.h1 : page.title
-  if (title && title.length > 0) {
-    return `<h1 class="article-title"><span>${title}</span></h1>`
-  } else {
-    return ''
-  }
-}
-
 function articleClass() {
   var str = `md-text content${scrollreveal(' ')}`
   if (isUsingHeti) {
@@ -48,10 +39,9 @@ function layoutDiv() {
     el += partial('_partial/main/navbar/nav_tabs_blog')
   }
   if (page.h1 || page.title || (page.content && page.content.length > 0)) {
-    el += partial('_partial/main/navbar/article_top_area')
+    el += partial('_partial/main/navbar/article_banner')
   }
   el += `<article class="${articleClass()}">`
-  el += layoutTitle()
   if (page.content && page.content.length > 0) {
     el += page.content
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-stellar",
-  "version": "1.26.3",
+  "version": "1.26.4",
   "description": "Elegant and powerful theme for Hexo.",
   "main": "package.json",
   "scripts": {

package/scripts/helpers/icon.js

@@ -1,6 +1,6 @@
 'use strict';
 
-hexo.extend.helper.register('icon', function(key) {
+hexo.extend.helper.register('icon', function(key, args) {
   const { icons } = hexo.theme.config
   var result = ''
   if (icons[key]) {
@@ -9,7 +9,7 @@ hexo.extend.helper.register('icon', function(key) {
     result = key
   }
   if (result.startsWith('/') || result.startsWith('https://') || result.startsWith('http://')) {
-    return `<img src="${result}" />`
+    return `<img ${args?.length > 0 ? args : ''} src="${result}" />`
   } else {
     return result
   }

package/scripts/tags/lib/link.js

@@ -45,10 +45,10 @@ module.exports = ctx => function(args) {
     return '<span class="title">' + (args.title || args.url) + '</span>'
   }
   function loadDesc() {
-    return '<span class="cap desc fs12"></span>'
+    return '<span class="cap desc footnote"></span>'
   }
   function loadLink() {
-    return '<span class="cap link fs12">' + full_url_for(args.url) + '</span>'
+    return '<span class="cap link footnote">' + full_url_for(args.url) + '</span>'
   }
 
   if (args.desc) {

package/scripts/tags/lib/note.js

@@ -24,7 +24,7 @@ module.exports = ctx => function(args) {
   el += '>'
   // title
   if (title && title.length > 0) {
-    el += '<div class="title">' + title + '</div>'
+    el += `<div class="title">${title}</div>`
   }
   // content
   el += '<div class="body">'

package/source/css/_common/base.styl

@@ -25,7 +25,8 @@ img
 
 
 li
-  font-size: $fs-15
+  --fsp: var(--fsp1)
+  font-size: var(--fsp)
 
 
 ul,ol
@@ -40,7 +41,8 @@ table:not([class])
   margin: 1rem 0
   max-width: 100%
   vertical-align: text-top
-  font-size: $fs-14
+  --fsp: var(--fsp2)
+  font-size: var(--fsp)
   th
     background: var(--block)
   td,th

package/source/css/_common/button.styl

@@ -26,34 +26,36 @@ a[onclick]:hover
   cursor: pointer
 
 a.button.start.gradient
-  transition: 0.38s ease-out
   position relative
-  z-index: 0
-  background: convert(hexo-config('style.gradient.start'))
-  background-size: 1000%
-  color: white
-  text-shadow: 0 0 1px rgba(0,0,0,0.12)
-  animation: glow 60s linear infinite
-  @keyframes glow {
-    from {
-      background-position: 0%
-    }
-    to {
-      background-position: 1000%
-    }
-  }
-  &:after
-    content: ''
-    position absolute
-    left: 0
-    right: 0
-    top: 0
-    bottom: 0
-    border-radius: 100px
-    background: inherit
-    z-index -1
-    filter: blur(36px)
+  @media (prefers-color-scheme: dark)
     transition: 0.38s ease-out
-    opacity 0
-  &:hover:after
-    opacity 1
+    z-index: 0
+    background: convert(hexo-config('style.gradient.start'))
+    background-size: 1000%
+    color: white
+    text-shadow: 0 0 1px rgba(0,0,0,0.12)
+    animation: glow 60s linear infinite
+    @keyframes glow {
+      from {
+        background-position: 0%
+      }
+      to {
+        background-position: 1000%
+      }
+    }
+    &:after
+      content: ''
+      position absolute
+      left: 0
+      right: 0
+      top: 0
+      bottom: 0
+      border-radius: 100px
+      background: inherit
+      z-index -1
+      filter: blur(12px)
+      opacity: 0.5
+      transition: 0.38s ease-out
+    &:hover:after
+      filter: blur(36px)
+      opacity 1

package/source/css/_common/cap.styl

@@ -1,6 +1,6 @@
 .cap
   font-weight: 500
-  font-size: $fs-12
+  font-size: $fs-13
   scrollbar-width: none
   color: var(--text-p2)
   &.blue

package/source/css/_common/device.styl

@@ -28,7 +28,7 @@
 
 .sidebar-toggle.mobile
   cursor: pointer
-  color: var(--text-p0)
+  color: var(--text)
   background: none
   padding: 8px
   line-height: 0

package/source/css/_common/html.styl

@@ -5,6 +5,7 @@ html
   font-size: $fs-root
   -webkit-text-size-adjust: 100%
   -ms-text-size-adjust: 100%
+  scroll-padding-top: 8px
   if hexo-config('style.smooth_scroll')
     scroll-behavior: smooth
 body

package/source/css/_common/input.styl

@@ -5,6 +5,6 @@ input
 input.copy-area
   display: block
   font-family: $ff-code
-  font-size: $fs-12
+  font-size: $fs-13
   font-weight: 700
   color: var(--text-p3)

package/source/css/_common/title.styl

@@ -15,15 +15,16 @@ h6
   font-size: $fs-h6
 
 // 次级段落字号
+.fs15
+  --fsp: $fs-15
+  font-size: var(--fsp)
 .fs14
-  font-size: $fs-14
-  p
-    font-size: $fs-14 !important
-  li
-    font-size: $fs-14 !important
-// 脚标字号
-.fs12
-  font-size: $fs-12
+  --fsp: $fs-14
+  font-size: var(--fsp)
+
+.footnote
+  --fsp: $fs-13
+  font-size: var(--fsp)
 
 .widgets
   .post-title

package/source/css/_common/toast.styl

@@ -20,6 +20,7 @@ div.toast
     visibility: visible
     -webkit-animation: fadein 0.5s, fadeout 0.5s 2s
     animation: fadein 0.5s, fadeout 0.5s 2s
+    animation-fill-mode: forwards
 
   @-webkit-keyframes fadein 
     from {top: -64px; opacity: 0;}

package/source/css/_custom.styl

@@ -65,10 +65,14 @@ $border-button = 4px
 :root
   --width-left: 288px
   --width-main: 720px
-  --fs-p: $fs-body
+  --fs-body: $fs-body
+  --fsp: var(--fs-body)
+  --fsp1: 'calc(%s - 1px)' % var(--fsp)
+  --fsp2: 'calc(%s - 2px)' % var(--fsp)
+  --fsp3: 'calc(%s - 3px)' % var(--fsp)
   --gap-l: 16px
-  --gap-p: 1rem // gap for paragraph
-  --gap-p-compact: 0.75rem
+  --gap-p: 'calc(%s + 4px)' % $fs-body // gap for paragraph
+  --gap-p-compact: 'calc(%s * 0.75)' % $fs-body
   // desktop 2k or larger
   @media screen and (min-width: $device-2k)
     --gap-l: 32px
@@ -87,7 +91,7 @@ $border-button = 4px
 
 // 文章布局风格
 .l_body.story
-  --fs-p: 'calc(%s + 2px)' % $fs-body
+  --fsp: 'calc(%s + 2px)' % $fs-body
   --gap-p: 1.5rem
   .tag-plugin,p>img
     margin-top: 2.4rem

package/source/css/_defines/const.styl

@@ -42,7 +42,8 @@ $color-google-red = #E8453C
 
 $c-red = #F44336
 $c-orange = #FA6400
-$c-yellow = #FFBD2B
+$c-amber = #FFBD2B
+$c-yellow = #f2e03d
 $c-green = #3DC550
 $c-cyan = #1BCDFC
 $c-blue = #2196f3

package/source/css/_defines/theme.styl

@@ -15,7 +15,7 @@ $color-text-s = saturation($color-text)
 $color-text-l = lightness($color-text)
 
 set_text_dark()
-  --text-p0: hsl($color-text-h, $color-text-s, 0)
+  --text: hsl($color-text-h, $color-text-s, 0)
   --text-p1: hsl($color-text-h, $color-text-s, $color-text-l)
   --text-p2: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 0.75)
   --text-p3: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.25)
@@ -24,7 +24,7 @@ set_text_dark()
   --text-code: hsl($color-code-h, $color-code-s, $color-code-l)
 
 set_text_light()
-  --text-p0: hsl($color-text-h, $color-text-s, 100)
+  --text: hsl($color-text-h, $color-text-s, 100)
   --text-p1: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.5)
   --text-p2: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.75)
   --text-p3: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.2)
@@ -38,8 +38,9 @@ set_text_light()
   --alpha20: rgba(white, 0.2)
   --alpha50: rgba(white, 0.5)
   --alpha60: rgba(white, 0.6)
+  --alpha75: rgba(white, 0.75)
   --alpha100: white
-  --sidebar-bg: rgba(white, 0.5)
+  --sidebar-bg: hsl($color-block-h, $color-block-s, 90)
   --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)
@@ -56,8 +57,9 @@ set_darkmode()
     --alpha20: rgba(black, 0.2)
     --alpha50: rgba(black, 0.5)
     --alpha60: rgba(black, 0.6)
+    --alpha75: rgba(black, 0.75)
     --alpha100: black
-    --sidebar-bg: rgba(black, 0.64)
+    --sidebar-bg: hsl($color-block-h, $color-block-s, 24)
     set_text_light()
     @media screen and (max-width: $device-mobile-max)
       --site-bg: black

package/source/css/_layout/layout.styl

@@ -3,6 +3,7 @@
   margin: auto
   padding: 0 var(--gap-l)
   justify-content: center
+  font-size: var(--fsp)
 
 .l_body .l_left
   z-index: 8
@@ -27,7 +28,7 @@
   left: 0
   width: 100%
   height: 100%
-  background: rgba(black, 0.5)
+  background: rgba(black, 0.2)
   z-index: 9
   opacity 0
   trans1 opacity
@@ -47,7 +48,7 @@
       max-width: 100%
   .l_body.mobile
     .l_left
-      transition: transform .3s ease-out
+      transition: transform .38s ease-out
   .l_body.mobile.sidebar
     .l_left
       transform: translateX(0px)