hexo-theme-stellar 1.37.0 → 1.39.0

package/layout/_partial/comments/layout.ejs

@@ -6,7 +6,7 @@ if (cmt.service) {
   cmt[cmt.service] = Object.assign({}, theme.comments[cmt.service]);
 }
 var loadComment = false;
-if (theme.comments.service && theme.comments.service.length > 0) {
+if (cmt.service && cmt.service.length > 0) {
   if (page.comments == undefined || page.comments != false) {
     loadComment = true;
   }
@@ -34,6 +34,7 @@ if (cmt.service && page[cmt.service]) {
   Object.assign(cmt[cmt.service], page[cmt.service]);
 }
 page.cmt = cmt;
+page.cmt_rendered = loadComment;
 %>
 <% if (loadComment) { %>
   <div class="related-wrap md-text<%- scrollreveal(' ') %>" id="comments">

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

@@ -105,23 +105,29 @@ function layoutDiv() {
     return ``
   }
   const top = layoutBreadcrumb()
-  var style = ``
+  var bannerStyle = ``
+  var contentStyle = ``
   var el = ``
-  el += `<div class="article banner${scrollreveal(' ')} top">`
+  if (banner.url?.length > 0) {
+    bannerStyle += ` style="--bg-url:url('${banner.url.replace(/'/g, '%27')}')"`
+  }
+  el += `<div class="article-banner-wrap${scrollreveal(' ')}">`
+  el += `<div class="article banner top"${bannerStyle}>`
   if (banner.url?.length > 0) {
     el += `<img class="lazy bg" data-src="${banner.url}">`
     if (banner.color) {
-      style += ' style="--text-banner:' + banner.color + '"'
+      contentStyle += ' style="--text-banner:' + banner.color + '"'
     }
   }
   el += `
-  <div class="content"${style}>
+  <div class="content"${contentStyle}>
     ${top}
     ${bottom}
   </div>
   `
   el += `</div>`
+  el += `</div>`
   return el
 }
 %>
-<%- layoutDiv() %>
+<%- layoutDiv() %>

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

@@ -1,6 +1,7 @@
 <%
 function layoutDiv() {
   var el = '';
+  el += partial('_partial/main/pin_slider', {type: 'post'});
   el += '<div class="navbar top">';
   el += '<div class="navbar-blur">';
   el += '<div class="navbar-container">';
@@ -68,4 +69,4 @@ function layoutDiv() {
 }
 %>
 
-<%- layoutDiv() %>
+<%- layoutDiv() %>

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

@@ -1,6 +1,7 @@
 <%
 function layoutDiv() {
   var el = '';
+  el += partial('_partial/main/pin_slider', {type: 'wiki'});
   el += '<div class="navbar top">';
   el += '<div class="navbar-blur">';
     el += '<div class="navbar-container">';

package/layout/_partial/main/notebook/paginator.ejs

@@ -1,9 +1,10 @@
 <% if ((page.total || 0) > 1) { %>
   <div class="paginator-wrap dis-select<%= scrollreveal(' ') %>">
     <%- paginator({
-      prev_text: '',
-      next_text: '',
+      prev_text: icon('solar:double-alt-arrow-left-bold-duotone'),
+      next_text: icon('solar:double-alt-arrow-right-bold-duotone'),
       force_prev_next: true,
+      escape: false,
     }) %>
   </div>
 <% } %>

package/layout/_partial/main/pin_slider.ejs

@@ -0,0 +1,325 @@
+<%
+// 置顶内容轮播：所有带 navbar top 的列表页上方共用。
+// type: post / wiki / topic
+var pinType = type || 'post'
+var pinItems = []
+
+function pinValue(item) {
+  return item.pin != null ? item.pin : item.sticky
+}
+
+// 只要设置了 pin（含 0、负数）即视为置顶，未设置 / false 不置顶
+function isPinned(item) {
+  var v = pinValue(item)
+  return v !== false && v != null
+}
+
+// 排序仅比较数值大小，true 视作 1
+function pinWeight(item) {
+  var v = pinValue(item)
+  if (v === true) {
+    return 1
+  }
+  var n = Number(v)
+  return isNaN(n) ? 0 : n
+}
+
+if (pinType == 'wiki') {
+  var shelf = theme.wiki?.shelf || []
+  for (var wi = 0; wi < shelf.length; wi++) {
+    var wproj = theme.wiki.tree[shelf[wi]]
+    if (wproj != null && isPinned(wproj)) {
+      pinItems.push(wproj)
+    }
+  }
+} else {
+  var allPosts = site.posts.toArray() || []
+  for (var pi = 0; pi < allPosts.length; pi++) {
+    var post = allPosts[pi]
+    if (post.indexing === false) {
+      continue
+    }
+    if (isPinned(post)) {
+      pinItems.push(post)
+    }
+  }
+}
+
+pinItems.sort(function(a, b) {
+  return pinWeight(b) - pinWeight(a)
+})
+
+// 文章幻灯片：固定「标题 + 一行小字」结构，宽高比统一取自 pin_slider.ratio。
+// 标题：poster.headline > title；小字：poster.caption > description > excerpt（截断 50 字）。
+// 样式与 poster 卡片 cover-info 一致；无封面时为纯白卡片（文字按普通文章颜色）。
+function postSubtitle(post) {
+  if (post.poster != null && post.poster.caption != null && post.poster.caption.length > 0) {
+    return post.poster.caption
+  }
+  if (post.description != null && post.description.length > 0) {
+    return post.description
+  }
+  var text = post.excerpt || post.content || ''
+  text = strip_html(text).replace(/\s+/g, ' ').trim()
+  return text.length > 0 ? truncate(text, {length: 50}) : ''
+}
+
+function postSlide(post) {
+  var noCover = !(post.cover != null && post.cover.length > 0)
+  var headline = (post.poster != null && post.poster.headline != null && post.poster.headline.length > 0) ? post.poster.headline : post.title
+  var subtitle = postSubtitle(post)
+  var el = ''
+  el += '<a class="pin-slide post-slide' + (noCover ? ' no-cover' : '') + '" href="' + pretty_url(post.link || post.path) + '"'
+  if (!noCover) {
+    el += ' style="--pin-cover-url:url(\'' + post.cover.replace(/'/g, '%27') + '\')"'
+  }
+  el += '>'
+  if (!noCover) {
+    el += '<img class="pin-slide-bg" src="' + post.cover + '" alt=""/>'
+  }
+  el += '<div class="pin-slide-text">'
+  el += '<div class="pin-slide-headline">' + headline + '</div>'
+  if (subtitle.length > 0) {
+    el += '<div class="pin-slide-caption">' + subtitle + '</div>'
+  }
+  el += '</div>'
+  el += '</a>'
+  return el
+}
+
+function projectChips(tags) {
+  var caps = ''
+  if (tags && tags.length > 0) {
+    caps += '<span class="pin-slide-chip">' + tags.join('</span><span class="pin-slide-chip">') + '</span>'
+  }
+  return caps
+}
+
+function wikiSlide(proj) {
+  var img = proj.cover || proj.icon || theme.default.project
+  var title = proj.title || proj.name || proj.id
+  var excerpt = proj.description || ''
+  var el = ''
+  el += '<a class="pin-slide" href="' + pretty_url(proj.homepage?.path || '/') + '">'
+  el += '<img class="pin-slide-bg" src="' + img + '" alt=""/>'
+  el += '<div class="pin-slide-mask"></div>'
+  el += '<div class="pin-slide-info">'
+  el += '<div class="pin-slide-caps">' + projectChips(proj.tags) + '</div>'
+  el += '<div class="pin-slide-title">' + title + '</div>'
+  if (excerpt.length > 0) {
+    el += '<div class="pin-slide-excerpt">' + excerpt + '</div>'
+  }
+  el += '</div>'
+  el += '</a>'
+  return el
+}
+
+if (pinItems.length > 0) {
+  var slidesHtml = ''
+  var dotsHtml = ''
+  for (var si = 0; si < pinItems.length; si++) {
+    var item = pinItems[si]
+    if (pinType == 'wiki') {
+      slidesHtml += wikiSlide(item)
+    } else {
+      slidesHtml += postSlide(item)
+    }
+    if (pinItems.length > 1) {
+      var label = item.title || item.name || item.id || (si + 1)
+      dotsHtml += '<button type="button" class="pin-slider-dot' + (si == 0 ? ' active' : '') + '" data-index="' + si + '" aria-label="' + label + '"></button>'
+    }
+  }
+  var groupKey = pinType == 'wiki' ? 'wiki' : 'post'
+  var sliderInterval = 5000 // 自动轮播间隔固定 5000ms
+  var el = ''
+  el += '<div class="pin-slider" id="pin-slider" data-interval="' + sliderInterval + '" data-key="' + pinType + '" data-group="' + groupKey + '">'
+  el += '<div class="pin-slider-track">'
+  el += slidesHtml
+  el += '</div>'
+  if (dotsHtml.length > 0) {
+    el += '<div class="pin-slider-dots">' + dotsHtml + '</div>'
+    el += '<button type="button" class="pin-slider-nav prev">' + icon('solar:double-alt-arrow-left-bold-duotone') + '</button>'
+    el += '<button type="button" class="pin-slider-nav next">' + icon('solar:double-alt-arrow-right-bold-duotone') + '</button>'
+  }
+  el += '</div>'
+%>
+<%- el %>
+<script>
+function initWhenReady() {
+  if (typeof utils !== 'undefined' && utils.initPlugin) {
+    utils.initPlugin(initPinSlider, 'pin-slider');
+  } else {
+    document.addEventListener('DOMContentLoaded', function() {
+      if (typeof utils !== 'undefined' && utils.initPlugin) {
+        utils.initPlugin(initPinSlider, 'pin-slider');
+      }
+    });
+  }
+}
+initWhenReady();
+function initPinSlider() {
+  var slider = document.getElementById('pin-slider');
+  if (!slider) return;
+  var track = slider.querySelector('.pin-slider-track');
+  var slides = slider.querySelectorAll('.pin-slide');
+  var count = slides.length;
+  if (!track || count <= 1) {
+    slider.style.visibility = 'visible';
+    return;
+  }
+  var interval = parseInt(slider.getAttribute('data-interval'), 10) || 4000;
+  var type = slider.getAttribute('data-key') || 'post';
+  var group = slider.getAttribute('data-group') || 'post';
+  var contentKey = type + '::' + Array.prototype.map.call(slides, function(a) {
+    var link = a.querySelector('a.post-card, a.pin-slide');
+    return link ? link.getAttribute('href') : a.getAttribute('href');
+  }).join('|');
+  var index = restorePinIndex(group, contentKey, count);
+  var reduced = false;
+  try {
+    reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  } catch (e) {}
+  slider.style.setProperty('--pin-duration', interval + 'ms');
+  if (reduced) {
+    slider.classList.add('reduced');
+  }
+  function goTo(n) {
+    index = (n + count) % count;
+    track.style.transform = 'translateX(-' + (index * 100) + '%)';
+    var dots = slider.querySelector('.pin-slider-dots');
+    var items = dots ? dots.children : [];
+    for (var i = 0; i < count; i++) {
+      if (!items[i]) continue;
+      if (i === index) {
+        items[i].classList.add('active');
+        items[i].setAttribute('aria-current', 'true');
+      } else {
+        items[i].classList.remove('active');
+        items[i].removeAttribute('aria-current');
+      }
+    }
+    savePinIndex(group, contentKey, index, count);
+  }
+  function next() { goTo(index + 1); }
+  function prev() { goTo(index - 1); }
+  function start() {
+    if (reduced) return;
+    slider.classList.remove('paused');
+  }
+  function stop() {
+    slider.classList.add('paused');
+  }
+  function onVis() {
+    if (document.hidden) {
+      stop();
+    } else {
+      start();
+    }
+  }
+  var startX = null;
+  var startY = null;
+  function onTouchStart(e) {
+    stop();
+    var t = e.changedTouches[0];
+    startX = t.clientX;
+    startY = t.clientY;
+  }
+  function onTouchEnd(e) {
+    if (startX == null) return;
+    var t = e.changedTouches[0];
+    var dx = t.clientX - startX;
+    var dy = t.clientY - startY;
+    startX = null;
+    startY = null;
+    if (Math.abs(dx) > 30 && Math.abs(dx) > Math.abs(dy)) {
+      if (dx < 0) {
+        next();
+      } else {
+        prev();
+      }
+    }
+    start();
+  }
+  var dotsEl = slider.querySelector('.pin-slider-dots');
+  function onProgressEnd(e) {
+    if (e.animationName === 'pin-slider-progress') {
+      next();
+    }
+  }
+  if (dotsEl) {
+    dotsEl.addEventListener('click', function(e) {
+      var btn = e.target.closest ? e.target.closest('.pin-slider-dot') : null;
+      if (btn) {
+        goTo(parseInt(btn.getAttribute('data-index'), 10) || 0);
+      }
+    });
+    dotsEl.addEventListener('animationend', onProgressEnd);
+  }
+  var navPrev = slider.querySelector('.pin-slider-nav.prev');
+  var navNext = slider.querySelector('.pin-slider-nav.next');
+  if (navPrev) {
+    navPrev.addEventListener('click', prev);
+  }
+  if (navNext) {
+    navNext.addEventListener('click', next);
+  }
+  slider.addEventListener('mouseenter', stop);
+  slider.addEventListener('mouseleave', start);
+  slider.addEventListener('focusin', stop);
+  slider.addEventListener('focusout', start);
+  slider.addEventListener('touchstart', onTouchStart, { passive: true });
+  slider.addEventListener('touchend', onTouchEnd, { passive: true });
+  document.addEventListener('visibilitychange', onVis);
+  // 初始化直接定位到缓存序号：先禁用过渡再恢复，避免每次进页面播放“从第一张滑过来”的动画
+  track.style.transition = 'none';
+  goTo(index);
+  void track.offsetWidth;
+  track.style.transition = '';
+  slider.style.visibility = 'visible';
+  start();
+  return function() {
+    stop();
+    slider.removeEventListener('mouseenter', stop);
+    slider.removeEventListener('mouseleave', start);
+    slider.removeEventListener('focusin', stop);
+    slider.removeEventListener('focusout', start);
+    slider.removeEventListener('touchstart', onTouchStart);
+    slider.removeEventListener('touchend', onTouchEnd);
+    if (dotsEl) {
+      dotsEl.removeEventListener('animationend', onProgressEnd);
+    }
+    if (navPrev) {
+      navPrev.removeEventListener('click', prev);
+    }
+    if (navNext) {
+      navNext.removeEventListener('click', next);
+    }
+    document.removeEventListener('visibilitychange', onVis);
+  };
+}
+function restorePinIndex(group, contentKey, count) {
+  try {
+    var raw = localStorage.getItem('stellar.pin-slider.' + group);
+    if (!raw) return 0;
+    var data = JSON.parse(raw);
+    var sets = data && data.sets ? data.sets : {};
+    var rec = sets[contentKey];
+    if (rec && rec.t === count && rec.i >= 0 && rec.i < count) {
+      return rec.i;
+    }
+  } catch (e) {}
+  return 0;
+}
+function savePinIndex(group, contentKey, index, count) {
+  try {
+    var raw = localStorage.getItem('stellar.pin-slider.' + group);
+    var data = raw ? JSON.parse(raw) : {};
+    if (!data.sets) data.sets = {};
+    data.sets[contentKey] = { i: index, t: count };
+    localStorage.setItem('stellar.pin-slider.' + group, JSON.stringify(data));
+  } catch (e) {}
+}
+</script>
+<%
+}
+%>

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

@@ -1,9 +1,10 @@
 <% if ((is_home() || is_category() || is_tag()) && page.total > 1) { %>
   <div class='paginator-wrap dis-select<%- scrollreveal(' ') %>'>
   <%- paginator({
-    prev_text: '',
-    next_text: '',
-    force_prev_next:true
+    prev_text: icon('solar:double-alt-arrow-left-bold-duotone'),
+    next_text: icon('solar:double-alt-arrow-right-bold-duotone'),
+    force_prev_next: true,
+    escape: false
   }) %>
   </div>
 <% } %>

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

@@ -92,9 +92,7 @@ function div_default() {
       }
     }
   }
-  if (post.sticky) {
-    el += `<span class="pin">${icon('default:pin')}</span>`
-  }
+  // 置顶文章已由列表页 navbar 上方的置顶轮播展示，卡片内不再显示 pin 图标。
   el += '</div>';
   el += '</article>';
   return el;
@@ -109,7 +107,7 @@ function div_photo() {
       position = 'bottom';
     }
   }
-  el += '<div class="cover" position="' + position + '">';
+  el += '<div class="cover" position="' + position + '" style="--cover-url:url(\'' + obj.image.replace(/'/g, '%27') + '\')">';
   el += '<img src="' + obj.image + '"/>';
   if (position.length > 0) {
     el += '<div class="cover-info" position="' + position + '"';

package/layout/_partial/scripts/defines.ejs

@@ -31,7 +31,8 @@
         }
         const anchor = document.getElementById(anchorId);
         if (anchor) {
-          const offset = 32; // 与 TOC 点击滚动保持一致
+          // #start 锚点贴顶，不预留 offset；其余锚点与 TOC 点击滚动保持一致
+          const offset = anchorId === 'start' ? 0 : 32;
           const targetY = () => anchor.getBoundingClientRect().top + window.scrollY - offset;
           let timer = null;
           let lastY = null;

package/layout/_partial/scripts/lazyload.ejs

@@ -26,6 +26,30 @@
     window.lazyLoadInstance?.update();
   });
 
+  // 兜底：动态插入的 .lazy 元素（如站点自定义脚本在 update() 之后追加的图片）
+  // 不会被 vanilla-lazyload 自动扫描，未注册的 img.lazy 会被 CSS opacity:0 永久隐藏。
+  // MutationObserver 检测到新增 .lazy 元素后自动调用 update() 重新注册。
+  if (window.MutationObserver) {
+    window.lazyMutationObserver = new MutationObserver((mutations) => {
+      if (window.lazyMutationObserver._pending) return;
+      const hasLazy = mutations.some((m) =>
+        Array.prototype.some.call(m.addedNodes, (node) =>
+          node.nodeType === 1 &&
+          (node.matches?.('.lazy') || !!node.querySelector?.('.lazy'))
+        )
+      );
+      if (!hasLazy) return;
+      window.lazyMutationObserver._pending = requestAnimationFrame(() => {
+        window.lazyMutationObserver._pending = null;
+        window.lazyLoadInstance?.update();
+      });
+    });
+    window.lazyMutationObserver.observe(document.documentElement, {
+      childList: true,
+      subtree: true
+    });
+  }
+
   window.wrapLazyloadImages = (container) => {
     if (typeof container === 'string') {
       container = document.querySelector(container);

package/layout/_partial/scripts/utils.ejs

@@ -321,6 +321,31 @@
     // 动态数据本地缓存：TTL 未过期直接命中；过期后先显示缓存再后台刷新（stale-while-revalidate）
     _cacheEnabled: true,
     _cacheMaxEntryBytes: 200 * 1024,
+    // 同 URL 并发请求去重：页面内多个组件请求同一接口时共享一次 fetch
+    _pendingRequests: {},
+    _fetchShared: (url, options) => {
+      const key = (options && options.method || 'GET') + ' ' + url;
+      if (utils._pendingRequests[key]) {
+        return utils._pendingRequests[key].then(resp => resp.clone());
+      }
+      const promise = fetch(url, options).then(resp => {
+        if (!resp.ok) throw new Error('响应失败');
+        return resp;
+      }).finally(() => {
+        delete utils._pendingRequests[key];
+      });
+      utils._pendingRequests[key] = promise;
+      // 每个调用方各自 clone，避免 Response body 被消费后其他调用方取不到数据
+      return promise.then(resp => resp.clone());
+    },
+    // 延迟执行：缓存写入等非关键操作让出主线程
+    _defer: (fn) => {
+      if (window.requestIdleCallback) {
+        window.requestIdleCallback(fn, { timeout: 3000 });
+      } else {
+        setTimeout(fn, 0);
+      }
+    },
     cache: {
       prefix: 'Stellar.data_cache.v1.',
       enabled: () => !!def.data_cache?.enable && utils._cacheEnabled,
@@ -500,21 +525,21 @@
             }
           }, 5000);
 
-          fetch(url).then(resp => {
+          utils._fetchShared(url).then(resp => {
             if (timedOut) return;
             clearTimeout(timeout);
-
-            if (!resp.ok) throw new Error('响应失败');
             return resp;
           }).then(data => {
             if (timedOut) return;
             // 标记元素实例为已加载
             if (el) utils._loadedElements.add(el);
-            // 写入缓存（克隆响应，避免影响回调读取）
+            // 写入缓存（克隆响应，避免影响回调读取；延迟执行，避免阻塞渲染）
             if (cacheable && data.ok) {
-              data.clone().text().then(text => {
-                utils.cache.set(url, text, data.headers.get('Content-Type') || 'application/json', ttl);
-              }).catch(() => {});
+              utils._defer(() => {
+                data.clone().text().then(text => {
+                  utils.cache.set(url, text, data.headers.get('Content-Type') || 'application/json', ttl);
+                }).catch(() => {});
+              });
             }
             // 后台刷新渲染前恢复初始结构，避免缓存渲染的内容重复
             if (el && initialHTML !== null) {
@@ -562,30 +587,48 @@
 
       return new Promise((resolve, reject) => {
         let retryCount = 0;
+        // 与 request 保持一致：最终失败时回退 stale 缓存，避免闪失败态
+        const fallback = () => {
+          if (cached) {
+            resolve(utils.cache.toResponse(cached));
+          } else {
+            reject('timeout');
+          }
+        };
 
         const tryRequest = () => {
           let timedOut = false;
           const timer = setTimeout(() => {
             timedOut = true;
-            if (++retryCount > maxRetry) reject('timeout');
+            if (++retryCount > maxRetry) fallback();
             else tryRequest();
           }, timeout);
 
-          fetch(url, options)
+          utils._fetchShared(url, options)
             .then(resp => {
               clearTimeout(timer);
-              if (!resp.ok) throw new Error('bad response');
+              if (timedOut) return;
               if (cacheable) {
-                resp.clone().text().then(text => {
-                  utils.cache.set(url, text, resp.headers.get('Content-Type') || 'application/json', ttl);
-                }).catch(() => {});
+                utils._defer(() => {
+                  resp.clone().text().then(text => {
+                    utils.cache.set(url, text, resp.headers.get('Content-Type') || 'application/json', ttl);
+                  }).catch(() => {});
+                });
               }
               resolve(resp);
             })
             .catch(err => {
               clearTimeout(timer);
-              if (++retryCount > maxRetry) reject(err);
-              else setTimeout(tryRequest, 500);
+              if (timedOut) return;
+              if (++retryCount > maxRetry) {
+                if (cached) {
+                  resolve(utils.cache.toResponse(cached));
+                } else {
+                  reject(err);
+                }
+              } else {
+                setTimeout(tryRequest, 500);
+              }
             });
         };
 

package/layout/_partial/sidebar/grad-def.ejs

@@ -0,0 +1,26 @@
+<%
+// 隐藏的 SVG 线性渐变定义，配合 --item-grad 使用（用法见 menu.ejs 与 theme_base.styl 注释）。
+// 渐变角度来自 style.gradient.angle（CSS 角度，0=向上、顺时针），与 CSS 渐变方向保持一致；
+// 颜色使用 --item-theme（默认 var(--theme)）与 --item-theme-light 两个 CSS 变量，
+// 因此同一份定义可被任意元素复用，局部覆盖 --item-theme 的元素需同时设置 --item-theme-light。
+var gradAngle = 225
+if (theme.style && theme.style.gradient && theme.style.gradient.angle) {
+  gradAngle = parseFloat(theme.style.gradient.angle)
+  if (isNaN(gradAngle)) {
+    gradAngle = 225
+  }
+}
+var gradRad = gradAngle * Math.PI / 180
+var gradVX = Math.sin(gradRad)
+var gradVY = -Math.cos(gradRad)
+var gradProj = [[0,0],[1,0],[0,1],[1,1]].map(function(c) {
+  return c[0] * gradVX + c[1] * gradVY
+})
+var gradMin = Math.min.apply(null, gradProj)
+var gradMax = Math.max.apply(null, gradProj)
+var gradX1 = Math.round((0.5 + gradVX * gradMin) * 1000) / 10
+var gradY1 = Math.round((0.5 + gradVY * gradMin) * 1000) / 10
+var gradX2 = Math.round((0.5 + gradVX * gradMax) * 1000) / 10
+var gradY2 = Math.round((0.5 + gradVY * gradMax) * 1000) / 10
+%>
+<svg class="grad-def" width="0" height="0" aria-hidden="true" focusable="false"><defs><linearGradient id="<%= id %>" x1="<%= gradX1 %>%" y1="<%= gradY1 %>%" x2="<%= gradX2 %>%" y2="<%= gradY2 %>%"><stop offset="20%" style="stop-color:var(--item-theme-light)"/><stop offset="60%" style="stop-color:var(--item-theme)"/></linearGradient></defs></svg>