hexo-theme-stellar 1.42.1 → 1.43.0

package/layout/_partial/dropdown.ejs

@@ -0,0 +1,62 @@
+<%
+const dropdownItem = typeof item !== 'undefined' && item ? item : {}
+const items = Array.isArray(dropdownItem.items) ? dropdownItem.items.filter(child => child && child.title && child.url) : []
+const classes = ['dropdown']
+const dropdownRootClass = typeof rootClass === 'string' ? rootClass : ''
+if (dropdownRootClass) {
+  classes.push(dropdownRootClass)
+}
+const triggerClasses = ['dropdown-trigger']
+const dropdownTriggerClass = typeof triggerClass === 'string' ? triggerClass : ''
+if (dropdownTriggerClass) {
+  triggerClasses.push(dropdownTriggerClass)
+}
+const dropdownDirection = typeof direction === 'string' ? direction : ''
+const dropdownShowTitle = typeof showTitle === 'undefined' || showTitle !== false
+
+function linkAttrs(child) {
+  const url = String(child.url)
+  var attrs = ' href="' + escape_html(url_for(url)) + '"'
+  if (url.includes('://')) {
+    attrs += ' target="_blank" rel="external nofollow noopener noreferrer"'
+  } else {
+    attrs += ' rel="noopener noreferrer"'
+  }
+  return attrs
+}
+
+function layoutDiv() {
+  if (!dropdownItem.icon || items.length === 0) {
+    return ''
+  }
+  const title = dropdownItem.title ? escape_html(dropdownItem.title) : ''
+  var el = '<details class="' + classes.join(' ') + '"'
+  if (dropdownDirection) {
+    el += ' direction="' + escape_html(dropdownDirection) + '"'
+  }
+  el += '>'
+  el += '<summary class="' + triggerClasses.join(' ') + '"'
+  if (title) {
+    el += ' title="' + title + '" aria-label="' + title + '"'
+  }
+  el += '>'
+  // dropdown 首次展开时需要立即显示图标，使用内联 SVG 避免 /js/icons.js 异步替换造成闪烁。
+  el += icon(dropdownItem.icon, 'no-lazy', true)
+  if (dropdownShowTitle && dropdownItem.title) {
+    el += '<span>' + title + '</span>'
+  }
+  el += '</summary>'
+  el += '<div class="dropdown-menu ui-collection" data-ui-surface="glass" data-layout="list" data-variant="nav" data-density="compact">'
+  for (let child of items) {
+    el += '<a class="dropdown-item ui-collection__item"' + linkAttrs(child) + '>'
+    if (child.icon) {
+      el += '<span class="ui-collection__leading">' + icon(child.icon, 'no-lazy', true) + '</span>'
+    }
+    el += '<span class="ui-collection__content"><span class="ui-collection__title">' + escape_html(child.title) + '</span></span>'
+    el += '</a>'
+  }
+  el += '</div></details>'
+  return el
+}
+%>
+<%- layoutDiv() %>

package/layout/_partial/head.ejs

@@ -237,6 +237,15 @@ function generate_canonical() {
         const raw = theme.icons && theme.icons[key];
         if (raw) vars.push(`  ${name}: url("data:image/svg+xml,${encodeURIComponent(raw)}");`);
       }
+      // 加载占位：由 icons.yml 的 default:loading 提供（内联 SVG 编码为 data URI，URL 直用）
+      const loadingRaw = theme.icons && theme.icons['default:loading'];
+      if (loadingRaw) {
+        if (loadingRaw.trim().startsWith('<svg')) {
+          vars.push(`  --icon-loading: url("data:image/svg+xml,${encodeURIComponent(loadingRaw)}");`);
+        } else {
+          vars.push(`  --icon-loading: url("${loadingRaw}");`);
+        }
+      }
       return vars.length > 0 ? `:root {\n${vars.join('\n')}\n}` : '';
     })();
   %>

package/layout/_partial/main/navbar/breadcrumb/blog.ejs

@@ -31,4 +31,4 @@ function layoutDiv() {
   return el
 }
 %>
-<%- layoutDiv() %>
+<%- layoutDiv() %>

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

@@ -0,0 +1,12 @@
+<%
+var item = post || {};
+var href = pretty_url(item.link || item.path || '/');
+var itemDate = item.date ? date(item.date, 'MM-DD') : '';
+var itemTitle = item.title || (item.date ? date(item.date, config.date_format) : '');
+%>
+<div class="archive-list">
+  <a class="post fs14" href="<%- escape_html(href) %>">
+    <% if (itemDate) { %><time><%- escape_html(itemDate) %></time><% } %>
+    <span><%- escape_html(itemTitle) %></span>
+  </a>
+</div>

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

@@ -17,17 +17,29 @@ function layoutDiv() {
     background: bg,
     post: latest
   });
-  // 其他文章（排除最新，最多 3 条，按发布时间倒序）
+  // 其他文章（排除最新，默认展示 3 条，剩余文章可展开）
   if (topic.pages && topic.pages.length > 1) {
-    el += '<div class="post-panel">';
-    el += '<div class="posts">';
-    topic.pages.slice(1, 4).forEach(function(post) {
-      el += '<a class="post-link" href="' + pretty_url(post.path) + '">';
-      el += '<span class="title">' + escape_html(post.title) + '</span>';
-      el += '<span class="date">' + escape_html(date(post.date, config.date_format)) + '</span>';
-      el += '</a>';
+    var otherPosts = topic.pages.slice(1);
+    var visiblePosts = otherPosts.slice(0, 3);
+    var hiddenPosts = otherPosts.slice(3);
+    el += '<div class="topic-posts">';
+    visiblePosts.forEach(function(post) {
+      el += partial('_partial/main/post_list/archive_item', {post: post});
     });
-    el += '</div>';
+    if (hiddenPosts.length > 0) {
+      el += '<details class="topic-posts-more">';
+      el += '<summary class="topic-posts-toggle">';
+      el += '<span class="when-closed">' + escape_html(__('btn.expand_posts', hiddenPosts.length)) + '</span>';
+      el += '<span class="when-open">' + escape_html(__('btn.collapse_posts')) + '</span>';
+      el += icon('default:arrow-right', '', true);
+      el += '</summary>';
+      el += '<div class="topic-posts-extra">';
+      hiddenPosts.forEach(function(post) {
+        el += partial('_partial/main/post_list/archive_item', {post: post});
+      });
+      el += '</div>';
+      el += '</details>';
+    }
     el += '</div>';
   }
   el += '</article>';

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

@@ -1,21 +1,60 @@
 <%
 function layoutDiv() {
   var el = '';
-  el += '<article class="md-text">';
-  el += `<div class="preview"><img src="${proj.icon ? proj.icon : theme.default.project}"/></div>`
-  el += '<div class="excerpt">';
+  var cover = proj.cover;
+  var projectIcon = proj.icon;
+  var caption = subtitle(proj);
+  var headline = proj.headline || proj.title || proj.name || '';
+  el += '<article class="wiki-card-content">';
+  el += '<div class="wiki-card-cover' + (cover ? '' : ' no-cover') + '" position="bottom"';
+  if (cover) {
+    el += ' style="--cover-url:url(\'' + escape_html(cover.replace(/'/g, '%27')) + '\')">';
+    el += '<img src="' + escape_html(cover) + '" alt=""/>';
+  } else {
+    el += '>';
+  }
+  el += '<div class="wiki-card-info" position="bottom"';
+  if (cover) {
+    el += ' data-text-adaptive="split"';
+  }
+  el += '>';
+  el += '<div class="wiki-card-summary">';
   if (proj.tags && proj.tags.length > 0) {
-    el += '<div class="caps">';
-      for (let tag of proj.tags) {
-        el += '<span class="cap breadcrumb"' + category_color(tag) + '>' + tag + '</span>';
-      }
+    el += '<div class="wiki-tags wiki-meta">';
+    for (var i = 0; i < proj.tags.length; i++) {
+      var tag = proj.tags[i];
+      el += '<span>' + escape_html(tag) + '</span>';
+    }
+    el += '</div>';
+  }
+  el += '<h2 class="headline">' + escape_html(headline) + '</h2>';
+  if (proj.available || proj.repo) {
+    el += '<div class="wiki-meta">';
+    if (proj.available) {
+      el += '<span class="wiki-available">' + icon('default:platforms') + '<span class="label">' + escape_html(__('meta.available')) + '</span><span class="value">' + escape_html(proj.available) + '</span></span>';
+    }
+    if (proj.repo) {
+      el += '<span class="wiki-stars data-service ds-ghinfo" data-api="https://' + theme.api_host.ghapi + '/repos/' + escape_html(proj.repo) + '">';
+      el += icon('default:fire') + '<span type="text" id="stargazers_count"></span>';
+      el += '</span>';
+    }
     el += '</div>';
   }
-  el += '<h2 class="post-title">' + (proj.title || proj.name) + '</h2>';
-  if (proj.description) {
-    el += '<p>' + proj.description + '</p>';
+  el += '</div>';
+  el += '<div class="wiki-project">';
+  el += '<div class="project-icon">';
+  if (projectIcon) {
+    el += '<img src="' + escape_html(projectIcon) + '" alt=""/>';
+  } else {
+    el += icon('default:documents');
   }
   el += '</div>';
+  el += '<div class="project-text"><div class="project-name">' + escape_html(proj.name || proj.title || '') + '</div>';
+  if (caption.length > 0) {
+    el += '<div class="project-subtitle">' + escape_html(caption) + '</div>';
+  }
+  el += '</div></div>';
+  el += '</div></div>';
   el += '</article>';
   return el;
 }

package/layout/_partial/scripts/defines.ejs

@@ -17,8 +17,6 @@
   }
   (function() {
     const scrollHandler = () => {
-      const wikiCover = document.querySelector('#l_cover .l_cover.wiki');
-      const startEl = document.getElementById('start');
       // 存在有效锚点时，等待布局稳定后滚动到目标
       // （浏览器原生锚点滚动发生在布局完成前，长文章的懒加载图片/异步组件会把目标顶偏）
       const hash = window.location.hash;
@@ -137,11 +135,8 @@
           return;
         }
       }
-      if (wikiCover && startEl) {
-        window.scrollTo(0, startEl.offsetTop);
-      } else {
-        window.scrollTo(0, 0);
-      }
+      // 没有锚点时始终保持页面顶部；Wiki Hero 只在用户显式访问 #start 时定位正文。
+      window.scrollTo(0, 0);
     };
     if (document.readyState !== 'loading') scrollHandler();
     else document.addEventListener('DOMContentLoaded', scrollHandler);
@@ -174,7 +169,6 @@
   const def = {
     avatar: `<%- theme.default.avatar %>`,
     cover: `<%- theme.default.cover %>`,
-    loading: `<%- theme.default.loading || (theme.icons && theme.icons['default:loading-placeholder']) %>`,
     data_cache: <%- JSON.stringify(theme.data_cache || {}) %>,
   };
   const deps = {

package/layout/_partial/scripts/lazyload.ejs

@@ -73,9 +73,6 @@
 
       const icon = document.createElement('div');
       icon.className = 'lazy-icon';
-      if (def.loading) {
-        icon.style.backgroundImage = `url("${def.loading}")`;
-      }
 
       wrapper.appendChild(newImg);
       wrapper.appendChild(icon);

package/layout/_partial/scripts.ejs

@@ -48,6 +48,7 @@ function tagtreeWidgetOnPage() {
 <script defer src="<%- url_for('/js/stellar-icons.js') %>?v=<%- stellar_info('version') %>"></script>
 <!-- 非首屏图标异步加载：占位符替换依赖构建期生成的 js/icons/{ns}.json -->
 <script defer src="<%- url_for('/js/icons.js') %>?v=<%- stellar_info('version') %>" data-version="<%- stellar_info('version') %>"></script>
+<script defer src="<%- url_for('/js/plugins/dropdown.js') %>?v=<%- stellar_info('version') %>"></script>
 <script src="<%- url_for(`${theme.stellar.main_js}?v=${stellar_info('version')}`) %>" defer></script>
 <script defer src="<%- url_for('/js/theme.js') %>?v=<%- stellar_info('version') %>"></script>
 

package/layout/_partial/sidebar/index_leftbar.ejs

@@ -125,10 +125,20 @@ function layoutFooterDiv() {
     return ''
   }
   var el = '<footer class="footer dis-select">';
-  el += '<div class="social-wrap">';
+  el += '<div class="social-wrap" style="--item-grad:url(#footer-social-icon-grad)">';
+  el += partial('grad-def', {id: 'footer-social-icon-grad'})
   for (let id of Object.keys(social)) {
     let item = social[id];
-    if (item.icon && (item.url || item.onclick)) {
+    if (id === 'spacer') {
+      el += '<span class="social-spacer" aria-hidden="true"></span>';
+    } else if (item?.type === 'dropdown') {
+      el += partial('../dropdown', {
+        item: item,
+        rootClass: 'social-dropdown',
+        triggerClass: 'social',
+        showTitle: false
+      })
+    } else if (item?.icon && (item.url || item.onclick)) {
       el += '<a class="social"';
       if (item.title) {
         el += ' title="' + escape_html(item.title) + '"';

package/layout/_partial/sidebar/logo.ejs

@@ -50,7 +50,7 @@ function layoutBack() {
   var el = ''
   el += `<div class="wiki-home-wrap">`
   el += `<a class="wiki-home cap" href="${pretty_url(theme.site_tree.index_wiki.base_dir)}">`
-  el += icon('default:goback', '', true)
+  el += icon('default:arrow-left', '', true)
   el += `<span>${__('btn.all_wiki')}</span>`
   el += `</a>`
   el += `</div>`

package/layout/_partial/sidebar/menu.ejs

@@ -1,31 +1,29 @@
 <%
 function layoutDiv() {
-  var el = ''
-  el += `<nav class="menu dis-select${where == 'main' ? ' mobile-hidden' : ''}">`
-  for (let item of (theme.menubar.items || [])) {
-    if (item == undefined || item.id == null || item.url == null) {
+  var entries = []
+  for (var menuItem of (theme.menubar.items || [])) {
+    if (menuItem == null || menuItem.id == null || menuItem.url == null || menuItem.title == null) {
       continue
     }
-    var active = item.id == page.menu_id
-    el += `<a class="nav-item${active ? ' active' : ''}${item.theme?.length > 0 ? ' themed' : ''}"`
-    var style = `--item-grad:url(#menu-grad-${item.id})`
-    if (item.theme?.length > 0) {
-      style += `;--item-theme:${item.theme}`
-    }
-    el += ` style="${style}"`
-    el += ` title="${item.title}" href="${pretty_url(item.url)}">`
-    if (item.icon?.length > 0) {
-      el += icon(item.icon, 'no-lazy', true)
-    }
-    el += `<span>${__(item.title)}</span>`
-    if (active) {
-      el += `<span class="active-dot"></span>`
-    }
-    el += partial('grad-def', {id: 'menu-grad-' + item.id})
-    el += `</a>`
+    entries.push({
+      href: pretty_url(menuItem.url),
+      title: __(menuItem.title),
+      icon: menuItem.icon,
+      theme: menuItem.theme,
+      active: menuItem.id == page.menu_id,
+      className: menuItem.theme?.length > 0 ? 'is-themed' : '',
+      gradientId: 'menu-grad-' + menuItem.id
+    })
+  }
+  var body = partial('_partial/components/collection', {options: {
+    layout: 'list',
+    variant: 'nav',
+    items: entries
+  }})
+  if ((body || '').trim().length === 0) {
+    return ''
   }
-  el += `</nav>`
-  return el
+  return `<nav class="menu dis-select${where == 'main' ? ' mobile-hidden' : ''}">${body}</nav>`
 }
 %>
 

package/layout/_partial/widgets/components/linklist.ejs

@@ -1,27 +1,29 @@
 <%
 function layoutDiv(linklist) {
-  var links = linklist.items || []
-  if (links.length == 0) {
-    return ''
+  var links = Array.isArray(linklist.items) ? linklist.items : []
+  var view = linklist.view === 'grid' ? 'grid' : 'list'
+  var columns = view === 'grid' ? (linklist.columns || 2) : 1
+  var showTitle = linklist.show_title !== false
+  var entries = []
+  for (var link of links) {
+    if (!link || !link.url || !link.title) {
+      continue
+    }
+    entries.push({
+      href: link.url,
+      title: link.title,
+      icon: link.icon,
+      active: pretty_url(link.url) == pretty_url(page.path),
+      showTitle: showTitle,
+      gradientRef: 'leftbar-active-icon-grad'
+    })
   }
-  var el = ''
-  var style = ''
-  var columns = linklist.columns || links.length
-  if (links.length == 1) {
-    style += `style="grid-template-columns:repeat(1,1fr);"`
-  } else {
-    style += `style="grid-template-columns:repeat(${columns},1fr);"`
-  }
-  var align = 'center'
-  if (columns == 1 && links.length > 1) {
-    align = 'left'
-  }
-  el += `<div class="linklist ${align}${columns > 1 ? ' multi' : ''}" ${style}>`
-  for (let link of links) {
-    el += partial('link', {item: link, columns: columns})
-  }
-  el += `</div>`
-  return el
+  return partial('_partial/components/collection', {options: {
+    layout: view,
+    variant: showTitle ? 'nav' : 'icon',
+    columns: columns,
+    items: entries
+  }})
 }
 %>
 <%- layoutDiv(item) %>

package/layout/_partial/widgets/linklist.ejs

@@ -1,17 +1,12 @@
 <%
 function layoutDiv() {
-  var el = '';
-  el += `<widget class="widget-wrapper linklist">`
-  if (item.title?.length > 0) {
-    el += '<div class="widget-header dis-select">';
-    el += '<span class="name">' + item.title + '</span>';
-    el += '</div>';
-  }
-  el += '<div class="widget-body fs14">';
-  el += partial('components/linklist', {item: item})
-  el += '</div>';
-  el += '</widget>';
-  return el;
+  var body = partial('components/linklist', {item: item})
+  return partial('_partial/components/widget-frame', {
+    className: 'link-list-widget',
+    title: item.title,
+    body: body,
+    reveal: false
+  })
 }
 %>
 <%- layoutDiv() %>

package/layout/_partial/widgets/recent.ejs

@@ -1,61 +1,72 @@
 <%
 function layoutDiv() {
-  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>';
+  var action = ''
   if (item.rss) {
-    el += '<a class="cap-action" id="rss" title="Subscribe" href="' + item.rss + '">';
-    el += icon('default:rss')
-    el += '</a>';
+    action += '<a class="cap-action" id="rss" title="Subscribe" href="' + escape_html(item.rss) + '">'
+    action += icon('default:rss')
+    action += '</a>'
   }
-  el += '</div>';
-  // body
-  var arr = [];
+  var arr = []
   if (page.menu_id == 'wiki') {
-    arr = theme.wiki.all_pages.filter( p => {
+    arr = theme.wiki.all_pages.filter(function(p) {
       if (p.wiki) {
-        let proj = theme.wiki.tree[p.wiki];
-        return proj?.index != false;
+        var proj = theme.wiki.tree[p.wiki]
+        return proj?.index != false
       }
       return false
     })
-    arr = arr.sort((p1, p2) => p1.updated > p2.updated ? -1 : 1)
+    arr = arr.sort(function(p1, p2) {
+      return p1.updated > p2.updated ? -1 : 1
+    })
   } else if (page.layout === 'notebooks') {
-    arr = site.pages.filter(p => p.notebook).sort('-updated')
+    arr = site.pages.filter(function(p) {
+      return p.notebook
+    }).sort('-updated')
   } else if (page.notebook) {
-    arr = site.pages.filter(p => p.notebook === page.notebook).sort('-updated')
+    arr = site.pages.filter(function(p) {
+      return p.notebook === page.notebook
+    }).sort('-updated')
   } else {
-    arr = site.posts.filter( p => p.title && p.title.length > 0)
-    arr = arr.sort("updated", -1)
+    arr = site.posts.filter(function(p) {
+      return p.title && p.title.length > 0
+    }).sort('updated', -1)
   }
-  el += '<div class="widget-body fs14">'
-  arr = arr.filter(p => p.title?.length > 0)
+  arr = arr.filter(function(p) {
+    return p.title?.length > 0
+  })
   arr.length = item.limit
-  arr.forEach(post => {
-    if (!post) { return }
-    el += `<a class="item title" href="${pretty_url(post.link || post.path)}">`
-    el += '<span class="title">'
+  var entries = []
+  arr.forEach(function(post) {
+    if (!post) {
+      return
+    }
+    var prefix = ''
     if (post.wiki) {
-      const proj = theme.wiki.tree[post.wiki];
-      let name = proj?.name || post?.wiki;
-      if (name) {
-        el += '<strong>' + name + '</strong>' + '<span class="dot"></span>';
-      }
+      var proj = theme.wiki.tree[post.wiki]
+      prefix = proj?.name || post.wiki || ''
     } else if (page.layout === 'notebooks') {
-      const notebook = theme.notebooks.tree[post.notebook]
-      const name = notebook?.name || post.notebook
-      if (name) {
-        el += '<strong>' + name + '</strong>' + '<span class="dot"></span>';
-      }
+      var notebook = theme.notebooks.tree[post.notebook]
+      prefix = notebook?.name || post.notebook || ''
     }
-    el += post.title + '</span>';
-    el += '</a>';
-    el += '';
-  });
-  el += '</div>';
-  el += '</widget>';
-  return el;
+    entries.push({
+      href: pretty_url(post.link || post.path),
+      title: post.title,
+      prefix: prefix,
+      indicator: false
+    })
+  })
+  var body = partial('_partial/components/collection', {options: {
+    layout: 'list',
+    variant: 'nav',
+    density: 'compact',
+    items: entries
+  }})
+  return partial('_partial/components/widget-frame', {
+    className: 'recent-widget',
+    title: __('meta.recent_update'),
+    action: action,
+    body: body
+  })
 }
 %>
 <%- layoutDiv() %>