hexo-theme-stellar 1.26.8 → 1.27.0

package/layout/_partial/comments/waline/script.ejs

@@ -0,0 +1,43 @@
+<script type="module">
+  import { init } from '<%- theme.comments.waline.js %>'
+
+  function load_comment(){
+    if(!document.getElementById("waline_container"))return;
+
+    utils.css('<%- theme.comments.waline.css %>');
+    utils.css('<%- theme.comments.waline.meta_css %>');
+
+    const el = document.getElementById("waline_container");
+    var path = el.getAttribute('comment_id');
+    if (!path) {
+      path = decodeURI(window.location.pathname);
+    }
+
+    const waline = init(Object.assign(<%- JSON.stringify(theme.comments.waline) %>, {
+      el: '#waline_container',
+      path: path,
+      <% if(!!theme.comments.waline.imageUploader?.api){ %>
+        imageUploader: function(file) {
+          let headers = new Headers();
+          headers.set('Accept', 'application/json');
+          <% if(!!theme.comments.waline.imageUploader?.token) { %>
+            headers.set('<%= theme.comments.waline.imageUploader?.tokenName %>', '<%= theme.comments.waline.imageUploader?.token %>')
+          <% } %>
+          let formData = new FormData();
+          formData.append('<%= theme.comments.waline.imageUploader?.fileName %>', file);
+          return fetch('<%= theme.comments.waline.imageUploader?.api %>',{
+            method: 'POST',
+            body: formData,
+            headers: headers
+            }).then((resp) => resp.json())
+              .then((resp) => resp.<%= theme.comments.waline.imageUploader?.resp %>)
+        },
+      <% } %>
+    }));
+
+  }
+  window.addEventListener('DOMContentLoaded', (event) => {
+    load_comment();
+  });
+
+</script>

package/layout/_partial/head.ejs

@@ -128,6 +128,5 @@ function custom_inject() {
     <%- css(theme.style.codeblock.highlightjs_theme) %>
   <% } %>
 
-  <%- partial('plugins/parser/head') %>
   <%- custom_inject() %>
 </head>

package/layout/_partial/main/article/article_footer.ejs

@@ -64,7 +64,7 @@ function layoutDiv() {
       }
     }
     if (author) {
-      license = license.replace('${author.name}', author.name).replace('${author.url}', author.url)
+      license = license.replace('{author.name}', author.name).replace('{author.url}', author.url)
     }
     el += `
     <section id="license">

package/layout/_partial/main/footer.ejs

@@ -1,5 +1,5 @@
 <%
-const content = theme.footer.content?.replace('${author.name}', (config.author || 'Anonymity'))?.replace('${theme.name}', stellar_info('name'))?.replace('${theme.version}', stellar_info('version'))?.replace('${theme.tree}', stellar_info('tree'))
+const content = theme.footer.content?.replace('{author.name}', (config.author || 'Anonymity'))?.replace('{theme.name}', stellar_info('name'))?.replace('{theme.version}', stellar_info('version'))?.replace('{theme.tree}', stellar_info('tree'))
 function layoutDiv() {
   var el = ''
   el += `<footer class="page-footer${scrollreveal(' ')} footnote">`

package/layout/_partial/main/navbar/article_banner.ejs

@@ -1,30 +1,94 @@
 <%
 
-var banner_url
+var banner = {}
+
 if (page.banner) {
-  banner_url = page.banner
+  banner.url = page.banner
 } else if (theme.topic.tree[page.topic]?.banner != null) {
-  banner_url = theme.topic.tree[page.topic]?.banner
+  banner.url = theme.topic.tree[page.topic]?.banner
 } else if (theme.wiki.tree[page.wiki]?.banner != null) {
-  banner_url = theme.wiki.tree[page.wiki]?.banner
+  banner.url = theme.wiki.tree[page.wiki]?.banner
+}
+banner = Object.assign(banner, page.banner_info)
+// 标题
+if (banner.title == null) {
+  banner.title = page.h1 != null ? page.h1 : page.title
+}
+// 副标题
+if (banner.subtitle == null) {
+  banner.subtitle = page.subtitle
+}
+
+function layoutBreadcrumb() {
+  if (page.breadcrumb === false) {
+    return `<div class="top"></div>`
+  }
+  var el = ''
+  // 1.main
+  el += `<div class="top bread-nav footnote">`
+  // 2.left
+  el += `<div class="left">`
+  // 3.left.top: 面包屑导航
+  el += `<div class="flex-row" id="breadcrumb">`
+    // 首页
+    el += `<a class="cap breadcrumb" href="${url_for(config.root)}">${__("btn.home")}</a>`
+    if (theme.wiki.tree[page.wiki]) {
+      el += partial('breadcrumb/wiki')
+    } else if (page.layout == 'post') {
+      el += partial('breadcrumb/blog')
+    } else {
+      el += partial('breadcrumb/page')
+    }
+  // end 3.left.top
+  el += `</div>`
+  // 3.left.bottom
+  el += partial('dateinfo')
+  // end 2.left
+  el += `</div>`
+  // end 1.main
+  el += `</div>`
+  return el
 }
 
 function layoutTitle() {
-  const title = page.h1 != null ? page.h1 : page.title
-  if (title && title.length > 0) {
-    return `<h1 class="text title"><span>${title}</span></h1>`
+  if (banner.title?.length > 0) {
+    return `<h1 class="text title"><span>${banner.title}</span></h1>`
+  } else {
+    return ''
+  }
+}
+
+function layoutSubtitle() {
+  if (banner.subtitle?.length > 0) {
+    return `<div class="text subtitle">${banner.subtitle}</div>`
+  } else {
+    return ''
+  }
+}
+
+function layoutIcon() {
+  if (banner.avatar?.length > 0 || banner.icon?.length > 0) {
+    return `<img class="avatar" src="${banner.avatar || banner.icon}">`
   } else {
     return ''
   }
 }
 
 function layoutBottom() {
-  const article_title = layoutTitle()
-  if (article_title.length > 0) {
+  const el_icon = layoutIcon()
+  const el_title = layoutTitle()
+  const el_subtitle = layoutSubtitle()
+  var cls = ''
+  if (el_title.length > 0 && el_subtitle.length == 0) {
+    cls += ' only-title'
+  }
+  if (el_title.length > 0) {
     return `
-    <div class="bottom">
+    <div class="bottom${cls}">
+      ${el_icon}
       <div class="text-area">
-        ${article_title}
+        ${el_title}
+        ${el_subtitle}
       </div>
     </div>
     `
@@ -34,18 +98,18 @@ function layoutBottom() {
 }
 
 function layoutDiv() {
-  const top = partial('article_top_area')
   const bottom = layoutBottom()
-  if (top.trim().length == 0 && bottom.length == 0) {
+  if (page.breadcrumb === false && bottom.length == 0) {
     return ``
   }
+  const top = layoutBreadcrumb()
   var style = ``
   var el = ``
   el += `<div class="article banner top">`
-  if (banner_url?.length > 0) {
-    el += `<img class="bg" src="${banner_url}">`
-    if (page.poster?.color) {
-      style += ' style="--text-banner:' + page.poster?.color + '"'
+  if (banner.url?.length > 0) {
+    el += `<img class="bg" src="${banner.url}">`
+    if (banner.color) {
+      style += ' style="--text-banner:' + banner.color + '"'
     }
   }
   el += `

package/layout/_partial/main/navbar/ghinfo.ejs

@@ -5,7 +5,7 @@ function layoutDiv() {
     return ''
   }
   return `
-  <div class="right ghrepo stellar-ghinfo-api" api="${theme.api_host.ghapi}/repos/${repo}">
+  <div class="right ghrepo ds-ghinfo" api="${theme.api_host.ghapi}/repos/${repo}">
     <a class="repo-link bold" href="https://github.com/${repo}">
       ${icon('github:repo')}
       <span type="text">${repo}</span>

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

@@ -51,7 +51,7 @@ function div_default() {
 
   // 摘要
   el += '<div class="excerpt';
-  if (theme.plugins.heti && theme.plugins.heti.enable) {
+  if (theme.plugins.heti?.enable) {
     el += ' heti';
   }
   el += '">';

package/layout/_partial/menubtn.ejs

@@ -1,5 +1,8 @@
-<div class='float-panel mobile-only blur' style='display:none'>
-  <button type='button' class='sidebar-toggle mobile' onclick='sidebar.toggle()'>
-    <%- icon('default:sidebar') %>
+<div class='float-panel blur'>
+  <button type='button' style='display:none' class='laptop-only rightbar-toggle mobile' onclick='sidebar.rightbar()'>
+    <%- icon('default:rightbar') %>
+  </button>
+  <button type='button' style='display:none' class='mobile-only leftbar-toggle mobile' onclick='sidebar.leftbar()'>
+    <%- icon('default:leftbar') %>
   </button>
 </div>

package/layout/_partial/scripts/defines.ejs

@@ -0,0 +1,31 @@
+<script type="text/javascript">
+  const ctx = {
+    date_suffix: {
+      just: `<%- __('meta.date_suffix.just') %>`,
+      min: `<%- __('meta.date_suffix.min') %>`,
+      hour: `<%- __('meta.date_suffix.hour') %>`,
+      day: `<%- __('meta.date_suffix.day') %>`,
+    },
+    root : `<%- config.root %>`,
+  };
+
+  // required plugins (only load if needs)
+  if (`<%- theme.search.service %>`) {
+    ctx.search = {};
+    ctx.search.service = `<%- theme.search.service %>`;
+    if (ctx.search.service == 'local_search') {
+      let service_obj = Object.assign({}, `<%- JSON.stringify(theme.search.local_search) %>`);
+      ctx.search[ctx.search.service] = service_obj;
+    }
+  }
+  const def = {
+    avatar: `<%- theme.default.avatar %>`,
+    cover: `<%- theme.default.cover %>`,
+  };
+  const deps = {
+    jquery: `<%- url_for(theme.dependencies.jquery) %>`,
+    marked: `<%- url_for(theme.dependencies.marked) %>`
+  }
+  
+
+</script>

package/layout/_partial/scripts/services.ejs

@@ -0,0 +1,29 @@
+<script defer>
+  window.addEventListener('DOMContentLoaded', (event) => {
+    ctx.services = Object.assign({}, JSON.parse(`<%- JSON.stringify(theme.data_services) %>`));
+    for (let id of Object.keys(ctx.services)) {
+      const js = ctx.services[id].js;
+      if (id == 'siteinfo') {
+        ctx.cardlinks = document.querySelectorAll('a.link-card[cardlink]');
+        if (ctx.cardlinks?.length > 0) {
+          utils.js(js, { defer: true }).then(function () {
+            setCardLink(ctx.cardlinks);
+          });
+        }
+      } else {
+        const els = document.getElementsByClassName(`ds-${id}`);
+        if (els?.length > 0) {
+          utils.jq(() => {
+            if (id == 'timeline' || 'memos' || 'marked') {
+              utils.js(deps.marked).then(function () {
+                utils.js(js, { defer: true });
+              });
+            } else {
+              utils.js(js, { defer: true });
+            }
+          });
+        }
+      }
+    }
+  });
+</script>

package/layout/_partial/scripts/sidebar.ejs

@@ -0,0 +1,25 @@
+<script>
+  const sidebar = {
+    leftbar: () => {
+      if (l_body) {
+        l_body.toggleAttribute('leftbar');
+        l_body.removeAttribute('rightbar');
+      }
+    },
+    rightbar: () => {
+      if (l_body) {
+        l_body.toggleAttribute('rightbar');
+        l_body.removeAttribute('leftbar');
+      }
+    },
+    dismiss: () => {
+      if (l_body) {
+        l_body.removeAttribute('leftbar');
+        l_body.removeAttribute('rightbar');
+      }
+    },
+    toggleTOC: () => {
+      document.querySelector('#data-toc').classList.toggle('collapse');
+    }
+  }
+</script>

package/layout/_partial/scripts/utils.ejs

@@ -0,0 +1,158 @@
+<script type="text/javascript">
+  const utils = {
+    // 懒加载 css https://github.com/filamentgroup/loadCSS
+    css: (href, before, media, attributes) => {
+      var doc = window.document;
+      var ss = doc.createElement("link");
+      var ref;
+      if (before) {
+        ref = before;
+      } else {
+        var refs = (doc.body || doc.getElementsByTagName("head")[0]).childNodes;
+        ref = refs[refs.length - 1];
+      }
+      var sheets = doc.styleSheets;
+      if (attributes) {
+        for (var attributeName in attributes) {
+          if (attributes.hasOwnProperty(attributeName)) {
+            ss.setAttribute(attributeName, attributes[attributeName]);
+          }
+        }
+      }
+      ss.rel = "stylesheet";
+      ss.href = href;
+      ss.media = "only x";
+      function ready(cb) {
+        if (doc.body) {
+          return cb();
+        }
+        setTimeout(function () {
+          ready(cb);
+        });
+      }
+      ready(function () {
+        ref.parentNode.insertBefore(ss, before ? ref : ref.nextSibling);
+      });
+      var onloadcssdefined = function (cb) {
+        var resolvedHref = ss.href;
+        var i = sheets.length;
+        while (i--) {
+          if (sheets[i].href === resolvedHref) {
+            return cb();
+          }
+        }
+        setTimeout(function () {
+          onloadcssdefined(cb);
+        });
+      };
+      function loadCB() {
+        if (ss.addEventListener) {
+          ss.removeEventListener("load", loadCB);
+        }
+        ss.media = media || "all";
+      }
+      if (ss.addEventListener) {
+        ss.addEventListener("load", loadCB);
+      }
+      ss.onloadcssdefined = onloadcssdefined;
+      onloadcssdefined(loadCB);
+      return ss;
+    },
+
+    js: (src, opt) => new Promise((resolve, reject) => {
+      var script = document.createElement('script');
+      if (src.startsWith('/')){
+        src = ctx.root + src.substring(1);
+      }
+      script.src = src;
+      if (opt) {
+        for (let key of Object.keys(opt)) {
+          script[key] = opt[key]
+        }
+      } else {
+        // 默认异步，如果需要同步，第二个参数传入 {} 即可
+        script.async = true
+      }
+      script.onerror = reject
+      script.onload = script.onreadystatechange = function() {
+        const loadState = this.readyState
+        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
+        script.onload = script.onreadystatechange = null
+        resolve()
+      }
+      document.head.appendChild(script)
+    }),
+
+    jq: (fn) => {
+      if (typeof jQuery === 'undefined') {
+        utils.js(deps.jquery).then(fn)
+      } else {
+        fn()
+      }
+    },
+    
+    onLoading: (el) => {
+      if (el) {
+        $(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
+      }
+    },
+    onLoadSuccess: (el) => {
+      if (el) {
+        $(el).find('.loading-wrap').remove();
+      }
+    },
+    onLoadFailure: (el) => {
+      if (el) {
+        $(el).find('.loading-wrap svg').remove();
+        $(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
+        $(el).find('.loading-wrap').addClass('error');
+      }
+    },
+    request: (el, url, callback, onFailure) => {
+      let retryTimes = 3;
+      utils.onLoading(el);
+      function req() {
+        return new Promise((resolve, reject) => {
+          let status = 0; // 0 等待 1 完成 2 超时
+          let timer = setTimeout(() => {
+            if (status === 0) {
+              status = 2;
+              timer = null;
+              reject('请求超时');
+              if (retryTimes == 0) {
+                onFailure();
+              }
+            }
+          }, 5000);
+          fetch(url).then(function(response) {
+            if (status !== 2) {
+              clearTimeout(timer);
+              resolve(response);
+              timer = null;
+              status = 1;
+            }
+            if (response.ok) {
+              return response.json();
+            }
+            throw new Error('Network response was not ok.');
+          }).then(function(data) {
+            retryTimes = 0;
+            utils.onLoadSuccess(el);
+            callback(data);
+          }).catch(function(error) {
+            if (retryTimes > 0) {
+              retryTimes -= 1;
+              setTimeout(() => {
+                req();
+              }, 5000);
+            } else {
+              utils.onLoadFailure(el);
+              onFailure();
+            }
+          });
+        });
+      }
+      req();
+    },
+  };
+</script>

package/layout/_partial/scripts.ejs

@@ -0,0 +1,32 @@
+<%
+
+function custom_inject() {
+  var el = '';
+  for (let item of (config.inject?.script || [])) {
+    el += item;
+  }
+  for (let item of (theme.inject?.script || [])) {
+    el += item;
+  }
+  for (let item of (page.inject?.script || [])) {
+    el += item;
+  }
+  return el;
+}
+
+%>
+<%- partial('scripts/defines') %>
+<%- partial('scripts/utils') %>
+<%- partial('scripts/sidebar') %>
+
+<!-- required -->
+<script src="<%- `${theme.stellar.main_js}?v=${stellar_info('version')}` %>" async></script>
+
+<!-- optional -->
+<%- partial('comments/script') %>
+
+<%- partial('scripts/services') %>
+<%- partial('../_plugins/index') %>
+
+<!-- inject -->
+<%- custom_inject() %>

package/layout/_partial/sidebar/{index.ejs → index_leftbar.ejs}

@@ -3,50 +3,52 @@
 const wiki = theme.wiki.tree[page.wiki]
 const topic = theme.topic.tree[page.topic]
 
-if (page.sidebar == null) {
+if (page.leftbar == null) {
   const { site_tree } = theme
   var sidebar
   if (is_home()) {
-    sidebar = site_tree.home.sidebar
+    sidebar = site_tree.home.leftbar
   } else if (is_category() || is_tag() || is_archive() || ['categories', 'tags', 'archives'].includes(page.layout)) {
-    sidebar = site_tree.index_blog.sidebar
+    sidebar = site_tree.index_blog.leftbar
   } else if (page.layout === 'index_topic') {
     // 专栏列表页等同于博客列表页
-    sidebar = site_tree.index_blog.sidebar
+    sidebar = site_tree.index_blog.leftbar
   } else if (page.topic?.length > 0) {
     // 专栏文章内页等同于普通文章内页
-    sidebar = site_tree.post.sidebar
+    sidebar = site_tree.post.leftbar
   } else if (page.layout === 'index_wiki') {
-    sidebar = site_tree.index_wiki.sidebar
+    sidebar = site_tree.index_wiki.leftbar
   } else if (page.wiki?.length > 0) {
-    sidebar = site_tree.wiki.sidebar
+    sidebar = site_tree.wiki.leftbar
   } else if (page.layout === '404') {
-    sidebar = site_tree.error_page.sidebar
+    sidebar = site_tree.error_page.leftbar
   } else if (page.layout === 'page') {
-    sidebar = site_tree.page.sidebar
+    sidebar = site_tree.page.leftbar
   } else if (page.layout === 'post') {
-    sidebar = site_tree.post.sidebar
+    sidebar = site_tree.post.leftbar
   } else if (page.layout == null) {
-    sidebar = site_tree.page.sidebar
+    sidebar = site_tree.page.leftbar
   } else {
     sidebar = []
   }
 
-  if (topic?.sidebar) {
-    sidebar = topic.sidebar
+  if (topic?.leftbar) {
+    sidebar = topic.leftbar
   }
-  if (wiki?.sidebar) {
-    sidebar = wiki.sidebar
+  if (wiki?.leftbar) {
+    sidebar = wiki.leftbar
   }
 
-  page.sidebar = sidebar
+  page.leftbar = sidebar
 }
 
 
 // parse array string
-if (typeof page.sidebar == 'string') {
-  page.sidebar = page.sidebar.replace(/ /g, '').split(',');
+if (typeof page.leftbar == 'string') {
+  page.leftbar = page.leftbar.replace(/ /g, '').split(',');
 }
+
+
 function layoutTitle(main, url, sub) {
   var el = '';
   el += '<a class="title" href="' + url_for(url || "/") + '">';
@@ -66,8 +68,8 @@ function layoutTitle(main, url, sub) {
 function layoutWidgets() {
   var el = '';
   el += '<div class="widgets">';
-  if (page.sidebar) {
-    page.sidebar.forEach((w, i) => {
+  if (page.leftbar) {
+    page.leftbar.forEach((w, i) => {
       let name = ''
       let widget = {}
       if (typeof w == 'string') {

package/layout/_partial/sidebar/index_rightbar.ejs

@@ -0,0 +1,84 @@
+<%
+
+const wiki = theme.wiki.tree[page.wiki]
+const topic = theme.topic.tree[page.topic]
+
+if (page.rightbar == null) {
+  const { site_tree } = theme
+  var sidebar
+  if (is_home()) {
+    sidebar = site_tree.home.rightbar
+  } else if (is_category() || is_tag() || is_archive() || ['categories', 'tags', 'archives'].includes(page.layout)) {
+    sidebar = site_tree.index_blog.rightbar
+  } else if (page.layout === 'index_topic') {
+    // 专栏列表页等同于博客列表页
+    sidebar = site_tree.index_blog.rightbar
+  } else if (page.topic?.length > 0) {
+    // 专栏文章内页等同于普通文章内页
+    sidebar = site_tree.post.rightbar
+  } else if (page.layout === 'index_wiki') {
+    sidebar = site_tree.index_wiki.rightbar
+  } else if (page.wiki?.length > 0) {
+    sidebar = site_tree.wiki.rightbar
+  } else if (page.layout === '404') {
+    sidebar = site_tree.error_page.rightbar
+  } else if (page.layout === 'page') {
+    sidebar = site_tree.page.rightbar
+  } else if (page.layout === 'post') {
+    sidebar = site_tree.post.rightbar
+  } else if (page.layout == null) {
+    sidebar = site_tree.page.rightbar
+  } else {
+    sidebar = []
+  }
+
+  if (topic?.rightbar) {
+    sidebar = topic.rightbar
+  }
+  if (wiki?.rightbar) {
+    sidebar = wiki.rightbar
+  }
+
+  page.rightbar = sidebar
+}
+
+
+// parse array string
+if (typeof page.rightbar == 'string') {
+  page.rightbar = page.rightbar.replace(/ /g, '').split(',');
+}
+
+function layoutWidgets() {
+  if (page.rightbar == null || page.rightbar.length == 0) {
+    return ''
+  }
+  var el = ''
+  if (page.rightbar) {
+    page.rightbar.forEach((w, i) => {
+      let name = ''
+      let widget = {}
+      if (typeof w == 'string') {
+        name = w
+      } else if (typeof w == 'object' && w.override) {
+        name = w.override
+      }
+      if (name in theme.widgets) {
+        Object.assign(widget, theme.widgets[name])
+      }
+      if (typeof w == 'object' && (w.override || w.layout)) {
+        Object.assign(widget, w)
+      }
+      if (widget && widget.layout) {
+        el += partial('../widgets/' + widget.layout, {item: widget})
+      }
+    });
+  }
+  if (el.trim().length > 0) {
+    return `<div class="widgets">${el}</div>`
+  } else {
+    return ''
+  }
+}
+
+%>
+<%- layoutWidgets() %>