hexo-theme-stellar 1.42.0 → 1.43.0

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() %>

package/layout/_partial/widgets/related.ejs

@@ -3,63 +3,74 @@ function relatedPostsInTopic() {
   if (page.topic?.length == 0) {
     return ''
   }
-  const topic = theme.topic.tree[page.topic]
+  var topic = theme.topic.tree[page.topic]
   if (topic == null) {
     return ''
   }
-  var el = ''
-  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>`
-  el += `<div class="widget-body">`
-  for (let post of topic.pages) {
-    const isActive = post.path == page.path
-    el += `<a class="item${isActive ? ' active' : ''}" href="${pretty_url(post.path)}">`
-    el += `<span class="title">${post.title}</span>`
-    if (isActive) {
-      el += '<span class="active-dot"></span>'
-    }
-    el += `</a>`
+  var entries = []
+  for (var post of topic.pages) {
+    entries.push({
+      href: pretty_url(post.path),
+      title: post.title,
+      active: post.path == page.path
+    })
   }
-  el += `</div>`
-  el += `</widget>`
-  return el
+  var body = partial('_partial/components/collection', {options: {
+    layout: 'list',
+    variant: 'nav',
+    density: 'compact',
+    items: entries
+  }})
+  return partial('_partial/components/widget-frame', {
+    className: 'related-widget',
+    title: __('btn.topic') + __('symbol.colon') + (topic.name || topic.title),
+    body: body,
+    reveal: false
+  })
 }
+
 function relatedWiki() {
-  let thisItemObject = theme.wiki.tree[page.wiki]
+  var thisItemObject = theme.wiki.tree[page.wiki]
   if (thisItemObject == null) {
     return ''
   }
-  const relatedItems = thisItemObject.relatedItems || []
+  var relatedItems = thisItemObject.relatedItems || []
   var el = ''
-  for (let relatedItem of relatedItems) {
-    el += `<widget class="widget-wrapper${scrollreveal(' ')} post-card">`
-    el += `<div class="widget-header dis-select">`
-    el += `<span class="name">${__('meta.more') + __('symbol.colon') + relatedItem.name}</span>`
-    el += `</div>`
-    el += `<div class="widget-body">`
-    for (let id of relatedItem.items) {
-      // 同一个分组中的其它项目
-      let item = theme.wiki.tree[id]
-      el += `<a class="item wiki" href="${pretty_url(item.homepage?.path)}">`
-      el += `<span class="title">${item.title}</span>`
-      if (item.description && item.description.length > 0) {
-        el += `<span class="excerpt">${item.description}</span>`
+  for (var relatedItem of relatedItems) {
+    var entries = []
+    for (var id of relatedItem.items) {
+      var relatedProject = theme.wiki.tree[id]
+      if (relatedProject) {
+        entries.push({
+          href: pretty_url(relatedProject.homepage?.path),
+          title: relatedProject.title,
+          description: relatedProject.description,
+          indicator: false
+        })
       }
-      el += `</a>`
     }
-    el += `</div>`
-    el += `</widget>`
+    var body = partial('_partial/components/collection', {options: {
+      layout: 'list',
+      variant: 'summary',
+      density: 'compact',
+      items: entries
+    }})
+    el += partial('_partial/components/widget-frame', {
+      className: 'related-summary-widget',
+      title: __('meta.more') + __('symbol.colon') + relatedItem.name,
+      body: body
+    })
   }
   return el
 }
+
 function layoutDiv() {
   if (page.wiki?.length > 0) {
     return relatedWiki()
   } else if (page.topic?.length > 0) {
     return relatedPostsInTopic()
   }
+  return ''
 }
 %>
 <%- layoutDiv() %>

package/layout/_partial/widgets/tagtree.ejs

@@ -1,59 +1,75 @@
-<%# 笔记本的标签树 %>
-<% const notebook = theme.notebooks.tree[page.notebook] %>
-<% const tagTree = notebook?.tagTree %>
-<% const isLeaf = tag => tag.id === '' || tag.children.length === 0 %>
-<% const getTagcon = tag => {
-  const tagcons = theme.notebook.tagcons || {}
+<%
+var notebook = theme.notebooks.tree[page.notebook]
+var tagTree = notebook?.tagTree
+
+function isLeaf(tag) {
+  return tag.id === '' || tag.children.length === 0
+}
+
+function getTagcon(tag) {
+  var tagcons = theme.notebook.tagcons || {}
   return tagcons[tag.name] || tagcons[tag.id] || tagcons[tag.part] || tagcons[tag.part.toLowerCase()] || tagcons['']
-} %>
+}
 
-<% function layoutTag(tag, level) { %>
-  <% const active = page.activeTag === tag.id %>
-  <a class="link<%= active ? ' active' : '' %>" href="<%= pretty_url(tag.path) %>">
-    <span class="toc-text"<% if (level > 0) { %> style="padding-left: <%= level * 0.875 %>rem;"<% } %>>
-      <% if (tag.id === '') { %>
-        <%= __('meta.all_notes') %>
-      <% } else { %>
-        <% const tagcon = item.show_tagcon && getTagcon(tag) %>
-        <% if (tagcon) { %><span class="tagcon"><%- icon(tagcon) %></span><% } %>
-        <%= tag.part %>
-      <% } %>
-    </span>
-    <span class="toc-text tag-switcher-wrapper">
-      <span class="tag-switcher" />
-    </span>
-  </a>
-<% } %>
+function layoutTag(tag, level) {
+  var active = page.activeTag === tag.id
+  var tagcon = tag.id !== '' && item.show_tagcon ? getTagcon(tag) : ''
+  var trailing = ''
+  if (!isLeaf(tag)) {
+    trailing = '<span class="tag-switcher-wrapper"><span class="tag-switcher"></span></span>'
+  }
+  return partial('_partial/components/collection-item', {
+    item: {
+      href: pretty_url(tag.path),
+      title: tag.id === '' ? __('meta.all_notes') : tag.part,
+      icon: tagcon,
+      active: active,
+      indicator: false,
+      depth: level,
+      className: 'tag-tree__link',
+      after: trailing
+    }
+  })
+}
 
-<% function layoutChildTags(tag, level) { %>
-  <% for (const child of tag.children) { %>
-    <%= tagAndSub(tagTree.get(child), level + 1) %>
-  <% } %>
-<% } %>
+function tagAndSub(tag, level) {
+  if (!tag) {
+    return ''
+  }
+  var active = page.activeTag === tag.id
+  var expanded = item.expand_all || (item.expand_active && active) || page.activeTag?.startsWith(tag.id + '/')
+  var classes = isLeaf(tag) ? ' is-leaf' : ' is-parent'
+  if (expanded) {
+    classes += ' is-expanded'
+  }
+  var el = '<div class="tag-subtree' + classes + '" data-tag="' + escape_html(tag.id) + '">'
+  el += layoutTag(tag, level)
+  if (!isLeaf(tag)) {
+    for (var child of tag.children) {
+      el += tagAndSub(tagTree.get(child), level + 1)
+    }
+  }
+  el += '</div>'
+  return el
+}
 
-<% function tagAndSub(tag, level) { %>
-  <% if (!tag) return '' %>
-  <% const active = page.activeTag === tag.id %>
-  <% const expanded = item.expand_all || (item.expand_active && active) || page.activeTag?.startsWith(`${tag.id}/`) %>
-  <% const classes = [isLeaf(tag) ? ' leaf-tag' : ' parent-tag', expanded ? ' expanded' : ''] %>
-  <div class="tag-subtree<%= classes.join('') %>" data-tag="<%= tag.id %>">
-    <%= layoutTag(tag, level) %>
-    <% if (!isLeaf(tag)) { %>
-      <%= layoutChildTags(tag, level) %>
-    <% } %>
-  </div>
-<% } %>
+function layoutDiv() {
+  if (!tagTree) {
+    return ''
+  }
+  var body = '<div class="ui-collection tag-tree" data-layout="list" data-variant="nav" data-density="compact">'
+  body += tagAndSub(tagTree.get(''), 0)
+  for (var child of tagTree.get('').children) {
+    body += tagAndSub(tagTree.get(child), 0)
+  }
+  body += '</div>'
+  return partial('_partial/components/widget-frame', {
+    className: 'tag-tree-widget',
+    title: __('meta.tag_tree'),
+    body: body,
+    attrs: {'data-notebook': page.notebook}
+  })
+}
+%>
 
-<% if (tagTree) { %>
-  <widget class="widget-wrapper<%= scrollreveal(' ') %> post-list" data-notebook="<%= page.notebook %>">
-    <div class="widget-header dis-select">
-      <span class="name"><%= __('meta.tag_tree') %></span>
-    </div>
-    <div class="widget-body fs14 tag-tree">
-      <%= tagAndSub(tagTree.get(''), 0) %>
-      <% for (const child of tagTree.get('').children) { %>
-        <%= tagAndSub(tagTree.get(child), 0) %>
-      <% } %>
-    </div>
-  </widget>
-<% } %>
+<%- layoutDiv() %>

package/layout/_partial/widgets/toc.ejs

@@ -1,79 +1,54 @@
 <%
-
 function layoutTocBody() {
-  if (toc(page.content).length > 0) {
-    return toc(page.content, {
-      list_number: item.list_number,
-      min_depth: item.min_depth,
-      max_depth: item.max_depth
-    })
+  var tocBody = toc(page.content, {
+    list_number: item.list_number,
+    min_depth: item.min_depth,
+    max_depth: item.max_depth
+  })
+  if (tocBody.length === 0) {
+    return ''
   }
-  return ''
+  return tocBody.replace('class="toc"', 'class="toc ui-collection-adapter"')
 }
 
-function layoutTocHeader(title) {
-  var el = ''
-  el += `<div class="widget-header dis-select">`
-  el += `<span class="name">${title || __("meta.toc")}</span>`
-  el += `<a class="cap-action" onclick="sidebar.toggleTOC()" >${icon('default:rightbar', '', true)}</a>`
-  el += `</div>`
-  return el
+function layoutTocAction() {
+  return '<a class="cap-action" onclick="sidebar.toggleTOC()">' + icon('default:rightbar', '', true) + '</a>'
 }
 
-function layoutToc(fallback) {
-  const tocBody = layoutTocBody()
-  if (tocBody.length == 0) {
-    return ''
+function layoutFooter(hasComments) {
+  var footer = '<div class="widget-footer">'
+  footer += '<a class="top" onclick="util.scrollTop()">'
+  footer += icon('default:upup', '', true)
+  footer += '<span>' + __('btn.top') + '</span></a>'
+  if (hasComments) {
+    footer += '<a class="buttom" onclick="util.scrollComment()">'
+    footer += icon('default:tocomment', '', true)
+    footer += '<span>' + __('btn.comments') + '</span></a>'
   }
-  var el = ''
-  el += `<widget class="widget-wrapper${scrollreveal(' ')} toc" id="data-toc" collapse="${item.collapse}">`
-  el += layoutTocHeader()
-  el += `<div class="widget-body">`
-  el += tocBody
-  el += `</div>`
-  el += `</widget>`
-  return el
+  footer += '</div>'
+  return footer
 }
 
-function layoutDiv(fallback) {
-  const tocBody = layoutTocBody()
-  const hasToc = tocBody.trim().length > 0
-  // 远程 md 内容由客户端渲染，构建期正文无标题：
-  // 预留空 TOC 容器，渲染完成后由 mdrender.js 填充
-  const hasRemoteMd = has_remote_md(page)
-  // 页面是否实际渲染评论区，由 _partial/comments/layout.ejs 标记
-  const hasComments = page.cmt_rendered === true
+function layoutDiv() {
+  var tocBody = layoutTocBody()
+  var hasToc = tocBody.trim().length > 0
+  var hasRemoteMd = has_remote_md(page)
+  var hasComments = page.cmt_rendered === true
   if (!hasToc && !hasRemoteMd && !hasComments) {
     return ''
   }
-  var el = ''
-  el += `<widget class="widget-wrapper${scrollreveal(' ')} toc" id="data-toc" collapse="${item.collapse}">`
-  if (hasToc) {
-    el += layoutTocHeader()
-    el += `<div class="widget-body">`
-    el += tocBody
-    el += `</div>`
-  } else if (hasRemoteMd) {
-    el += layoutTocHeader()
-    el += `<div class="widget-body">`
-    el += `</div>`
-  }
-  el += `<div class="widget-footer">`
-  el += `<a class="top" onclick="util.scrollTop()">`
-  el += icon('default:upup', '', true)
-  el += `<span>${__('btn.top')}</span>`
-  el += `</a>`
-  if (hasComments) {
-    el += `<a class="buttom" onclick="util.scrollComment()">`
-    el += icon('default:tocomment', '', true)
-    el += `<span>${__('btn.comments')}</span>`
-    el += `</a>`
-  }
-  el += `</div>`
-  el += `</widget>`
-  return el
+  return partial('_partial/components/widget-frame', {
+    className: 'toc',
+    title: hasToc || hasRemoteMd ? __('meta.toc') : '',
+    action: hasToc || hasRemoteMd ? layoutTocAction() : '',
+    body: hasToc ? tocBody : (hasRemoteMd ? '<nav class="toc ui-collection-adapter"></nav>' : ''),
+    footer: layoutFooter(hasComments),
+    attrs: {
+      id: 'data-toc',
+      collapse: item.collapse === 'auto' ? 'auto' : String(item.collapse === true)
+    }
+  })
 }
-
 %>
 
 <%- layoutDiv() %>

package/layout/_partial/widgets/tree.ejs

@@ -1,71 +1,58 @@
 <%
-const proj = theme.wiki.tree[page.wiki]
+var proj = theme.wiki.tree[page.wiki]
 
-function layoutTocHeader(title) {
-  var el = ''
-  el += `<div class="widget-header dis-select">`
-  el += `<span class="name">${title || __("meta.toc")}</span>`
-  el += `</div>`
-  return el
+function layoutSectionHeader(title) {
+  if (!title || title.length === 0) {
+    return ''
+  }
+  return '<div class="widget-header dis-select"><span class="name">' + escape_html(title) + '</span></div>'
 }
 
 function layoutDocTree(pages) {
-  var el = ''
-  for (let p of pages) {
-    if (p.title == null || p.title.length == 0) {
+  var entries = []
+  for (var docPage of pages) {
+    if (docPage.title == null || docPage.title.length === 0 || proj.pages.length <= 1) {
       continue
     }
-    let isActive = ''
-    if (p.path === page.path) {
-      isActive += ' active'
-    }
-    if (proj.pages.length > 1) {
-      let href = pretty_url(p.path);
-      if (p.is_homepage) {
-        href += '#start'
-      }
-      el += `<a class="link${isActive}" href="${href}">`
-      el += `<span class="toc-text">${p.title}</span>`
-      if (isActive.length > 0) {
-        el += '<span class="active-dot"></span>'
-      }
-      el += `</a>`
-    }
+    entries.push({
+      href: pretty_url(docPage.path),
+      title: docPage.title,
+      active: docPage.path === page.path,
+      gradientRef: 'leftbar-active-icon-grad'
+    })
   }
-  return el
+  return partial('_partial/components/collection', {options: {
+    layout: 'list',
+    variant: 'nav',
+    density: 'compact',
+    items: entries
+  }})
 }
 
-
-function layoutDiv(fallback) {
-  if (proj == null) {
-    return ''
-  }
-  if (proj.pages == null || proj.pages.length == 0) {
+function layoutDiv() {
+  if (proj == null || proj.pages == null || proj.pages.length === 0 || proj.sections == null || proj.sections.length === 0) {
     return ''
   }
-  if (proj.sections == null || proj.sections.length == 0) {
-    return ''
-  }
-  var el = ''
-  for (let sec of proj.sections) {
-    if (sec.pages.length == 0) {
+  var body = ''
+  for (var section of proj.sections) {
+    if (section.pages.length === 0) {
       continue
     }
-    if (sec.title?.length > 0) {
-      el += layoutTocHeader(sec.title)
-    }
-    const docTree = layoutDocTree(sec.pages)
-    if (docTree.trim().length > 0) {
-      el += `<div class="widget-body fs14">${docTree}</div>`
+    var collection = (layoutDocTree(section.pages) || '').trim()
+    if (collection.length > 0) {
+      body += '<section class="widget-section">'
+      body += layoutSectionHeader(section.title)
+      body += collection
+      body += '</section>'
     }
   }
-  if (el.trim().length > 0) {
-    return `<widget class="widget-wrapper doc-tree post-list" data-wiki="${page.wiki}">${el}</widget>`
-  } else {
-    return ''
-  }
+  return partial('_partial/components/widget-frame', {
+    className: 'doc-tree-widget',
+    body: body,
+    attrs: {'data-wiki': page.wiki},
+    reveal: false
+  })
 }
-
 %>
 
 <%- layoutDiv() %>

package/layout/_plugins/index.ejs

@@ -1,3 +1,28 @@
+<script>
+  // 防御：bootstrap 被第三方优化器改写/移除导致 window.stellar.initPlugin 缺失时，
+  // 在此补一个等价注册点：utils 就绪时直接委托，未就绪时入队，utils 加载后自动补跑。
+  if (typeof window.stellar === 'undefined' || typeof window.stellar.initPlugin !== 'function') {
+    window.stellar = window.stellar || {};
+    window.stellar._pluginQueue = window.stellar._pluginQueue || [];
+    window.stellar.initPlugin = function (fn, name, options) {
+      if (typeof utils === 'object' && typeof utils.initPlugin === 'function') {
+        return utils.initPlugin(fn, name, options);
+      }
+      window.stellar._pluginQueue.push({ fn: fn, name: name, options: options || {} });
+    };
+    window.stellar._flushPlugins = function () {
+      var pending = window.stellar._pluginQueue.splice(0);
+      if (typeof utils !== 'object' || typeof utils.initPlugin !== 'function') return;
+      for (var i = 0; i < pending.length; i++) {
+        try {
+          utils.initPlugin(pending[i].fn, pending[i].name, pending[i].options);
+        } catch (e) {
+          console.error('[Stellar] 插件补注册失败:', e);
+        }
+      }
+    };
+  }
+</script>
 <%
 function loadPlugins() {
   var el = ''

package/layout/_plugins/mermaid.ejs

@@ -3,7 +3,9 @@
   stellar.initPlugin(() => {
     const els = document.querySelectorAll('.mermaid');
     if (els.length > 0) {
-      utils.css(`<%- url_for('/css/plugins/mermaid.css') %>?v=<%- stellar_info('version') %>`);
+      if (<%- conf.style_optimization === true %>) {
+        utils.css(`<%- url_for('/css/plugins/mermaid.css') %>?v=<%- stellar_info('version') %>`);
+      }
       const mermaid_config = {
         startOnLoad: false,
         theme:
@@ -12,9 +14,6 @@
             ? "dark"
             : "<%- conf.theme %>",
         logLevel: 3,
-        themeVariables: {
-          darkMode: true
-        },
         flowchart: {
           useMaxWidth: false,
           htmlLabels: true,