hexo-theme-stellar 1.42.1 → 1.43.0

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/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,

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)