hexo-theme-stellar 1.26.2 → 1.26.4

package/_config.yml

@@ -1,10 +1,10 @@
 ######## Stellar info ########
 stellar:
-  version: '1.26.2'
+  version: '1.26.4'
   homepage: 'https://xaoxuu.com/wiki/stellar/'
   repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
-  cdn_css: # Use cdn links instead of /css/main.css
-  cdn_js: # Use cdn links instead of /js/main.js
+  main_css: /css/main.css
+  main_js: /js/main.js
 
 
 ######## head tags ########
@@ -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/head.ejs

@@ -118,11 +118,7 @@ function custom_inject() {
     <%- feed_tag(config.feed.path, {title: config.title}) %>
   <% } %>
 
-  <% if (theme.stellar.cdn_css) { %>
-    <%- css(theme.stellar.cdn_css) %>
-  <% } else { %>
-    <%- css('/css/main.css') %>
-  <% } %>
+  <link rel="stylesheet" href="<%- `${theme.stellar.main_css}?v=${stellar_info('version')}` %>">
 
   <% if (config.favicon) { %>
     <%- favicon_tag(config.favicon) %>

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/scripts/index.ejs

@@ -166,11 +166,7 @@ function custom_inject() {
 </script>
 
 <!-- required -->
-<% if (theme.stellar.cdn_js) { %>
-  <%- js({src: theme.stellar.cdn_js, async: true}) %>
-<% } else { %>
-  <%- js({src: '/js/main.js', async: true}) %>
-<% } %>
+<script src="<%- `${theme.stellar.main_js}?v=${stellar_info('version')}` %>" async></script>
 
 <!-- optional -->
 <%- partial('../plugins/comments/script') %>

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/logo.ejs

@@ -6,6 +6,9 @@ if (page.logo) {
   const proj = theme.wiki.tree[page.wiki]
   var l = proj.logo
   if (l) {
+    if (l.title.includes('](') == false) {
+      l.title = `[${l.title}](${url_for(proj.homepage?.path || '')})`
+    }
     logo = l
   } else if (proj.name || proj.icon) {
     logo = {

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/archive.ejs

@@ -17,7 +17,7 @@ function layoutArchiveList() {
   }
   el += `<div class="post-list archives">`
   var years = []
-  const posts = page.author != null ? site.posts.filter(p => (p.author || theme.default_author.name) == page.author.name) : site.posts
+  const posts = page.author != null ? site.posts.filter(p => (p.author || theme.default_author.id) == page.author.id) : site.posts
   posts.sort('date', -1).each(function(post) {
   	post.year = date(post.date, 'YYYY')
   	  if (post.year && (years.includes(post.year) == false) && (post.title || post.date)) {

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.2",
+  "version": "1.26.4",
   "description": "Elegant and powerful theme for Hexo.",
   "main": "package.json",
   "scripts": {

package/scripts/generators/author.js

@@ -6,10 +6,11 @@ hexo.extend.generator.register('author', function (locals) {
   const { site_tree, authors } = hexo.theme.config
   var pages = []
   for (let key of Object.keys(authors)) {
-    const author = authors[key]
+    var author = authors[key]
     if (author.hidden) {
       continue
     }
+    author.id = key
     pages.push({
       path: author.path,
       layout: ['archive'],

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