hexo-theme-stellar 1.32.1 → 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.1'
+  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 ########
@@ -334,19 +342,30 @@ footer:
     #   icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/social/942ebbf1a4b91.svg"/>'
     #   url: /about/#comments
   sitemap:
-    # '博客':
-    #   - '[近期](/)'
-    #   - '[分类](/)'
-    #   - '[标签](/)'
-    #   - '[归档](/)'
-    # '项目':
-    #   - '[开源库](/)'
-    # '社交':
-    #   - '[友链](/)'
-    #   - '[留言板](/)'
-    # '更多':
-    #   - '[关于本站](/)'
-    #   - '[GitHub](/)'
+    # - title: 博客
+    #   items:
+    #     - '[近期发布](/)'
+    #     - '[分类](/blog/categories/)'
+    #     - '[标签](/blog/tags/)'
+    #     - '[归档](/blog/archives/)'
+    # - title: 项目
+    #   items:
+    #     - '[xxx](/)'
+    #     - '[xxx](/)'
+    #     - '[xxx](/)'
+    #     - '[xxx](/)'
+    # - title: 社交
+    #   items:
+    #     - '[xxx](/)'
+    #     - '[xxx](/)'
+    #     - '[xxx](/)'
+    #     - '[xxx](/)'
+    # - title: 关于
+    #   items:
+    #     - '[xxx](/)'
+    #     - '[xxx](/)'
+    #     - '[xxx](/)'
+    #     - '[xxx](/)'
   content: | # 支持 Markdown 格式
     本站由 [{author.name}](/) 使用 [{theme.name} {theme.version}]({theme.tree}) 主题创建。
     本博客所有文章除特别声明外，均采用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/) 许可协议，转载请注明出处。
@@ -434,7 +453,10 @@ tag_plugins:
 dependencies:
   jquery: https://gcore.jsdelivr.net/npm/jquery@3.7/dist/jquery.min.js
   marked: https://gcore.jsdelivr.net/npm/marked@13.0/lib/marked.umd.min.js
-
+  lazyload:
+    js: https://gcore.jsdelivr.net/npm/vanilla-lazyload@19.1/dist/lazyload.min.js
+    transition: fade # blur, fade
+    fix_ratio: true # true / false
 
 # 内置服务，按需加载（页面内用到了就会加载，没有用到就不会加载）
 data_services:
@@ -498,17 +520,6 @@ plugins:
     service: flying_pages # flying_pages
     flying_pages: https://gcore.jsdelivr.net/npm/flying-pages@2/flying-pages.min.js
 
-  # lazyload
-  # https://www.npmjs.com/package/vanilla-lazyload
-  lazyload:
-    enable: true # [hexo clean && hexo s] is required after changing this value.
-    js: https://gcore.jsdelivr.net/npm/vanilla-lazyload@19.1/dist/lazyload.min.js
-    transition: fade # blur, fade
-    fix_ratio: true # true / false # 是否固定宽高比，true 时会在图片上添加 style="aspect-ratio: 16/9;"，false 时则不添加，开启此功能会导致增加首次 hexo s 的耗时
-    loading_image:
-      src: # https://github.githubassets.com/images/mona-loading-dark.gif
-      size: 2rem # 图片宽度
-
   # https://fancyapps.com/docs/ui/fancybox/
   # available for {% image xxx %}
   fancybox:
@@ -530,11 +541,11 @@ plugins:
 
   # https://scrollrevealjs.org/api/reveal.html
   scrollreveal:
-    enable: #true
+    enable: #true # 慎用，有些时候打开页面空白
     js: https://gcore.jsdelivr.net/npm/scrollreveal@4.0/dist/scrollreveal.min.js
-    distance: 16px
-    duration: 800 # ms
-    interval: 100 # ms
+    distance: 8px
+    duration: 500 # ms
+    interval: 50 # ms
     scale: 1 # 0.1~1
   
   # AI 摘要
@@ -615,10 +626,9 @@ style:
     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'
-    body: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
-    code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
-    codeblock: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
+    body: 'system-ui, "Microsoft Yahei", "Segoe UI", Arial, sans-serif'
+    code: 'Menlo, Monaco, Consolas, system-ui, monospace, sans-serif'
+    codeblock: 'Menlo, Monaco, Consolas, system-ui, monospace, sans-serif'
   text-align: left
   prefix:
     h2: https://api.iconify.design/ci:heading-h2.svg
@@ -654,18 +664,20 @@ style:
     start: 'linear-gradient(to right, hsl(215, 95%, 64%), hsl(195, 95%, 60%), hsl(165, 95%, 56%), hsl(165, 95%, 56%), hsl(195 95% 60%), hsl(215, 95%, 64%))'
   leftbar:
     # 可以设置：纯色/渐变色/图片作为背景
-    # background: var(--leftbar-bg)
+    background-color: var(--card) # var(--block)
     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)
+    blur-bg: var(--bg-a60)
+    background-opacity: 0.8
   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)' # 未完全适配，慎用
+  site: # 使用 background-image 后，blur 设置才有效
+    # 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)
+    blur-bg: var(--bg-a75)
+    blur-sat: 300%
   # 技术文章内页各级标题前面的符号
   header_prefix:
     h2: '⌘'
@@ -682,7 +694,9 @@ default:
   project: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/image/2779789.png
   banner: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/banner/books.jpg
   topic: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/image/10433048.png
-  image_onerror: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='%23F44336' d='M22 12.698c-.002 1.47-.013 2.718-.096 3.743c-.097 1.19-.296 2.184-.74 3.009a4.2 4.2 0 0 1-.73.983c-.833.833-1.893 1.21-3.237 1.39C15.884 22 14.2 22 12.053 22h-.106c-2.148 0-3.83 0-5.144-.177c-1.343-.18-2.404-.557-3.236-1.39c-.738-.738-1.12-1.656-1.322-2.795c-.2-1.12-.236-2.512-.243-4.241Q1.999 12.737 2 12v-.054c0-2.148 0-3.83.177-5.144c.18-1.343.557-2.404 1.39-3.236s1.893-1.21 3.236-1.39c1.168-.157 2.67-.175 4.499-.177a.697.697 0 1 1 0 1.396c-1.855.002-3.234.018-4.313.163c-1.189.16-1.906.464-2.436.994S3.72 5.8 3.56 6.99C3.397 8.2 3.395 9.788 3.395 12v.784l.932-.814a2.14 2.14 0 0 1 2.922.097l3.99 3.99a1.86 1.86 0 0 0 2.385.207l.278-.195a2.79 2.79 0 0 1 3.471.209l2.633 2.37c.265-.557.423-1.288.507-2.32c.079-.972.09-2.152.091-3.63a.698.698 0 0 1 1.396 0' opacity='.5'/%3E%3Cpath fill='%23F44336' fill-rule='evenodd' d='M17.5 11c-2.121 0-3.182 0-3.841-.659S13 8.621 13 6.5s0-3.182.659-3.841S15.379 2 17.5 2s3.182 0 3.841.659S22 4.379 22 6.5s0 3.182-.659 3.841S19.621 11 17.5 11m-1.47-7.03a.75.75 0 1 0-1.06 1.06l1.47 1.47l-1.47 1.47a.75.75 0 0 0 1.06 1.06l1.47-1.47l1.47 1.47a.75.75 0 1 0 1.06-1.06L18.56 6.5l1.47-1.47a.75.75 0 0 0-1.06-1.06L17.5 5.44z' clip-rule='evenodd'/%3E%3C/svg%3E"
+  loading: https://api.iconify.design/eos-icons:three-dots-loading.svg?color=%231cd0fd
+  # loading: https://github.githubassets.com/images/mona-loading-dark.gif
+  image_onerror: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2rem' height='2rem' viewBox='0 0 24 24'%3E%3C!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='%23F44336' d='M22 12.698c-.002 1.47-.013 2.718-.096 3.743c-.097 1.19-.296 2.184-.74 3.009a4.2 4.2 0 0 1-.73.983c-.833.833-1.893 1.21-3.237 1.39C15.884 22 14.2 22 12.053 22h-.106c-2.148 0-3.83 0-5.144-.177c-1.343-.18-2.404-.557-3.236-1.39c-.738-.738-1.12-1.656-1.322-2.795c-.2-1.12-.236-2.512-.243-4.241Q1.999 12.737 2 12v-.054c0-2.148 0-3.83.177-5.144c.18-1.343.557-2.404 1.39-3.236s1.893-1.21 3.236-1.39c1.168-.157 2.67-.175 4.499-.177a.697.697 0 1 1 0 1.396c-1.855.002-3.234.018-4.313.163c-1.189.16-1.906.464-2.436.994S3.72 5.8 3.56 6.99C3.397 8.2 3.395 9.788 3.395 12v.784l.932-.814a2.14 2.14 0 0 1 2.922.097l3.99 3.99a1.86 1.86 0 0 0 2.385.207l.278-.195a2.79 2.79 0 0 1 3.471.209l2.633 2.37c.265-.557.423-1.288.507-2.32c.079-.972.09-2.152.091-3.63a.698.698 0 0 1 1.396 0' opacity='.5'/%3E%3Cpath fill='%23F44336' fill-rule='evenodd' d='M17.5 11c-2.121 0-3.182 0-3.841-.659S13 8.621 13 6.5s0-3.182.659-3.841S15.379 2 17.5 2s3.182 0 3.841.659S22 4.379 22 6.5s0 3.182-.659 3.841S19.621 11 17.5 11m-1.47-7.03a.75.75 0 1 0-1.06 1.06l1.47 1.47l-1.47 1.47a.75.75 0 0 0 1.06 1.06l1.47-1.47l1.47 1.47a.75.75 0 1 0 1.06-1.06L18.56 6.5l1.47-1.47a.75.75 0 0 0-1.06-1.06L17.5 5.44z' clip-rule='evenodd'/%3E%3C/svg%3E"
 
 api_host:
   ghapi: api.github.com

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/cover/post_cover.ejs

@@ -28,11 +28,7 @@ function div() {
   }
   el += '<div class="l_cover post' + scrollreveal(' ') + '">';
   el += '<div class="cover">';
-  if (theme.plugins.lazyload && theme.plugins.lazyload.enable) {
-    el += '<div class="lazy img bg" data-bg="' + url + '"></div>';
-  } else {
-    el += '<div class="lazy img bg" style="background-image:url(&quot;' + url + '&quot;)"></div>';
-  }
+  el += '<div class="lazy img bg" data-bg="' + url + '"></div>';
   el += '</div>';
   el += '</div>';
   return el;

package/layout/_partial/cover/wiki_cover.ejs

@@ -18,7 +18,7 @@ function layoutWikiCover() {
   if (coverpage === true) {
     coverpage = ['cover', 'title', 'description'];
   }
-  el += '<div class="l_cover wiki' + scrollreveal(' ') + '">';
+  el += '<div class="l_cover wiki">';
   el += '<article class="cover-wrap md-text">';
 
   if (cover?.length > 0 && coverpage.includes('cover')) {

package/layout/_partial/main/footer.ejs

@@ -5,15 +5,25 @@ function layoutDiv() {
   el += `<footer class="page-footer${scrollreveal(' ')} footnote">`
   el += '<hr>'
   // sitemap
-  if (theme.footer.sitemap && Object.keys(theme.footer.sitemap).length > 0) {
-    el += '<div class="sitemap">'
-    for (let group of Object.keys(theme.footer.sitemap)) {
-      let items = theme.footer.sitemap[group]
+  const sitemap = theme.footer.sitemap
+  if (sitemap?.length > 0) {
+    var count = sitemap.length
+    if ([6].includes(count)) {
+      count = 3
+    } else if ([7,8].includes(count)) {
+      count = 4
+    } else {
+      count = Math.min(sitemap.length, 5)
+    }
+    el += `<div class="sitemap" style="column-count:${count};">`
+    for (let group of sitemap) {
+      let title = group.title
+      let items = group.items
       if (items == undefined || items.length == 0) {
         continue
       }
       el += '<div class="sitemap-group">'
-      el += '<span class="fs15">' + group + '</span>'
+      el += '<span class="fs15">' + title + '</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

@@ -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 ''
   }
@@ -107,9 +107,9 @@ function layoutDiv() {
   const top = layoutBreadcrumb()
   var style = ``
   var el = ``
-  el += `<div class="article banner top">`
+  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/main/navbar/ghinfo.ejs

@@ -5,7 +5,7 @@ function layoutDiv() {
     return ''
   }
   return `
-  <div class="right ghrepo ds-ghinfo" api="https://${theme.api_host.ghapi}/repos/${repo}">
+  <div class="right ghrepo data-service data-service ds-ghinfo" api="https://${theme.api_host.ghapi}/repos/${repo}">
     <a class="repo-link bold" href="https://github.com/${repo}">
       ${icon('github:repo')}
       <span type="text">${repo}</span>

package/layout/_partial/scripts/defines.ejs

@@ -33,10 +33,12 @@
   const def = {
     avatar: `<%- theme.default.avatar %>`,
     cover: `<%- theme.default.cover %>`,
+    loading: `<%- theme.default.loading %>`,
   };
   const deps = {
     jquery: `<%- url_for(theme.dependencies.jquery) %>`,
-    marked: `<%- url_for(theme.dependencies.marked) %>`
+    marked: `<%- url_for(theme.dependencies.marked) %>`,
+    lazyload: `<%- url_for(theme.dependencies.lazyload) %>`
   }
   
 

package/layout/_partial/scripts/lazyload.ejs

@@ -0,0 +1,67 @@
+<script async src="<%- url_for(theme.dependencies.lazyload.js) %>"></script>
+<script>
+  // https://www.npmjs.com/package/vanilla-lazyload
+  // Set the options globally
+  // to make LazyLoad self-initialize
+  window.lazyLoadOptions = {
+    elements_selector: ".lazy, .lazyload",
+    callback_loaded: (el) => {
+      el.classList.add('loaded');
+      const wrapper = el.closest('.lazy-box');
+      const icon = wrapper?.querySelector('.lazy-icon');
+      if (icon) icon.remove();
+    }
+  };
+  // Listen to the initialization event
+  // and get the instance of LazyLoad
+  window.addEventListener(
+    "LazyLoad::Initialized",
+    function (event) {
+      window.lazyLoadInstance = event.detail.instance;
+    },
+    false
+  );
+  document.addEventListener('DOMContentLoaded', function () {
+    window.lazyLoadInstance?.update();
+  });
+
+  window.wrapLazyloadImages = (container) => {
+    if (typeof container === 'string') {
+      container = document.querySelector(container);
+    }
+    if (!container) return;
+    
+    const images = container.querySelectorAll('img');
+    images.forEach((img) => {
+      if (img.classList.contains('lazy')) return;
+
+      const src = img.getAttribute('src');
+      if (!src) return;
+
+      const wrapper = document.createElement('div');
+      wrapper.className = 'lazy-box';
+
+      const newImg = img.cloneNode();
+      newImg.removeAttribute('src');
+      newImg.setAttribute('data-src', src);
+      newImg.classList.add('lazy');
+
+      const icon = document.createElement('div');
+      icon.className = 'lazy-icon';
+      if (def.loading) {
+        icon.style.backgroundImage = `url("${def.loading}")`;
+      }
+
+      wrapper.appendChild(newImg);
+      wrapper.appendChild(icon);
+
+      img.replaceWith(wrapper);
+    });
+
+    // 通知 LazyLoad 更新
+    if (window.lazyLoadInstance?.update) {
+      window.lazyLoadInstance.update();
+    }
+  }
+  
+</script>

package/layout/_partial/scripts/utils.ejs

@@ -1,4 +1,5 @@
 <script type="text/javascript">
+  
   function RunItem() {
     this.list = []; // 存放回调函数
     this.start = () => {

package/layout/_partial/scripts.ejs

@@ -19,6 +19,7 @@ function custom_inject() {
 <%- partial('scripts/utils') %>
 <%- partial('scripts/sidebar') %>
 <%- partial('scripts/tagtree') %>
+<%- partial('scripts/lazyload') %>
 
 <!-- required -->
 <script src="<%- url_for(`${theme.stellar.main_js}?v=${stellar_info('version')}`) %>" defer></script>

package/layout/_partial/sidebar/index_leftbar.ejs

@@ -62,7 +62,7 @@ if (typeof page.leftbar == 'string') {
 function layoutTitle(main, url, sub) {
   var el = '';
   el += '<a class="title" href="' + url_for(url || "/") + '">';
-  el += '<div class="main" ff="title">' + main + '</div>';
+  el += '<div class="main">' + main + '</div>';
   if (sub) {
     let arr = sub.split('|');
     if (arr.length > 1) {

package/layout/_partial/sidebar/logo.ejs

@@ -23,7 +23,7 @@ if (page.logo) {
 function layoutTitle(main, url, sub) {
   var el = ''
   el += `<a class="title" href="${url_for(url || "/")}">`
-  el += `<div class="main" ff="title">${main}</div>`
+  el += `<div class="main">${main}</div>`
   if (sub) {
     const arr = sub.split('|')
     if (arr.length > 1) {

package/layout/_partial/widgets/author.ejs

@@ -21,7 +21,7 @@ function layoutDiv() {
       el += `<div class="avatar"><img type="img" id="avatar_url" src="${author.avatar}"></div>`
     }
     // username
-    el += `<p class="username" ff="title" type="text" id="name">${author.name}</p>`
+    el += `<p class="username" type="text" id="name">${author.name}</p>`
     el += `<p class="bio" type="text" id="bio">${author.desc || author.description}</p>`
 
     // homepage

package/layout/_partial/widgets/ghissues.ejs

@@ -26,7 +26,7 @@ function layoutDiv() {
       el += '</div>';
     }
     el += '<div class="widget-body fs14">';
-      el += '<div class="tag-plugin timeline ds-timeline"';
+      el += '<div class="tag-plugin timeline data-service ds-timeline"';
       ['api', 'user'].forEach(key => {
         if (item[key]) {
           el += ' ' + key + '="' + item[key] + '"';

package/layout/_partial/widgets/ghrepo.ejs

@@ -19,7 +19,7 @@ function layoutDiv() {
   el += `<widget class="widget-wrapper${scrollreveal(' ')} ghrepo">`
   // body
   el += '<div class="widget-body">';
-  el += '<div class="items ds-ghinfo" api="https://' + theme.api_host.ghapi + '/repos/' + repo + '">';
+  el += '<div class="items data-service ds-ghinfo" api="https://' + theme.api_host.ghapi + '/repos/' + repo + '">';
   el += '<a class="repo" href="https://github.com/' + repo + '" target="_blank" rel="external nofollow noopener noreferrer">';
     el += '<div class="repo-name flex-row">';
       el += icon('github:repo')
@@ -35,7 +35,7 @@ function layoutDiv() {
         el += icon('github:fork')
         el += '<span type="text" id="forks_count"></span>';
       el += '</div>';
-      el += '<div class="flex-row ds-ghinfo" index="0" api="https://' + theme.api_host.ghapi + '/repos/' + repo + '/tags">';
+      el += '<div class="flex-row data-service ds-ghinfo" index="0" api="https://' + theme.api_host.ghapi + '/repos/' + repo + '/tags">';
         el += icon('github:tag')
         el += '<span type="text" id="latest-tag-name">0</span>';
       el += '</div>';

package/layout/_partial/widgets/ghuser.ejs

@@ -24,12 +24,12 @@ function layoutDiv() {
 
   el += `<widget class="widget-wrapper${scrollreveal(' ')} user-card ghuser">`
   // body
-  el += '<div class="widget-body ds-ghinfo" api="https://' + theme.api_host.ghapi + '/users/' + item.username + '">';
+  el += '<div class="widget-body data-service ds-ghinfo" api="https://' + theme.api_host.ghapi + '/users/' + item.username + '">';
     if (item.avatar) {
       el += '<div class="avatar" ><img no-lazy type="img" id="avatar_url" src="' + config.avatar + '"></div>';
     }
     // username
-    el += '<p class="username" ff="title" type="text" id="name">&nbsp;</p>';
+    el += '<p class="username" type="text" id="name">&nbsp;</p>';
     el += '<p class="bio" type="text" id="bio">&nbsp;</p>';
 
     el += '<div class="buttons">';

package/layout/_partial/widgets/markdown.ejs

@@ -13,7 +13,7 @@ function layoutDiv() {
     el += markdown(item.content);
   }
   if (item.src) {
-    el += `<div class="ds-mdrender" src="${item.src}"></div>`
+    el += `<div class="data-service ds-mdrender" src="${item.src}"></div>`
   }
   if (item.linklist) {
     el += partial('components/linklist', {item: item.linklist})

package/layout/_partial/widgets/recent.ejs

@@ -1,6 +1,6 @@
 <%
 function layoutDiv() {
-  var el = `<widget class="widget-wrapper${scrollreveal(' ')} post-list">`
+  var el = `<widget class="widget-wrapper${scrollreveal(' ')} recent post-list">`
   // header
   el += '<div class="widget-header dis-select">';
   el += '<span class="name">' + __("meta.recent_update") + '</span>';

package/layout/_partial/widgets/related.ejs

@@ -8,7 +8,7 @@ function relatedPostsInTopic() {
     return ''
   }
   var el = ''
-  el += `<widget class="widget-wrapper${scrollreveal(' ')} post-list">`
+  el += `<widget class="widget-wrapper related post-list">`
   el += `<div class="widget-header dis-select">`
   el += `<span class="name">${__('btn.topic') + __('symbol.colon') + (topic.name || topic.title)}</span>`
   el += `</div>`

package/layout/_partial/widgets/timeline.ejs

@@ -11,7 +11,7 @@ function layoutDiv() {
       el += '</div>';
     }
     el += '<div class="widget-body fs14">';
-      el += `<div class="tag-plugin timeline ds-${(item.type || 'timeline')}"`;
+      el += `<div class="tag-plugin timeline data-service ds-${(item.type || 'timeline')}"`;
       ['api', 'user', 'hide', 'limit'].forEach(key => {
         if (item[key]) {
           el += ' ' + key + '="' + item[key] + '"';

package/layout/_partial/widgets/tree.ejs

@@ -60,7 +60,7 @@ function layoutDiv(fallback) {
     }
   }
   if (el.trim().length > 0) {
-    return `<widget class="widget-wrapper${scrollreveal(' ')} post-list">${el}</widget>`
+    return `<widget class="widget-wrapper doc-tree post-list">${el}</widget>`
   } else {
     return ''
   }

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/layout/_plugins/scrollreveal.ejs

@@ -9,8 +9,8 @@
       opacity: 0,
       easing: "ease-out"
     };
-    ScrollReveal().reveal('.l_left .slide-up', slideUp);
-    ScrollReveal().reveal('.l_main .slide-up', slideUp);
-    ScrollReveal().reveal('.l_right .slide-up', slideUp);
+    ScrollReveal({ container: '.widgets' }).reveal('.slide-up', { ...slideUp });
+    ScrollReveal({ container: '.l_main' }).reveal('.slide-up', { ...slideUp });
+    ScrollReveal({ container: '.l_right' }).reveal('.slide-up', { ...slideUp });
   });
 </script>

package/package.json

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

package/scripts/tags/lib/albums.js

@@ -23,15 +23,16 @@ module.exports = ctx => function(args) {
   var el = ''
   el += `<div class="tag-plugin albums-wrap">`
   if (api) {
-    el += `<div class="ds-friends" api="${api}"><div class="tag-plugin gallery grid-box" layout="grid" ratio="square" ${ctx.args.joinTags(args, ['size']).join(' ')}></div></div>`
+    el += `<div class="data-service ds-friends" api="${api}"><div class="tag-plugin gallery grid-box" layout="grid" ratio="square" ${ctx.args.joinTags(args, ['size']).join(' ')}></div></div>`
   } else if (args.group) {
     const links = ctx.theme.config.links || {}
     el += `<div class="tag-plugin gallery grid-box" layout="grid" ratio="square" ${ctx.args.joinTags(args, ['size']).join(' ')}>`
     for (let item of (links[args.group] || [])) {
       if (item?.url) {
         el += `<div class="grid-cell album-card">`
-        el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
-        el += `<img src="${item.cover || item.icon || item.avatar || ctx.theme.config.default.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        el += `<a class="card-link lazy-box" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
+        el += `<img class="lazy" data-src="${item.cover || item.icon || item.avatar || ctx.theme.config.default.cover}" 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(${ctx.theme.config.default.loading});"></div>`
         el += `<div class="image-meta">`
         if (item.title) {
           el += `<span class="image-caption">${item.title}</span>`