hexo-theme-stellar 1.39.0 → 1.40.0

package/source/css/_components/sidebar/sidebar.styl

@@ -63,12 +63,14 @@
       filter: saturate(var(--saturate)) blur(var(--blur-px)) opacity(var(--background-opacity))
       :root[data-theme="dark"] &
         --background-opacity: hexo-config('style.leftbar.background-opacity') * 0.75
-      @media screen and (prefers-color-scheme: dark)
-        --background-opacity: hexo-config('style.leftbar.background-opacity') * 0.75
+      :root:not([data-theme]) &
+        @media screen and (prefers-color-scheme: dark)
+          --background-opacity: hexo-config('style.leftbar.background-opacity') * 0.75
     else if $leftbar-background-color-light || $leftbar-background-color-dark
       background-color: convert($leftbar-background-color-light)
-      @media screen and (prefers-color-scheme: dark)
-        background-color: convert($leftbar-background-color-dark)
+      :root:not([data-theme]) &
+        @media screen and (prefers-color-scheme: dark)
+          background-color: convert($leftbar-background-color-dark)
 
   .leftbar-container
     height: calc(100vh - var(--gap-margin) * 2)
@@ -109,9 +111,10 @@
         :root[data-theme="dark"] &
           background: rgba(white, 0.05)
           box-shadow: inset 0 0 32px 1px rgba(white, 0.1)
-        @media screen and (prefers-color-scheme: dark)
-          background: rgba(white, 0.05)
-          box-shadow: inset 0 0 32px 1px rgba(white, 0.1)
+        :root:not([data-theme]) &
+          @media screen and (prefers-color-scheme: dark)
+            background: rgba(white, 0.05)
+            box-shadow: inset 0 0 32px 1px rgba(white, 0.1)
 
 @media screen and (max-width: $device-mobile-max)
   .l_left

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

@@ -0,0 +1,37 @@
+// 表格标签（#466）：{% table style:scroll|wrap|compact %}
+.tag-plugin.table
+  table
+    border-collapse: collapse
+    width: 100%
+  &.table-scroll
+    overflow-x: auto
+    -webkit-overflow-scrolling: touch
+    scrollbar()
+    table
+      min-width: max-content
+      th, td
+        padding: 8px 1em
+  &.table-wrap
+    table
+      table-layout: fixed
+      border-collapse: separate
+      border-spacing: 0
+      border: 1px solid var(--block-border)
+      border-radius: $border-card
+      overflow: hidden
+      tr
+        white-space: normal
+      th
+        border-top: none
+      th, td
+        word-break: break-word
+        overflow-wrap: anywhere
+        padding: 8px 1em
+        border-left: 1px solid var(--block-border)
+        &:first-child
+          border-left: none
+  &.table-compact
+    table
+      th, td
+        padding: 4px 1em
+        line-height: 1.4

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

@@ -0,0 +1,27 @@
+// 气泡注解标签（#602）：{% tip text:注解 %}词句{% endtip %}
+.tag-plugin.tip
+  position: relative
+  display: inline-block
+  border-bottom: 1px dashed var(--text-p3)
+  cursor: help
+  .tip-bubble
+    position: absolute
+    bottom: 135%
+    left: 50%
+    transform: translateX(-50%)
+    display: block
+    width: max-content
+    max-width: 18rem
+    padding: .35rem .7rem
+    bar-glass($border-bar)
+    text-shadow: none
+    color: var(--text-p1)
+    font-size: $fs-14
+    line-height: 1.5
+    white-space: normal
+    opacity: 0
+    pointer-events: none
+    transition: opacity .2s ease
+    z-index: 10
+  &:hover .tip-bubble, &:focus .tip-bubble
+    opacity: 1

package/source/css/_custom.styl

@@ -63,7 +63,7 @@ $border-image-l = convert(hexo-config('style.border-radius.image-l'))
 $border-image = convert(hexo-config('style.border-radius.image'))
 $border-image-s = convert(hexo-config('style.border-radius.image-s'))
 $border-button = 8px
-$corner-shape = convert(hexo-config('style.corner-shape') || 'superellipse(1.2)')
+$corner-shape = convert(hexo-config('style.corner-shape'))
 
 // 可以动态变化的属性
 :root

package/source/css/_defines/func.styl

@@ -143,9 +143,10 @@ sidebar-light($bg = unquote('var(--bg-a50)'), $light = 0.38, $edge = 0.45, $dark
   :root[data-theme="dark"] &
     background: var(--leftbar-item-bg, linear-gradient(180deg, rgba(white, $dark-light), rgba(white, 0) 50%), $bg)
     box-shadow: var(--leftbar-item-shadow, inset 0 1px 0 rgba(white, $dark-edge))
-  @media (prefers-color-scheme: dark)
-    background: var(--leftbar-item-bg, linear-gradient(180deg, rgba(white, $dark-light), rgba(white, 0) 50%), $bg)
-    box-shadow: var(--leftbar-item-shadow, inset 0 1px 0 rgba(white, $dark-edge))
+  :root:not([data-theme]) &
+    @media (prefers-color-scheme: dark)
+      background: var(--leftbar-item-bg, linear-gradient(180deg, rgba(white, $dark-light), rgba(white, 0) 50%), $bg)
+      box-shadow: var(--leftbar-item-shadow, inset 0 1px 0 rgba(white, $dark-edge))
 
 newblur($radius = 64px)
   box-shadow: 0 0 2px rgba(black, .04), 0 2px 8px rgba(black, .04), 0 4px 16px rgba(black, .04)
@@ -153,14 +154,16 @@ newblur($radius = 64px)
   text-shadow: 0 0 4px rgba(white, 1), 0 0 8px rgba(white, 0.8), 0 0 16px rgba(white, 0.6)
   :root[data-theme="dark"] &
     text-shadow: 0 0 2px rgba(black, 0.2), 0 0 4px rgba(black, 0.4)
-  @media (prefers-color-scheme: dark)
-    text-shadow: 0 0 2px rgba(black, 0.2), 0 0 4px rgba(black, 0.4)
+  :root:not([data-theme]) &
+    @media (prefers-color-scheme: dark)
+      text-shadow: 0 0 2px rgba(black, 0.2), 0 0 4px rgba(black, 0.4)
   nav a:not(.active,:hover)
     filter: drop-shadow(0 0 0 white) drop-shadow(0 0 4px white)
     :root[data-theme="dark"] &
       filter: none
-    @media (prefers-color-scheme: dark)
-      filter: none
+    :root:not([data-theme]) &
+      @media (prefers-color-scheme: dark)
+        filter: none
   &:before,&:after
     z-index -1
     position: absolute
@@ -179,8 +182,9 @@ newblur($radius = 64px)
     margin: 1px
     :root[data-theme="dark"] &
       background: rgba(white, 0.2)
-    @media (prefers-color-scheme: dark)
-      background: rgba(white, 0.2)
+    :root:not([data-theme]) &
+      @media (prefers-color-scheme: dark)
+        background: rgba(white, 0.2)
   &:after
     --blur-px: 16px
     --blur-sat: 300%
@@ -192,8 +196,9 @@ newblur($radius = 64px)
     trans1 all
     :root[data-theme="dark"] &
       box-shadow: inset 0 0 2px 1px rgba(white, 0.2)
-    @media (prefers-color-scheme: dark)
-      box-shadow: inset 0 0 2px 1px rgba(white, 0.2)
+    :root:not([data-theme]) &
+      @media (prefers-color-scheme: dark)
+        box-shadow: inset 0 0 2px 1px rgba(white, 0.2)
 
 // 长条圆角玻璃 UI（navbar top 与 float-panel 共用）
 bar-glass($radius = $border-bar-container)
@@ -220,8 +225,9 @@ bar-item-active()
   background: var(--bg-a60)
   :root[data-theme="dark"] &
     background: rgba(white, 0.25)
-  @media (prefers-color-scheme: dark)
-    background: rgba(white, 0.25)
+  :root:not([data-theme]) &
+    @media (prefers-color-scheme: dark)
+      background: rgba(white, 0.25)
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.04), 0 0 2px rgba(0, 0, 0, 0.04), 0 0 4px rgba(0, 0, 0, 0.08)
   backdrop-filter: saturate(300%)
   -webkit-backdrop-filter: saturate(300%)

package/source/css/_defines/theme_base.styl

@@ -117,6 +117,9 @@ dynamic-theme-dark()
 
   // dynamic colors
   dynamic-theme-light()
+
+
+:root:not([data-theme])
   @media (prefers-color-scheme: dark)
     dynamic-theme-dark()
 

package/source/js/main.js

@@ -132,14 +132,105 @@ function smoothScrollTo(targetY) {
 window.addEventListener('wheel', cancelSmoothScroll, { passive: true });
 window.addEventListener('touchstart', cancelSmoothScroll, { passive: true });
 
+// 远程 md（mdrender 服务）渲染完成后重建右栏 TOC：结构与服务端 toc() 输出一致
+let tocClickBound = false;
+function rebuildToc(scope) {
+  const widget = document.querySelector('#data-toc');
+  if (!widget) {
+    return;
+  }
+  const body = widget.querySelector('.widget-body');
+  if (!body) {
+    return;
+  }
+  const article = scope && scope.closest ? scope.closest('article.md-text') : null;
+  const root = article || document.querySelector('article.md-text');
+  if (!root) {
+    return;
+  }
+  const headings = root.querySelectorAll('h1,h2,h3,h4,h5,h6');
+  if (headings.length === 0) {
+    return;
+  }
+  const ol = document.createElement('ol');
+  ol.className = 'toc';
+  const stack = [];
+  headings.forEach(function (h) {
+    const id = h.id;
+    if (!id) {
+      return;
+    }
+    const level = parseInt(h.tagName.substring(1), 10);
+    const li = document.createElement('li');
+    li.className = 'toc-item toc-level-' + level;
+    const a = document.createElement('a');
+    a.className = 'toc-link';
+    a.href = '#' + encodeURIComponent(id);
+    const span = document.createElement('span');
+    span.className = 'toc-text';
+    span.textContent = h.textContent.trim();
+    a.appendChild(span);
+    li.appendChild(a);
+    while (stack.length > 0 && stack[stack.length - 1].level >= level) {
+      stack.pop();
+    }
+    if (stack.length === 0) {
+      ol.appendChild(li);
+    } else {
+      const parent = stack[stack.length - 1];
+      if (!parent.childOl) {
+        parent.childOl = document.createElement('ol');
+        parent.childOl.className = 'toc-child';
+        parent.li.appendChild(parent.childOl);
+      }
+      parent.childOl.appendChild(li);
+    }
+    stack.push({ level: level, li: li });
+  });
+  body.innerHTML = '';
+  body.appendChild(ol);
+  bindTocClick(widget);
+}
+
+function bindTocClick(widget) {
+  if (tocClickBound) {
+    return;
+  }
+  tocClickBound = true;
+  widget.addEventListener('click', function (e) {
+    const link = e.target.closest('a.toc-link');
+    if (!link) {
+      return;
+    }
+    const href = link.getAttribute('href');
+    const id = href && href.indexOf('#') === 0 ? decodeURIComponent(href.slice(1)) : null;
+    const target = id && document.getElementById(id);
+    if (target) {
+      e.preventDefault();
+      const offset = 32;
+      const targetY = target.getBoundingClientRect().top + window.scrollY - offset;
+      smoothScrollTo(targetY);
+      if (window.history && window.history.pushState) {
+        window.history.pushState(null, '', href);
+      }
+    }
+  });
+}
+
+// 远程 md 渲染完成后由页面层重建右栏 TOC
+document.addEventListener('stellar:mdrender', function (e) {
+  rebuildToc(e.detail && e.detail.target);
+});
+
 
 const init = {
   toc: () => {
     const scrollOffset = 32;
     // 滚动位置取整后标题顶可能落在偏移线下方 1~2px，加容差避免高亮回跳到上一条
     const scrollTolerance = 4;
-    var segs = utils.qsa("article.md-text h1, article.md-text h2, article.md-text h3, article.md-text h4, article.md-text h5, article.md-text h6");
     function activeTOC() {
+      // 每次滚动动态查询：远程 md 内容渲染后标题才存在
+      var segs = utils.qsa("article.md-text h1, article.md-text h2, article.md-text h3, article.md-text h4, article.md-text h5, article.md-text h6");
       var scrollTop = window.scrollY;
       var topSeg = null;
       for (var i = 0; i < segs.length; i++) {

package/source/js/services/mdrender.js

@@ -1,12 +1,121 @@
+/* global module */
+/**
+ * mdrender.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
+ *
+ * 远程 Markdown 渲染底层组件的客户端部分：
+ * - 无 data-replace：渲染结果填充进占位元素（容器保留，兼容现状）；
+ * - data-replace="true"：占位元素原地替换为渲染结果（最终 DOM 无外部容器）；
+ * - data-base：相对图片/链接解析到该基址（GitHub 镜像优先）；
+ * - data-heading="true"：标题适配本地文章格式（补 id + headerlink；h1 为页面标题直接隐藏）；
+ * - 渲染完成后派发 stellar:mdrender 事件（detail.target 为渲染后的占位元素），
+ *   页面层（main.js）监听后重建右栏 TOC。
+ */
 (function () {
-  const els = document.getElementsByClassName('ds-mdrender');
-  for (var i = 0; i < els.length; i++) {
-    const el = els[i];
-    const src = `${el.getAttribute('src')}?t=${new Date().getTime()}`;
-    
-    utils.request(el, src, async resp => {
+  'use strict';
+
+  // 与 hexo-util slugize（transform=1）保持一致：去 HTML、转小写、特殊字符转 -、
+  // 连续分隔符合并、首尾分隔符去除（未做 diacritic 归一化，常见标题不受影响）。
+  function slugifyHeading(text) {
+    return String(text)
+      .replace(/<[^>]*>/g, '')
+      // eslint-disable-next-line no-control-regex
+      .replace(/[\u0000-\u001f]/g, '')
+      .replace(/[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g, '-')
+      .replace(/-{2,}/g, '-')
+      .replace(/^-+|-+$/g, '')
+      .toLowerCase();
+  }
+
+  // 标题适配：h1 为页面标题（banner 已展示），直接隐藏不降级；其余标题按序补齐 id（冲突加后缀）
+  function normalizeHeadings(container, usedIds) {
+    const headings = container.querySelectorAll('h1,h2,h3,h4,h5,h6');
+    if (headings.length === 0) {
+      return;
+    }
+    headings.forEach(function (h) {
+      if (h.tagName === 'H1') {
+        h.remove();
+      }
+    });
+    container.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(function (h) {
+      const base = slugifyHeading(h.textContent) || 'section';
+      let id = base;
+      let suffix = 1;
+      while (usedIds.has(id)) {
+        id = base + '-' + suffix;
+        suffix++;
+      }
+      usedIds.add(id);
+      h.id = id;
+      // 与本地 hexo-renderer-marked 输出一致：标题内追加 headerlink 锚点
+      const anchor = document.createElement('a');
+      anchor.setAttribute('href', '#' + id);
+      anchor.className = 'headerlink';
+      anchor.setAttribute('title', h.textContent.trim());
+      h.insertBefore(anchor, h.firstChild);
+    });
+  }
+
+  // 相对图片/链接解析到 data-base（# 锚点、绝对 URL、协议相对地址等不动）
+  function rewriteRelativeUrls(container, base) {
+    container.querySelectorAll('img[src],a[href]').forEach(function (el) {
+      const attr = el.tagName === 'IMG' ? 'src' : 'href';
+      const val = el.getAttribute(attr);
+      if (!val) {
+        return;
+      }
+      if (/^(#|https?:|mailto:|tel:|data:|javascript:)/i.test(val) || val.startsWith('//')) {
+        return;
+      }
+      try {
+        el.setAttribute(attr, new URL(val, base).href);
+      } catch (e) {
+        // 无法解析的相对地址保持原样
+      }
+    });
+  }
+
+  function render(el) {
+    const src = el.getAttribute('src');
+    if (!src) {
+      return;
+    }
+    const url = src + '?t=' + new Date().getTime();
+    utils.request(el, url, async resp => {
       const data = await resp.text();
-      el.innerHTML = marked.parse(data);
+      const tmp = document.createElement('div');
+      tmp.innerHTML = marked.parse(data);
+      const base = el.getAttribute('data-base');
+      if (base) {
+        rewriteRelativeUrls(tmp, base);
+      }
+      if (el.getAttribute('data-heading') === 'true') {
+        const usedIds = new Set();
+        const scope = el.closest('article, .md-text') || document;
+        scope.querySelectorAll('[id]').forEach(function (node) {
+          usedIds.add(node.id);
+        });
+        normalizeHeadings(tmp, usedIds);
+      }
+      if (el.getAttribute('data-replace') === 'true') {
+        el.replaceWith.apply(el, Array.from(tmp.childNodes));
+      } else {
+        el.innerHTML = tmp.innerHTML;
+      }
+      document.dispatchEvent(new CustomEvent('stellar:mdrender', { detail: { target: el } }));
     });
   }
+
+  // Node 单测入口：仅导出纯函数，浏览器环境不命中此分支
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = {
+      slugifyHeading: slugifyHeading
+    };
+    return;
+  }
+
+  const els = document.getElementsByClassName('ds-mdrender');
+  for (var i = 0; i < els.length; i++) {
+    render(els[i]);
+  }
 })();

package/source/js/services/memos.js

@@ -112,6 +112,49 @@
             `<div class="image-bg"><img src="${res.externalLink || `https://${host}/file/${res.name}/${res.filename}`}"></div>`
         )
       },
+      "v1": {
+        buildUser: async (item, memos, default_avatar) => {
+          const creator = item?.creator || '';
+          const creatorId = creator.split('/')[1] || creator;
+          const findUser = () => memos.users.find(user =>
+            (user.name || '').split('/')[1] === creatorId || String(user.id) === creatorId
+          );
+          let user = findUser();
+          if (!user && !memos.requests[creatorId]) {
+            memos.requests[creatorId] = utils.requestWithoutLoading(`${memos.site}/api/v1/users/${encodeURIComponent(creator)}`, { service: 'memos-user' })
+                .then(response => response.json())
+                .then(data => {
+                  if (data.username) {
+                    memos.users.push(data);
+                    user = data;
+                  }
+                })
+                .catch(() => {})
+                .finally(() => delete memos.requests[creatorId]);
+          }
+          if (memos.requests[creatorId]) {
+            await memos.requests[creatorId];
+            user = findUser();
+          }
+          const name = user ? user.displayName || user.username : 'memos';
+          const avatarUrl = user?.avatarUrl
+            ? (user.avatarUrl.startsWith('http') ? user.avatarUrl : `${memos.site}${user.avatarUrl}`)
+            : default_avatar || '';
+          return `<div class="user-info">${avatarUrl ? `<img src="${avatarUrl}">` : ''}<span>${name}</span></div>`;
+        },
+        buildDate: item => {
+          const d = new Date(item.createTime);
+          return isNaN(d.getTime()) ? new Date() : d;
+        },
+        buildImages: (item, host) => {
+          const list = (item.attachments || item.resources || []).filter(res =>
+            res && res.type && String(res.type).includes('image/')
+          );
+          return list.map(res =>
+            `<div class="image-bg"><img src="${res.externalLink || res.url || `https://${host}/file/${res.name}/${res.filename}`}"></div>`
+          );
+        }
+      },
       "feature": {
         buildUser: async () => "memos",
         buildDate: () => new Date(),
@@ -123,14 +166,23 @@
           memos.version = "22-";
           memos.data = data;
           console.log("当前Memos版本为22-");
-        } else if (data.memos && !data.memos[0].attachments) {
-          memos.version = "22+";
-          memos.data = data.memos;
-          console.log("当前Memos版本为22+");
-        } else if (data.memos && data.memos[0].attachments) {
-          memos.version = "25+";
-          memos.data = data.memos;
-          console.log("当前Memos版本为25+");
+        } else if (data && Array.isArray(data.memos) && data.memos.length > 0) {
+          const first = data.memos[0];
+          const creatorId = String(first.creator || '').split('/')[1] || '';
+          const isV1 = first.createTime != null && creatorId.length > 0 && !/^\d+$/.test(creatorId);
+          if (isV1) {
+            memos.version = "v1";
+            memos.data = data.memos;
+            console.log("当前Memos版本为v1");
+          } else if (first.attachments) {
+            memos.version = "25+";
+            memos.data = data.memos;
+            console.log("当前Memos版本为25+");
+          } else {
+            memos.version = "22+";
+            memos.data = data.memos;
+            console.log("当前Memos版本为22+");
+          }
         } else {
           memos.version = "feature";
           console.log("当前Memos版本过高，请到Stellar社区反馈");

package/source/js/services/waline_latest_comment.js

@@ -10,7 +10,9 @@
         const api = apiBase + '/comment?type=recent&count=' + limit;
         const default_avatar = def.avatar;
         utils.request(el, api, async resp => {
-          const data = await resp.json();
+          const payload = await resp.json();
+          // 兼容旧版数组与新版 { data: [...] } 返回结构（#630）
+          const data = Array.isArray(payload) ? payload : (payload && Array.isArray(payload.data) ? payload.data : []);
           data.forEach((item, i) => {
             var cell = '<div class="timenode" index="' + i + '">';
             cell += '<div class="header">';