hexo-theme-stellar 1.32.1 → 1.32.2

package/_config.yml

@@ -1,6 +1,6 @@
 ######## Stellar info ########
 stellar:
-  version: '1.32.1'
+  version: '1.32.2'
   homepage: 'https://xaoxuu.com/wiki/stellar/'
   repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
   main_css: /css/main.css
@@ -334,19 +334,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 +445,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 +512,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 +533,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 +618,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 +656,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 +686,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/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

@@ -107,7 +107,7 @@ 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}">`
     if (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",
+    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/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.2",
   "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>`

package/scripts/tags/lib/banner.js

@@ -14,7 +14,7 @@ module.exports = ctx => function(args, content) {
   var el = ''
   el += `<div class="tag-plugin banner">`
   // bg
-  el += `<img class="bg" src="${args.bg ? args.bg : ctx.theme.config.default.banner}">`
+  el += `<img class="lazy bg" data-src="${args.bg ? args.bg : ctx.theme.config.default.banner}">`
   // content
   el += `<div class="content">`
   // content.top

package/scripts/tags/lib/chat.js

@@ -110,11 +110,7 @@ module.exports = ctx => function(args, content) {
 
   function loadIcon(url) {
     var el = ''
-    if (ctx.theme.config.plugins.lazyload && ctx.theme.config.plugins.lazyload.enable) {
-      el += '<div class="lazy img" data-bg="' + ctx.theme.config.default.link + '"></div>'
-    } else {
-      el += '<div class="img" style="background-image:url(&quot;' + ctx.theme.config.default.link + '&quot;)"></div>'
-    }
+    el += '<div class="lazy img" data-bg="' + ctx.theme.config.default.link + '"></div>'
     return el
   }
 

package/scripts/tags/lib/friends.js

@@ -19,7 +19,7 @@ module.exports = ctx => function(args) {
   
   var el = `<div class="tag-plugin ${args.posts ? 'users-posts-wrap' : 'users-wrap'}">`
   if (api) {
-    el += `<div class="ds-friends${args.posts ? '_and_posts' : ''}" ${ctx.args.joinTags(args, ['size']).join(' ')} api="${api}"><div class="grid-box"></div></div>`
+    el += `<div class="data-service ds-friends${args.posts ? '_and_posts' : ''}" ${ctx.args.joinTags(args, ['size']).join(' ')} api="${api}"><div class="grid-box"></div></div>`
   } else if (args.group) {
     const links = ctx.theme.config.links || {}
     el += '<div class="grid-box">'

package/scripts/tags/lib/gallery.js

@@ -17,13 +17,14 @@
 
 var index = 0
 
-function img(src, alt) {
+function img(src, alt, loading) {
   let img = ''
-  img += `<img data-fancybox="gallery-${index}" src="${src}"`
+  img += `<img class="lazy" data-fancybox="gallery-${index}" data-src="${src}"`
   if (alt?.length > 0) {
     img += ` alt="${alt}"`
   }
   img += `/>`
+  img += `<div class="lazy-icon" style="background-image:url(${loading});"></div>`
   // cap
   img += `<div class="image-meta">`
   if (alt?.length > 0) {
@@ -54,7 +55,7 @@ module.exports = ctx => function(args, content) {
     if (matches?.length > 2) {
       let alt = matches[1]
       let src = matches[2]
-      el += `<div class="${layoutType}-cell">${img(src, alt)}</div>`
+      el += `<div class="${layoutType}-cell lazy-box">${img(src, alt, ctx.theme.config.default.loading)}</div>`
     }
   }
   el += `</div>`

package/scripts/tags/lib/image.js

@@ -38,11 +38,11 @@ module.exports = ctx => function(args) {
   }
 
   function img(src, alt, style) {
-    let img = ''
-    img += `<img src="${src}" data-src="${src}"`
     let a = '<a data-fancybox'
+    let img = ''
+    img += `<img class="lazy" src="${src}" data-src="${src}"`
     if (alt) {
-      img += ' alt="' + alt + '"'
+      img += ` alt="${alt}"`
       a += ` data-caption="${alt}"`
     }
     if (fancybox && !fancyboxHref) {
@@ -53,12 +53,12 @@ module.exports = ctx => function(args) {
     }
     img += `onerror="this.src=&quot;${ctx.theme.config.default.image_onerror}&quot;"`
     img += '/>'
-
+    // loading
+    img += `<div class="lazy-icon" style="background-image:url(${ctx.theme.config.default.loading});"></div>`
     if (fancyboxHref) {
       a += ` href="${fancyboxHref}">${img}</a>`
       return a
     }
-
     return img
   }
 

package/scripts/tags/lib/link.js

@@ -45,11 +45,7 @@ module.exports = ctx => function(args) {
 
   function loadIcon() {
     var el = ''
-    if (ctx.theme.config.plugins.lazyload && ctx.theme.config.plugins.lazyload.enable) {
-      el += '<div class="lazy img" data-bg="' + (args.icon || ctx.theme.config.default.link) + '"></div>'
-    } else {
-      el += '<div class="lazy img" style="background-image:url(&quot;' + (args.icon || ctx.theme.config.default.link) + '&quot;)"></div>'
-    }
+    el += '<div class="lazy img" data-bg="' + (args.icon || ctx.theme.config.default.link) + '"></div>'
     return el
   }
   function loadTitle() {

package/scripts/tags/lib/md.js

@@ -15,6 +15,6 @@ module.exports = ctx => function(args) {
   args = ctx.args.map(args, [''], ['src'])
   const md_id = "md_" + ++md_index
   return `
-  <div class="ds-mdrender" src="${args.src}" id="${md_id}"></div>
+  <div class="data-service ds-mdrender" src="${args.src}" id="${md_id}"></div>
   `
 }