hexo-theme-stellar 1.42.0 → 1.43.0

package/layout/archive.ejs

@@ -24,34 +24,25 @@ function layoutArchiveList() {
   }
   el += `<div class="post-list${cls} archives">`
   var years = []
-  const posts = page.author != null ? site.posts.filter(p => (p.author || theme.default_author.id) == page.author.id) : site.posts
+  var posts = page.author != null ? site.posts.filter(function(post) {
+    return (post.author || theme.default_author.id) == page.author.id
+  }) : site.posts
   posts.sort('date', -1).each(function(post) {
-  	post.year = date(post.date, 'YYYY')
-  	  if (post.year && (years.includes(post.year) == false) && (post.title || post.date)) {
-  		  years.push(post.year)
+    post.year = date(post.date, 'YYYY')
+    if (post.year && (years.includes(post.year) == false) && (post.title || post.date)) {
+      years.push(post.year)
     }
   })
-  for (let year of years) {
+  for (var year of years) {
     el += `<article class="${scrollreveal('')}" id="archive">`
-  	el += `<div class='archive-header h4'>${year}</div>`
+    el += `<div class='archive-header h4'>${year}</div>`
     posts.sort('date', -1).filter(function (post) {
       post.year = date(post.date, 'YYYY')
       return post.year == year
     }).each(function(post) {
-      el += `<div class="archive-list">`
-      el +=`<a class='post fs14' href="${pretty_url(post.link || post.path)}">`
-      el += `<time>${date(post.date, 'MM-DD')}</time>`
-      el += `<span>`
-      if (post.title) {
-        el += post.title
-      } else if (post.date) {
-        el += date(post.date, config.date_format)
-      }
-      el += `</span>`
-      el += `</a>`
-      el += `</div>`
+      el += partial('_partial/main/post_list/archive_item', {post: post})
     })
-  	el += `</article>`
+    el += `</article>`
   }
   el += `</div>`
   return el
@@ -65,4 +56,4 @@ function layoutDiv() {
 }
 %>
  
-<%- layoutDiv() %>
+<%- layoutDiv() %>

package/layout/collection-preview.ejs

@@ -0,0 +1,60 @@
+<%
+function renderCollection(options) {
+  return partial('_partial/components/collection', {options: options})
+}
+
+function renderWidget(title, options) {
+  return partial('_partial/components/widget-frame', {
+    title: title,
+    body: renderCollection(options),
+    reveal: false
+  })
+}
+
+function renderSurface(name, surface, width) {
+  var navItems = [
+    {href: '#active', title: '当前页面', icon: 'default:documents', active: true},
+    {href: '#long', title: '这是一个用于检查单行省略和容器适应性的很长标题', icon: 'default:rightbar'},
+    {href: '#plain', title: '无图标条目'}
+  ]
+  var gridItems = [
+    {href: '#one', title: '项目一', icon: 'default:documents', active: true},
+    {href: '#two', title: '项目二', icon: 'default:rightbar'},
+    {href: '#three', title: '项目三', icon: 'default:github'},
+    {href: '#four', title: '项目四', icon: 'default:rss'}
+  ]
+  var summaryItems = [
+    {href: '#summary-one', title: '摘要条目', description: '两行说明用于检查文字层级、截断和不同 surface 下的卡片填充。'},
+    {href: '#summary-two', title: '第二个摘要条目', description: '正文宽度下仍复用同一 DOM 与状态变量。'}
+  ]
+  var treeItems = [
+    {href: '#root', title: '一级节点', active: true},
+    {href: '#child', title: '二级节点', depth: 1, indicator: false},
+    {href: '#leaf', title: '三级节点', depth: 2, indicator: false}
+  ]
+  var html = '<section class="collection-preview__surface" data-ui-surface="' + surface + '" data-preview-width="' + width + '">'
+  html += '<header><strong>' + escape_html(name) + '</strong><code>' + escape_html(surface) + ' · ' + width + 'px</code></header>'
+  html += renderWidget('紧凑列表', {layout: 'list', variant: 'nav', density: 'compact', items: navItems})
+  html += renderWidget('响应式网格', {layout: 'grid', variant: 'nav', columns: 2, items: gridItems})
+  html += renderWidget('摘要列表', {layout: 'list', variant: 'summary', items: summaryItems})
+  html += renderWidget('层级列表', {layout: 'list', variant: 'nav', density: 'compact', items: treeItems})
+  html += '</section>'
+  return html
+}
+%>
+<article class="md-text collection-preview">
+  <h1>侧边栏集合组件预览</h1>
+  <p>此开发页面用于同时检查列表、网格和摘要条目在四种 surface、不同容器宽度及明暗主题下的表现。</p>
+  <div class="collection-preview__theme" aria-label="预览主题">
+    <span>预览主题</span>
+    <button type="button" onclick="document.documentElement.setAttribute('data-theme','light')">Light</button>
+    <button type="button" onclick="document.documentElement.setAttribute('data-theme','dark')">Dark</button>
+    <button type="button" onclick="document.documentElement.removeAttribute('data-theme')">Auto</button>
+  </div>
+  <div class="collection-preview__grid">
+    <%- renderSurface('左栏 Glass', 'glass', 240) %>
+    <%- renderSurface('左栏 Card', 'card', 240) %>
+    <%- renderSurface('右侧栏', 'sidebar', 320) %>
+    <%- renderSurface('正文区域', 'content', 720) %>
+  </div>
+</article>

package/layout/index_topic.ejs

@@ -1,12 +1,18 @@
 <%
 function layout_topic_list(partial) {
   var el = ''
-  const { publish_list, tree } = theme.topic
-  for (let id of publish_list) {
-    const topic = tree[id]
-    if (topic == null) {
-      continue
-    }
+  var publish_list = theme.topic.publish_list
+  var tree = theme.topic.tree
+  var topics = publish_list.map(function(id) {
+    return tree[id]
+  }).filter(function(topic) {
+    return topic != null
+  }).sort(function(a, b) {
+    var aDate = a.homepage && a.homepage.date ? new Date(a.homepage.date).getTime() : 0
+    var bDate = b.homepage && b.homepage.date ? new Date(b.homepage.date).getTime() : 0
+    return bDate - aDate
+  })
+  for (var topic of topics) {
     el += `<div class="post-card-wrap${scrollreveal(' ')}">`
     el += `<div class="post-card topic">`
     el += partial(topic)

package/layout/index_wiki.ejs

@@ -13,14 +13,22 @@ function layout_wiki_list(partial) {
     if (page.filter === false) {
       // wikiList
       el += `<div class="post-card-wrap${scrollreveal(' ')}">`
-      el += `<a class="post-card wiki" href="${pretty_url(proj.homepage?.path || '/')}">`
+      var coverStyle = ''
+      if (proj.cover) {
+        coverStyle = ` style="--cover-url:url('${escape_html(proj.cover.replace(/'/g, '%27'))}')"`
+      }
+      el += `<a class="wiki-card${proj.cover ? '' : ' no-cover'}"${coverStyle} href="${pretty_url(proj.homepage?.path || '/')}">`
       el += partial(proj)
       el += `</a>`
       el += `</div>`
     } else if (proj.tags && proj.tags.includes(page.tagName) === true) {
       // filtered wikiList
       el += `<div class="post-card-wrap${scrollreveal(' ')} filter">`
-      el += `<a class="post-card wiki" href="${pretty_url(proj.homepage?.path || '/')}">`
+      var coverStyle = ''
+      if (proj.cover) {
+        coverStyle = ` style="--cover-url:url('${escape_html(proj.cover.replace(/'/g, '%27'))}')"`
+      }
+      el += `<a class="wiki-card${proj.cover ? '' : ' no-cover'}"${coverStyle} href="${pretty_url(proj.homepage?.path || '/')}">`
       el += partial(proj)
       el += `</a>`
       el += `</div>`
@@ -41,4 +49,42 @@ function layoutDiv() {
 }
 %>
 
-<%- layoutDiv() %>
+<%- layoutDiv() %>
+<script>
+  // Wiki 覆盖层须同时等待封面原图和平均主题色完成，避免默认主题色短暂闪现。
+  function revealWikiCover(card) {
+    if (card._wikiImageReady && card._wikiOverlayReady && !card.classList.contains('no-cover')) {
+      card.classList.add('cover-loaded');
+    }
+  }
+  document.addEventListener('wiki-overlay-ready', function(event) {
+    var card = event.target.closest('.wiki-card');
+    if (!card) return;
+    card._wikiOverlayReady = true;
+    revealWikiCover(card);
+  });
+  document.querySelectorAll('.wiki-card-cover:not(.no-cover) > img').forEach(function(img) {
+    var cover = img.parentElement;
+    var card = img.closest('.wiki-card');
+    if (!cover || !card) return;
+    var loaded = function() {
+      card._wikiImageReady = true;
+      revealWikiCover(card);
+    };
+    var failed = function() {
+      card._wikiImageReady = false;
+      card.classList.remove('cover-loaded');
+      card.classList.add('no-cover');
+      cover.classList.add('no-cover', 'cover-error');
+    };
+    img.addEventListener('load', loaded, { once: true });
+    img.addEventListener('error', failed, { once: true });
+    if (img.complete) {
+      if (img.naturalWidth > 0) {
+        loaded();
+      } else {
+        failed();
+      }
+    }
+  });
+</script>

package/layout/layout.ejs

@@ -49,19 +49,20 @@ if (theme.style.prefers_theme === 'auto') {
     html += site_background
     html += `<div id="l_cover">${partial('_partial/cover/index').trim()}</div>`
     html += `<div class="l_body ${page_type}" id="start" layout="${page.layout}" type="${article_type}" ${indent ? 'text-indent' : ''}>`
-      html += `<aside class="l_left${theme.style.leftbar?.['ui-style'] === 'card' ? ' leftbar-card' : ''}">`
+      var leftbarSurface = theme.style.leftbar?.['ui-style'] === 'card' ? 'card' : 'glass'
+      html += `<aside class="l_left${leftbarSurface === 'card' ? ' leftbar-card' : ''}" data-ui-surface="${leftbarSurface}">`
         html += `<div class="sidebg"></div>`
         html += `<div class="leftbar-container${theme.style.leftbar?.blur ? ' leftbar-blur' : ''}">`
           html += partial('_partial/sidebar/index_leftbar')
         html += `</div>`
       html += `</aside>`
-      html += `<div class="l_main" id="main">`
+      html += `<div class="l_main" id="main" data-ui-surface="content">`
         html += partial('_partial/sidebar/logo', {where: 'main'})
         html += body
         html += partial('_partial/main/footer')
         html += `<div class="main-mask" onclick="sidebar.dismiss()"></div>`
       html += `</div>`
-      html += `<aside class="l_right">`
+      html += `<aside class="l_right" data-ui-surface="sidebar">`
         html += partial('_partial/sidebar/index_rightbar').trim()
       html += `</aside>`
       html += partial('_partial/menubtn')

package/package.json

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

package/scripts/events/index.js

@@ -41,7 +41,6 @@ hexo.on('ready', () => {
   checkVersion(hexo, { useCache: true });
 });
 
-
 // 防止重复注册
 let hasRun = false;
 
@@ -66,4 +65,3 @@ hexo.extend.filter.register('before_generate', async () => {
     fixMarkdownImages(hexo); // 不用 await，因为是同步的
   }
 });
-

package/scripts/filters/lib/img_lazyload.js

@@ -1,56 +1,200 @@
 /**
- * img_lazyload.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * img_lazyload.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
  *
+ * 懒加载强制开启：不再读取 enable 配置，no-lazy 是唯一例外。
+ * v2：改为属性感知的 <img> 标签解析，仅在标签自身范围内读取 src，
+ * 并跳过 <script>/<style>/<!-- --> 区域，避免与「去属性引号」的 HTML
+ * 压缩器（如 hexo-minify removeAttributeQuotes）组合时正则跨标签越界，
+ * 误改写页内内联脚本中的 `s.src = "..."`。
  */
 
-'use strict';
+"use strict";
 
-// 懒加载强制开启：不再读取 enable 配置，no-lazy 是唯一例外
-function lazyProcess(htmlContent) {
-  // 短路：无 <img 的页面（如 404）无需正则扫描
-  if (typeof htmlContent !== 'string' || !/<img/i.test(htmlContent)) {
-    return htmlContent;
+// 1×1 透明 PNG：懒加载占位图
+const LOADING_IMG =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAADa6r/EAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=";
+
+// 解析 <img ...> 标签内部属性，返回 [{name, value, raw, start, end}]
+function parseAttrs(inner) {
+  const attrs = [];
+  const re = /([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;
+  let m;
+  while ((m = re.exec(inner)) !== null) {
+    attrs.push({
+      name: m[1].toLowerCase(),
+      value: m[2] !== undefined ? m[2] : m[3] !== undefined ? m[3] : m[4] !== undefined ? m[4] : null,
+      raw: m[0],
+      start: m.index,
+      end: m.index + m[0].length,
+    });
+  }
+  return attrs;
+}
+
+// 处理单个 <img> 标签：加 lazy 类并替换 src 为占位图 + data-src
+function processImgTag(imgTag) {
+  // 快速跳过：整标签已含懒加载标记 / 原生 srcset / no-lazy（兼容压缩前后写法）
+  if (/data-src/gi.test(imgTag)) {
+    return imgTag;
+  }
+  if (/srcset=/gi.test(imgTag)) {
+    return imgTag;
+  }
+  if (/\bno-lazy\b/gi.test(imgTag)) {
+    return imgTag;
+  }
+
+  const selfClosing = /\/>$/.test(imgTag);
+  const inner = imgTag.slice(4, selfClosing ? imgTag.length - 2 : imgTag.length - 1);
+  const attrs = parseAttrs(inner);
+  const src = attrs.find((a) => a.name === "src");
+  // 无 src / 空 src / 已是占位图（data:image）时不处理
+  if (!src || src.value == null || src.value === "" || /^data:image/i.test(src.value)) {
+    return imgTag;
   }
-  return htmlContent.replace(/<img(.*?)src="(.*?)"(.*?)>/gi, function(imgTag, src_before, src_value, src_after) {
-    // 已由 tag 插件输出懒加载标记（data-src / data-srcset）的图片不重复处理
-    if (/data-src/gi.test(imgTag)) {
-      return imgTag;
+
+  const classAttr = attrs.find((a) => a.name === "class");
+  const oldClass = classAttr && classAttr.value != null ? classAttr.value : "";
+  const newClass = (oldClass ? oldClass + " " : "") + "lazy";
+
+  let out = "<img";
+  if (!classAttr) {
+    out += ' class="' + newClass + '"';
+  }
+  let pos = 0;
+  for (const a of attrs) {
+    out += inner.slice(pos, a.start);
+    if (a.name === "src") {
+      out += 'src="' + LOADING_IMG + '" data-src="' + src.value + '"';
+    } else if (a.name === "class") {
+      out += 'class="' + newClass + '"';
+    } else {
+      out += a.raw;
     }
-    // 使用 srcset 的图片交给浏览器原生处理，避免占位图与 srcset 冲突
-    if (/srcset=/gi.test(imgTag)) {
-      return imgTag;
+    pos = a.end;
+  }
+  out += inner.slice(pos);
+  out += selfClosing ? "/>" : ">";
+  return out;
+}
+
+// 查找标签结束位置（尊重属性值内的引号，避免把 > 截断进属性值）
+function findTagEnd(html, start) {
+  let j = start;
+  let quote = null;
+  while (j < html.length) {
+    const ch = html[j];
+    if (quote) {
+      if (ch === quote) {
+        quote = null;
+      }
+    } else if (ch === '"' || ch === "'") {
+      quote = ch;
+    } else if (ch === ">") {
+      return j;
     }
-    if (/src="data:image(.*?)/gi.test(imgTag)) {
-      return imgTag;
+    j++;
+  }
+  return -1;
+}
+
+function isTagBoundary(html, pos) {
+  if (pos >= html.length) {
+    return true;
+  }
+  const ch = html[pos];
+  return ch === " " || ch === "\t" || ch === "\n" || ch === "\r" || ch === ">" || ch === "/";
+}
+
+// 全页扫描：只在真实 <img> 标签上做懒加载，跳过脚本/样式/注释内容
+function processHtml(html) {
+  const parts = [];
+  let i = 0;
+  const n = html.length;
+  const lower = html.toLowerCase();
+  while (i < n) {
+    const ch = html[i];
+    if (ch !== "<") {
+      parts.push(ch);
+      i++;
+      continue;
     }
-    // no-lazy 兼容 `no-lazy` / `no-lazy=""` 两种写法
-    if (/\bno-lazy\b/gi.test(imgTag)) {
-      return imgTag;
+    // HTML 注释
+    if (html.startsWith("<!--", i)) {
+      const end = html.indexOf("-->", i);
+      if (end === -1) {
+        break;
+      }
+      parts.push(html.slice(i, end + 3));
+      i = end + 3;
+      continue;
     }
-    var newImgTag = imgTag;
-    if (newImgTag.includes(' class="') == false) {
-      newImgTag = newImgTag.slice(0,4) + ' class=""' + newImgTag.slice(4);
+    // <script>…</script>：整段跳过，避免误处理模板字符串/字符串里的 <img
+    if (lower.startsWith("<script", i) && isTagBoundary(html, i + 7)) {
+      const end = findTagEnd(html, i);
+      if (end === -1) {
+        break;
+      }
+      parts.push(html.slice(i, end + 1));
+      i = end + 1;
+      const close = lower.indexOf("</script", i);
+      if (close === -1) {
+        break;
+      }
+      const closeEnd = html.indexOf(">", close);
+      if (closeEnd === -1) {
+        break;
+      }
+      parts.push(html.slice(i, closeEnd + 1));
+      i = closeEnd + 1;
+      continue;
     }
-    // class 中增加 lazy
-    newImgTag = newImgTag.replace(/(.*?) class="(.*?)" (.*?)>/gi, function(ori, before, value, after){
-      var newClass = value;
-      if (newClass.length > 0) {
-        newClass += ' ';
-      }
-      newClass += 'lazy';
-      if (value) {
-        return ori.replace('class="' + value, 'class="' + newClass);
-      } else {
-        return ori.replace('class="', 'class="' + newClass);
+    // <style>…</style>：整段跳过
+    if (lower.startsWith("<style", i) && isTagBoundary(html, i + 6)) {
+      const end = findTagEnd(html, i);
+      if (end === -1) {
+        break;
       }
-    });
-    // 加载图
-    const loadingImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAADa6r/EAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=';
-    newImgTag = newImgTag.replace(src_value, loadingImg + '" data-src="' + src_value);
-    return newImgTag;
-  });
+      parts.push(html.slice(i, end + 1));
+      i = end + 1;
+      const close = lower.indexOf("</style", i);
+      if (close === -1) {
+        break;
+      }
+      const closeEnd = html.indexOf(">", close);
+      if (closeEnd === -1) {
+        break;
+      }
+      parts.push(html.slice(i, closeEnd + 1));
+      i = closeEnd + 1;
+      continue;
+    }
+    // <img …>
+    if (lower.startsWith("<img", i) && isTagBoundary(html, i + 4)) {
+      const end = findTagEnd(html, i);
+      if (end === -1) {
+        break;
+      }
+      parts.push(processImgTag(html.slice(i, end + 1)));
+      i = end + 1;
+      continue;
+    }
+    parts.push(ch);
+    i++;
+  }
+  return parts.join("");
+}
+
+function lazyProcess(htmlContent) {
+  // 短路：无 <img 的页面（如 404）无需扫描
+  if (typeof htmlContent !== "string" || !/<img/i.test(htmlContent)) {
+    return htmlContent;
+  }
+  return processHtml(htmlContent);
 }
 
-module.exports.processSite = function(htmlContent) {
+module.exports.processSite = function (htmlContent) {
   return lazyProcess.call(this, htmlContent);
 };
+
+module.exports.lazyProcess = lazyProcess;

package/scripts/generators/stellar-icons.js

@@ -5,7 +5,7 @@
 // 与 layout/_partial/scripts/defines.ejs 中旧的白名单保持一致（客户端通过 ctx.icons 读取）。
 hexo.extend.generator.register('stellar_icons', function () {
   const icons = (this.theme.config && this.theme.config.icons) || {};
-  const keys = ['default:tocomment', 'default:loading-spinner', 'default:warning', 'weibo:repeat', 'weibo:like'];
+  const keys = ['default:tocomment', 'default:warning', 'weibo:repeat', 'weibo:like'];
   const out = {};
   // 去除 SVG 注释（避免 <!-- / </script> 解析风险），再转义 <
   for (const k of keys) {

package/scripts/lib/subtitle.js

@@ -3,12 +3,16 @@
 const { stripHTML } = require('hexo-util');
 
 // 文章一行小字取值（hero 卡片与置顶轮播共用，未来可复用于其它场景）：
-// subtitle > description > excerpt/content 前 length 字（去 HTML、压缩空白、截断；省略号由 CSS 单行处理），空则返回空串。
+// subtitle（含 " | " 时取非空左侧）> description > excerpt/content 前 length 字（去 HTML、压缩空白、截断；省略号由 CSS 单行处理），空则返回空串。
 function subtitle(post, length = 50) {
   if (post == null) {
     return '';
   }
   if (post.subtitle != null && String(post.subtitle).length > 0) {
+    const separator = String(post.subtitle).indexOf(' | ');
+    if (separator > 0) {
+      return String(post.subtitle).slice(0, separator);
+    }
     return post.subtitle;
   }
   if (post.description != null && String(post.description).length > 0) {

package/scripts/tags/index.js

@@ -12,6 +12,7 @@ hexo.extend.tag.register('grid', require('./lib/grid')(hexo), true)
 hexo.extend.tag.register('swiper', require('./lib/swiper')(hexo), true)
 hexo.extend.tag.register('gallery', require('./lib/gallery')(hexo), {ends: true})
 hexo.extend.tag.register('banner', require('./lib/banner')(hexo), true)
+hexo.extend.tag.register('dropdown', require('./lib/dropdown')(hexo), true)
 
 // data
 hexo.extend.tag.register('users', require('./lib/friends')(hexo))

package/scripts/tags/lib/about.js

@@ -18,7 +18,7 @@ module.exports = ctx => function(args, content) {
   el += '<div class="tag-plugin about">'
   if (args.back) {
     el += '<a class="nav-back cap" href="' + url_for(ctx.config.root) + '">'
-    el += ctx.utils.icon('default:goback')
+    el += ctx.utils.icon('default:arrow-left')
     el += '</a>'
   }
   // avatar

package/scripts/tags/lib/albums.js

@@ -32,7 +32,7 @@ module.exports = ctx => function(args) {
         el += `<div class="grid-cell album-card">`
         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 || ctx.utils.iconData('default:loading-placeholder')});"></div>`
+        el += `<div class="lazy-icon"></div>`
         el += `<div class="image-meta">`
         if (item.title) {
           el += `<span class="image-caption">${item.title}</span>`

package/scripts/tags/lib/banner.js

@@ -26,7 +26,7 @@ module.exports = ctx => function(args, content) {
   } else {
     el += `
     <button class="back cap" onclick="window.history.back()">
-      ${ctx.utils.icon('default:goback')}
+      ${ctx.utils.icon('default:arrow-left')}
     </button>
     `
   }

package/scripts/tags/lib/dropdown.js

@@ -0,0 +1,64 @@
+/**
+ * dropdown.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ *
+ * {% dropdown [direction:up/down] [align:left/right] title %}
+ * - icon:key [title](url)
+ * {% enddropdown %}
+ */
+
+'use strict'
+
+function parseItem(line) {
+  const matches = line.match(/^\s*(?:[-*]\s+)?(?:icon:([^\s]+)\s+)?\[([^\]]+)\]\(([^)\s]+)\)(?:\s+icon:([^\s]+))?\s*$/)
+  if (!matches) {
+    return null
+  }
+  return {
+    icon: matches[1] || matches[4],
+    title: matches[2],
+    url: matches[3]
+  }
+}
+
+module.exports = ctx => function(args, content = '') {
+  const { escapeHTML, url_for } = require('hexo-util')
+  args = ctx.args.map(args, ['icon', 'direction', 'align', 'open'], ['title'])
+  if (!args.title) {
+    return ''
+  }
+
+  const items = content.split(/\r?\n/).map(parseItem).filter(Boolean)
+  if (items.length === 0) {
+    return ''
+  }
+
+  const direction = ['up', 'down'].includes(args.direction) ? args.direction : 'auto'
+  const align = ['left', 'right'].includes(args.align) ? args.align : 'auto'
+  const title = escapeHTML(args.title)
+  const toUrl = url_for.bind(ctx)
+  var el = `<details class="tag-plugin dropdown" direction="${direction}" align="${align}"`
+  if (args.open === 'true') {
+    el += ' open'
+  }
+  el += '>'
+  el += `<summary class="dropdown-trigger" title="${title}" aria-label="${title}">`
+  el += `<span>${title}</span>`
+  el += '<svg class="dropdown-arrow" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+  el += '</summary>'
+  el += '<div class="dropdown-menu ui-collection" data-ui-surface="glass" data-layout="list" data-variant="nav" data-density="compact">'
+  for (const item of items) {
+    const url = String(item.url)
+    el += `<a class="dropdown-item ui-collection__item" href="${escapeHTML(toUrl(url))}`
+    if (url.includes('://')) {
+      el += '" target="_blank" rel="external nofollow noopener noreferrer">'
+    } else {
+      el += '" rel="noopener noreferrer">'
+    }
+    if (item.icon) {
+      el += `<span class="ui-collection__leading">${ctx.utils.icon(item.icon, 'no-lazy', true)}</span>`
+    }
+    el += `<span class="ui-collection__content"><span class="ui-collection__title">${escapeHTML(item.title)}</span></span></a>`
+  }
+  el += '</div></details>'
+  return el
+}

package/scripts/tags/lib/friends.js

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