hexo-theme-stellar 1.32.2 → 1.32.3

package/README.md

@@ -1,6 +1,24 @@
 # Stellar - 每个人的独立博客
 
-Stellar 是一个内置文档系统的简约商务风 Hexo 主题，支持丰富的标签和动态数据组件，请配合 [文档](https://xaoxuu.com/wiki/stellar/) 使用。
+Stellar 是一个极为强大的综合型 Hexo 主题，包含博客系统、知识库系统、专栏系统、笔记系统，内置海量的标签和动态数据组件。
+
+## 亮点
+
+- 支持技术/生活文章布局风格，为不同类型的文章使用不同的风格。
+- 内置 wiki 系统，可以展示多个项目文档，或个人知识库。
+- 内置专栏系统，可以沉浸式阅读专栏系列文章。
+- 内置笔记系统，更方便梳理笔记。
+- 内置海量的灵活而强大的标签组件，互相之间还可以混搭嵌套。
+- 内置多种动态数据组件，静态博客更新不再依赖于重新部署。
+  - 动态时间线（像发朋友圈一样发布短文，也可以订阅他人的时间线）
+  - 自动化的动态友链（自动检测友链状态、打标签、友链文章订阅）
+  - 渲染远程 markdown 文件（例如渲染项目仓库的 README 以减少重复工作）
+- 模块化设计，内置多种复用性极强的小组件，自由搭配布局。
+- 图片懒加载占位固定原图长宽比，不会发生高度跳变，体验更佳。
+- 支持一站多作者，可以为不同文章指定不同的作者，每位作者都有专属主页。
+- 社区文化：可订阅「探索号」时间线数据源获取社区用户的宝贵经验分享。
+
+上述亮点都可以在 [文档](https://xaoxuu.com/wiki/stellar/) 中找到详细使用方法。
 
 [![Stargazers over time](https://starchart.cc/xaoxuu/hexo-theme-stellar.svg)](https://starchart.cc/xaoxuu/hexo-theme-stellar)
 
@@ -10,10 +28,10 @@ Stellar 是一个内置文档系统的简约商务风 Hexo 主题，支持丰富
 Check your environment:
 
 ```yaml
-Hexo: 6.3.0 ~ 7.0.0
+Hexo: 6.3.0 ~ latest
 hexo-cli: 4.3.0 ~ latest
-node: 14.17.3 ～ 20.10.0 # 建议选择 LTS 版本，过高的版本 hexo 还没有进行兼容。
-npm: 6.14.13 ~ 10.2.3
+node: 14.17.3 ～ latest LTS # 建议选择 LTS 版本，过高的版本 hexo 还没有进行兼容。
+npm: 6.14.13 ~ latest
 ```
 
 Edit your `_config.yml`:

package/_config.yml

@@ -1,6 +1,6 @@
 ######## Stellar info ########
 stellar:
-  version: '1.32.2'
+  version: '1.32.3'
   homepage: 'https://xaoxuu.com/wiki/stellar/'
   repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
   main_css: /css/main.css
@@ -315,7 +315,15 @@ comments:
     js: https://unpkg.com/artalk@2.9/dist/Artalk.js
     server: # 后端服务地址
     site: '' # 站点名称
-    darkMode: auto
+    darkMode: auto # 其它模式都有问题，慎用，否则后果自负
+    fancybox: true # 是否为评论区启用 fancybox
+    # artalk 有三类图片：1.上传至服务端 2.上传至服务端后利用upgit上传至图床 3.前端上传至图床（本配置为此类）
+    # 配置此项时将覆盖服务端上传能力
+    imageUploader:
+      # 以兰空图床为例，下列填写内容为：
+      # api: 'https://xxxxxx/api/v1/upload' # 图床上传地址
+      # token: 'Bearer xxxxxxxxxxxxxx' # 图床验证
+      # resp: 'data.links.url' # 图片地址返回值的字段
 
 
 ######## Footer ########
@@ -666,7 +674,7 @@ style:
     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 后，blur 设置才有效
-    # background-image: 'url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.14/image/site-bg1@small.webp)'
+    # 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(--bg-a75)
     blur-sat: 300%

package/layout/_partial/comments/artalk/layout.ejs

@@ -1,7 +1,7 @@
 <%
 function layoutDiv() {
   var el = '';
-  el += '<div id="artalk_container"';
+  el += `<div class="artalk ${theme.comments.artalk?.fancybox ? 'with-fancybox' : ''}" id="artalk_container"`;
   let cfg = {};
   if (page.comment_id) {
     cfg['comment_id'] = page.comment_id;

package/layout/_partial/comments/artalk/script.ejs

@@ -6,6 +6,10 @@
     if (!el) return;
     utils.css('<%- theme.comments.artalk.css %>');
     utils.js('<%- theme.comments.artalk.js %>', {defer: true}).then(function () {
+      // 监听 Artalk 事件
+      Artalk.use((ctx) => {
+        ctx.on('list-loaded', () => window.lazyLoadInstance?.update())
+      })
       const path = el.getAttribute('comment_id') ?? decodeURI(window.location.pathname);
       const artalk = Artalk.init({
         el: '#artalk_container',
@@ -13,7 +17,24 @@
         pageTitle: '<%= page.title %>',
         server: '<%= theme.comments.artalk.server %>',
         site: '<%= theme.comments.artalk.site %>',
-        darkMode: '<%= theme.comments.artalk.darkMode %>'
+        darkMode: '<%= theme.comments.artalk.darkMode %>',
+        <% if (theme.comments.artalk.imageUploader?.api) { %>
+        imgUploader: function(file) {
+          let headers = new Headers();
+          headers.set('Accept', 'application/json');
+          <% if (theme.comments.artalk.imageUploader?.token) { %>
+            headers.set('Authorization', '<%= theme.comments.artalk.imageUploader?.token %>')
+          <% } %>
+          let formData = new FormData();
+          formData.append('file', file);
+          return fetch('<%= theme.comments.artalk.imageUploader?.api %>',{
+            method: 'POST',
+            body: formData,
+            headers: headers
+            }).then((resp) => resp.json())
+              .then((resp) => resp.<%= theme.comments.artalk.imageUploader?.resp %>)
+        },
+        <% } %>
       });
     });
   }

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

@@ -70,7 +70,7 @@ function layoutSubtitle() {
 
 function layoutIcon() {
   if (banner.avatar?.length > 0 || banner.icon?.length > 0) {
-    return `<img class="avatar" src="${banner.avatar || banner.icon}">`
+    return `<img class="lazy avatar" data-src="${banner.avatar || banner.icon}">`
   } else {
     return ''
   }
@@ -109,7 +109,7 @@ function layoutDiv() {
   var el = ``
   el += `<div class="article banner${scrollreveal(' ')} top">`
   if (banner.url?.length > 0) {
-    el += `<img class="bg" src="${banner.url}">`
+    el += `<img class="lazy bg" data-src="${banner.url}">`
     if (banner.color) {
       style += ' style="--text-banner:' + banner.color + '"'
     }

package/layout/_partial/scripts/lazyload.ejs

@@ -4,7 +4,7 @@
   // Set the options globally
   // to make LazyLoad self-initialize
   window.lazyLoadOptions = {
-    elements_selector: ".lazy",
+    elements_selector: ".lazy, .lazyload",
     callback_loaded: (el) => {
       el.classList.add('loaded');
       const wrapper = el.closest('.lazy-box');

package/layout/_plugins/fancybox.ejs

@@ -4,14 +4,18 @@
     css: `<%- conf.css %>`,
     js: `<%- conf.js %>`
   };
-  var selector = '[data-fancybox]:not(.error)';
+  var selector = '[data-fancybox]:not(.error), .with-fancybox .atk-content img:not([atk-emoticon])';
   if (ctx.fancybox.selector) {
     selector += `, ${ctx.fancybox.selector}`
   }
   var needFancybox = document.querySelectorAll(selector).length !== 0;
   if (!needFancybox) {
-    const els = document.getElementsByClassName('ds-memos');
-    if (els != undefined && els.length > 0) {
+    const memos = document.getElementsByClassName('ds-memos');
+    if (memos != undefined && memos.length > 0) {
+      needFancybox = true;
+    }
+    const fancybox = document.getElementsByClassName('with-fancybox');
+    if (fancybox != undefined && fancybox.length > 0) {
       needFancybox = true;
     }
   }

package/package.json

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

package/scripts/tags/lib/friends.js

@@ -27,7 +27,10 @@ module.exports = ctx => function(args) {
       if (item?.url && item?.title) {
         el += `<div class="grid-cell user-card">`
         el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
-        el += `<img src="${item.icon || item.avatar || ctx.theme.config.default.avatar}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.avatar}&quot;;"/>`
+        el += `<div class="lazy-box icon">`
+        el += `<img class="lazy" data-src="${item.icon || item.avatar || ctx.theme.config.default.avatar}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.avatar}&quot;;"/>`
+        el += `<div class="lazy-icon" style="background-image:url(&quot;${ctx.theme.config.default.loading}&quot;);"></div>`
+        el += `</div>`
         el += `<div class="name">`
         el += `<span>${item.title}</span>`
         el += `</div>`

package/scripts/tags/lib/posters.js

@@ -11,7 +11,7 @@ module.exports = ctx => function(args) {
   var args = ctx.args.map(args, ['repo', 'api', 'size'], ['group'])
   const host = ctx.theme.config.api_host.ghraw
   if (args.size == null) {
-    args.size = 'm'
+    args.size = 'xs'
   }
   var api
   if (args.api) {

package/scripts/tags/lib/sites.js

@@ -32,12 +32,12 @@ module.exports = ctx => function(args) {
         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 += `<img class="lazy" data-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 += `<img class="lazy" data-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>`

package/source/css/_components/main.styl

@@ -20,8 +20,8 @@ body>.sitebg
   right: 0
   bottom: 0
   background-size: cover
-  if $site-background
-    background-image: convert($site-background)
+  if $site-background-image
+    background-image: convert($site-background-image)
   .siteblur
     width: 100%
     height: 100%

package/source/css/_components/pages/article-story.styl

@@ -1,7 +1,7 @@
 .l_body[type=story] .md-text.content
   --fsp: 'calc(%s + 1px)' % $fs-body
   --gap-p: 2rem
-  div.tag-plugin,p>img
+  >div.tag-plugin,>p>img
     margin-top: 2.4rem
     margin-bottom: 2.4rem
   // 段落标题

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

@@ -19,6 +19,7 @@
   position: relative
 // override
 .md-text.content .tag-plugin.quot
+  text-wrap: balance
   h1,h2
     font-size: $fsh2
     font-weight: 900

package/source/css/_components/widgets/toc.styl

@@ -11,6 +11,11 @@
       width: 4px
       background: var(--block)
       border-radius: 4px
+  
+  if !$site-background-image
+    @media screen and (min-width: $device-laptop)
+      background: var(--background)
+
 
 // 目录基本样式
 .widget-wrapper.toc .toc
@@ -178,6 +183,6 @@
       color: var(--text-p2)
   .widget-wrapper.toc .widget-footer
     a
-      background: var(--bg-a100)
+      background: var(--block)
     a+a
       margin-top: 4px

package/source/css/_custom.styl

@@ -29,7 +29,7 @@ $fsp2 = 'calc(%s - 2px)' % $fs-body
 $fsp3 = 'calc(%s - 3px)' % $fs-body
 
 // site main
-$site-background = hexo-config('style.site.background-image')
+$site-background-image = hexo-config('style.site.background-image')
 $leftbar-background-image = hexo-config('style.leftbar.background-image')
 $leftbar-background-color = hexo-config('style.leftbar.background-color')
 

package/source/css/_defines/theme_base.styl

@@ -66,7 +66,7 @@ x-set-text-colors($scheme, $p0 = 1, $p1 = 0.8, $p2 = 0.7, $p3 = 0.5, $p4 = 0.4)
 dynamic-theme-light()
   $hue = $c-base-hue
   --background: x-hsla($hue, 20%, 98%, 1)
-  --card: $site-background ? hsla(white, 0.5) : white
+  --card: $site-background-image ? hsla(white, 0.5) : white
 
   x-set-bg-colors('light')
   x-set-text-colors('light')
@@ -77,7 +77,7 @@ dynamic-theme-dark()
   --background: x-hsla($hue, 8%, 12%, 1)
   @media screen and (max-width: $device-mobile-max)
     --background: black
-  --card: $site-background ? hsla(white, 0.25) : x-hsla($hue, 10%, 24%, 1)
+  --card: $site-background-image ? hsla(white, 0.25) : x-hsla($hue, 10%, 24%, 1)
 
   x-set-bg-colors('dark')
   x-set-text-colors('dark')

package/source/css/_defines/theme_colorful.styl

@@ -4,15 +4,15 @@ x-set-theme-colorful($scheme = 'light', $color, $text = true)
   x-set-theme-with-color($color)
   x-set-link-with-color($color)
   if $scheme == 'dark'
-    --theme-border: x-hsla($hue, 50%, 24%)
+    --theme-border: x-hsla($hue, 40%, 24%)
     --theme-block: x-hsla($hue, 24%, 24%)
     --theme-mark: x-hsla($hue, 24%, 24%)
-    --theme-codeblock: x-hsla($hue, 12%, 18%)
+    --theme-codeblock: x-hsla($hue, 12%, 24%)
     if text
       --text: x-hsla($hue, 50%, 75%, 1)
-      --text-p1: x-hsla($hue, 50%, 75%, 0.8)
-      --text-p2: x-hsla($hue, 80%, 80%, 0.7)
-      --text-p3: x-hsla($hue, 80%, 80%, 0.5)
+      --text-p1: x-hsla($hue, 80%, 80%, 1)
+      --text-p2: x-hsla($hue, 80%, 80%, 0.8)
+      --text-p3: x-hsla($hue, 80%, 80%, 0.6)
       --text-p4: x-hsla($hue, 80%, 80%, 0.4)
       --link: x-hsla($hue, 80%, 60%, 1)
       --link-a20: x-hsla($hue, 80%, 60%, 0.2)
@@ -23,9 +23,9 @@ x-set-theme-colorful($scheme = 'light', $color, $text = true)
     --theme-codeblock: x-hsla($hue, 50%, 95%)
     if text
       --text: x-hsla($hue, 55%, 16%, 1)
-      --text-p1: x-hsla($hue, 55%, 16%, 0.8)
-      --text-p2: x-hsla($hue, 90%, 20%, 0.7)
-      --text-p3: x-hsla($hue, 90%, 20%, 0.5)
+      --text-p1: x-hsla($hue, 90%, 20%, 1)
+      --text-p2: x-hsla($hue, 90%, 20%, 0.8)
+      --text-p3: x-hsla($hue, 90%, 20%, 0.6)
       --text-p4: x-hsla($hue, 90%, 20%, 0.4)
       --link: x-hsla($hue, 95%, 32%, 1)
       --link-a20: x-hsla($hue, 95%, 32%, 0.2)

package/source/css/_plugins/comments/artalk.styl

@@ -70,6 +70,9 @@
   .atk-error-layer
     background: none
 
+.with-fancybox .atk-content img:not([atk-emoticon])
+  cursor: zoom-in
+
 .cmt-body
   .artalk, .atk-layer-wrap, .artalk.atk-dark-mode, .atk-layer-wrap.atk-dark-mode
     --at-color-font: var(--text-p1)
@@ -77,7 +80,7 @@
     --at-color-sub: var(--text-p3)
     --at-color-grey: var(--text-p4)
     --at-color-meta: var(--text-p4)
-    if $site-background
+    if $site-background-image
       --at-color-border: transparent
     else
       --at-color-border: var(--block-border)

package/source/css/_plugins/lazyload.styl

@@ -47,7 +47,7 @@ img[data-ll-status].loaded
 
 // 加载失败
 img[data-ll-status].error
-  min-width: $loadingImageSize
-  min-height: $loadingImageSize
+  width: $loadingImageSize
+  height: $loadingImageSize
   &+.lazy-icon
     display: none