hexo-theme-stellar 1.23.0 → 1.24.0

package/_config.yml

@@ -1,6 +1,6 @@
 ######## Stellar info ########
 stellar:
-  version: '1.23.0'
+  version: '1.24.0'
   homepage: 'https://xaoxuu.com/wiki/stellar/'
   repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
   cdn_css: # Use cdn links instead of /css/main.css
@@ -59,6 +59,8 @@ breadcrumb:
 article:
   # 如果没有指定封面，是否根据 tags 作为关键词搜索封面图片？
   auto_cover: false # search from https://source.unsplash.com/
+  # 封面图宽高比
+  cover_ratio: 2.4
   # 如果没有指定横幅，是否根据 tags 作为关键词搜索横幅图片？
   auto_banner: false # search from https://source.unsplash.com/
   # 如果没有指定 excerpt 和 description，将自动取多长的内容作为文章摘要？
@@ -213,7 +215,7 @@ footer:
     #   - '[关于本站](/)'
     #   - '[GitHub](/)'
   content: | # 支持 Markdown 格式
-    本站由 [${author}](/) 使用 [${theme.name} ${theme.version}](${theme.tree}) 主题创建。
+    本站由 [${author.name}](/) 使用 [${theme.name} ${theme.version}](${theme.tree}) 主题创建。
     本博客所有文章除特别声明外，均采用 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/) 许可协议，转载请注明出处。
   # 主题用户越多，开发者维护和更新的积极性就越高，如果您喜欢本主题，请在适当的位置显示主题信息和仓库链接以表支持。
 
@@ -303,6 +305,7 @@ plugins:
     fcircle: /js/plugins/fcircle.js
     weibo: /js/plugins/weibo.js
     memos: /js/plugins/memos.js
+    marked: /js/plugins/marked.js
 
   marked: https://cdn.bootcdn.net/ajax/libs/marked/4.0.18/marked.min.js
 

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

@@ -40,25 +40,36 @@ function layoutDiv() {
   var license = ''
   if (page.layout == 'post') {
     if (theme.article.license && (page.license != false)) {
-      license = markdown(page.license || theme.article.license)
+      license = page.license || theme.article.license
     }
   } else if (page.layout == 'wiki' && page.wiki) {
     let proj = theme.wiki.tree[page.wiki]
     if (page.license != null) {
-      license = markdown(page.license || theme.article.license)
+      license = page.license || theme.article.license
     } else if (proj?.license != null) {
       if (proj.license == true) {
-        license = markdown(theme.article.license)
+        license = theme.article.license
       } else {
-        license = markdown(proj.license)
+        license = proj.license
       }
     }
   }
   if (license.length > 0) {
+    var author = null
+    if (theme.authors) {
+      if (page.author?.length > 0 && theme.authors[page.author] != null) {
+        author = theme.authors[page.author]
+      } else {
+        author = theme.default_author
+      }
+    }
+    if (author) {
+      license = license.replace('${author.name}', author.name).replace('${author.url}', author.url)
+    }
     el += `
     <section id="license">
       <div class="header"><span>${__('meta.license')}</span></div>
-      <div class="body">${license}</div>
+      <div class="body">${markdown(license)}</div>
     </section>
     `
   }

package/layout/_partial/main/footer.ejs

@@ -1,41 +1,35 @@
 <%
-const content = theme.footer.content?.replace('${author}', config.author)?.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 reveal fs12">';
-  el += '<hr>';
+  var el = ''
+  el += '<footer class="page-footer reveal fs12">'
+  el += '<hr>'
   // sitemap
   if (theme.footer.sitemap && Object.keys(theme.footer.sitemap).length > 0) {
-    el += '<div class="sitemap">';
+    el += '<div class="sitemap">'
     for (let group of Object.keys(theme.footer.sitemap)) {
-      let items = theme.footer.sitemap[group];
+      let items = theme.footer.sitemap[group]
       if (items == undefined || items.length == 0) {
-        continue;
+        continue
       }
-      el += '<div class="sitemap-group">';
-      el += '<span class="fs14">' + group + '</span>';
+      el += '<div class="sitemap-group">'
+      el += '<span class="fs14">' + group + '</span>'
       items.forEach((item, i) => {
-        el += '<a href="' + url_for(md_link(item)) + '">';
-        el += __(md_text(item));
-        el += '</a>';
+        el += '<a href="' + url_for(md_link(item)) + '">'
+        el += __(md_text(item))
+        el += '</a>'
       });
-      el += '</div>';
+      el += '</div>'
     }
-    el += '</div>';
+    el += '</div>'
   }
   // footer
-  el += '<div class="text">';
+  el += '<div class="text">'
   if (content) {
-    if ((typeof content == 'string') && content.constructor == String) {
-      el += markdown(content);
-    } else if ((typeof content == 'object') && content.constructor == Array) {
-      content.forEach((item, i) => {
-        el += markdown(item);
-      });
-    }
+    el += markdown(content)
   }
-  el += '</div></footer>';
-  return el;
+  el += '</div></footer>'
+  return el
 }
 %>
 <%- layoutDiv() %>

package/layout/_partial/widgets/markdown.ejs

@@ -1,6 +1,6 @@
 <%
 function layoutDiv() {
-  if (!item.content?.length) return ''
+  if (!item.content?.length && !item.src?.length) return ''
   var el = '';
   el += '<widget class="widget-wrapper markdown">';
   if (item.title?.length > 0) {
@@ -9,7 +9,12 @@ function layoutDiv() {
     el += '</div>';
   }
   el += '<div class="widget-body fs14">';
-  el += markdown(item.content);
+  if (item.content) {
+    el += markdown(item.content);
+  }
+  if (item.src) {
+    el += `<div class="stellar-marked-api md-marked" src="${item.src}"></div>`
+  }
   el += '</div>';
   el += '</widget>';
   return el;

package/package.json

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

package/scripts/tags/index.js

@@ -22,6 +22,7 @@ hexo.extend.tag.register('sites', require('./lib/sites')(hexo))
 hexo.extend.tag.register('ghcard', require('./lib/ghcard')(hexo))
 hexo.extend.tag.register('toc', require('./lib/toc')(hexo))
 hexo.extend.tag.register('timeline', require('./lib/timeline')(hexo), {ends: true})
+hexo.extend.tag.register('md', require('./lib/md')(hexo))
 
 // express
 hexo.extend.tag.register('checkbox', require('./lib/checkbox')(hexo, 'checkbox'))
@@ -38,4 +39,6 @@ hexo.extend.tag.register('poetry', require('./lib/poetry')(hexo), true)
 hexo.extend.tag.register('quot', require('./lib/quot')(hexo))
 hexo.extend.tag.register('hashtag', require('./lib/hashtag')(hexo))
 hexo.extend.tag.register('okr', require('./lib/okr')(hexo), {ends: true})
+hexo.extend.tag.register('audio', require('./lib/audio')(hexo))
+hexo.extend.tag.register('video', require('./lib/video')(hexo))
 // others

package/scripts/tags/lib/audio.js

@@ -0,0 +1,23 @@
+/**
+ * audio.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% audio src %}
+ *
+ */
+
+'use strict';
+
+module.exports = ctx => function(args) {
+  args = ctx.args.map(args, ['type'], ['src'])
+  if (args.type == null) {
+    args.type = 'audio/mp3'
+  }
+  return `
+  <div class="tag-plugin video">
+  <audio controls preload>
+  <source src="${args.src}" type="${args.type}">Your browser does not support the audio tag.
+  </audio>
+  </div>
+  `
+}

package/scripts/tags/lib/grid.js

@@ -2,10 +2,10 @@
  * grid.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% grid [style:block/card] %}
- * <!-- cell left -->
+ * {% grid [bg:box/card] [w:240px] [c:2] [gap:16px] [br:12px] %}
+ * <!-- cell -->
  * left body
- * <!-- cell right -->
+ * <!-- cell -->
  * right body
  * {% endgrid %}
  */
@@ -13,37 +13,37 @@
 'use strict'
 
 module.exports = ctx => function(args, content) {
-  args = ctx.args.map(args, ['bg'])
+  args = ctx.args.map(args, ['bg', 'w', 'c', 'gap', 'br'])
+  if (args.w == null && args.c == null) {
+    args.w = '240px'
+  }
   var el = ''
   el += '<div class="tag-plugin grid"'
-  el += ' ' + ctx.args.joinTags(args, ['bg']).join(' ')
+  el += ' ' + ctx.args.joinTags(args, ['bg', 'columns']).join(' ')
+  el += ' style="'
+  if (args.w) {
+    el += `grid-template-columns: repeat(auto-fill, minmax(${args.w}, 1fr));`
+  } else if (args.c) {
+    el += `grid-template-columns: repeat(${args.c}, 1fr);`
+  }
+  if (args.gap) {
+    el += `grid-gap:${args.gap};`
+  }
+  el += '"'
   el += '>'
-  
-  var arr = content.split(/<!--\s*cell (.*?)\s*-->/g).filter(item => item.trim().length > 0)
-  if (arr.length > 0) {
-    var nodes = []
-    arr.forEach((item, i) => {
-      if (i % 2 == 0) {
-        nodes.push({
-          header: item
-        })
-      } else if (nodes.length > 0) {
-        var node = nodes[nodes.length-1]
-        if (node.body == undefined) {
-          node.body = item
-        } else {
-          node.body += '\n' + item
-        }
-      }
-    })
-    nodes.forEach((node, i) => {
-      el += '<div class="cell" index="' + (i) + '">'
-      el += ctx.render.renderSync({text: (node.body || ''), engine: 'markdown'}).split('\n').join('')
-      el += '</div>'
-    })  
+  // 分组
+  var cells = content.split(/<!--\s*cell(.*?)-->/g).filter(item => item.trim().length > 0)
+  for (let cell of cells) {
+    el += `<div class="cell" style="`
+    if (args.br) {
+      el += `border-radius:${args.br};`
+    }
+    el += `">`
+    el += `
+    ${ctx.render.renderSync({text: (cell || ''), engine: 'markdown'}).split('\n').join('')}
+    </div>
+    `
   }
-
   el += '</div>'
-
   return el
 }

package/scripts/tags/lib/md.js

@@ -0,0 +1,20 @@
+/**
+ * md.js v1.0 | https://github.com/volantis-x/hexo-theme-volantis/
+ * contributor: @MHuiG
+ * 
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% md src %}
+ *
+ */
+'use strict'
+
+var md_index = 0
+
+module.exports = ctx => function(args) {
+  args = ctx.args.map(args, [''], ['src'])
+  const md_id = "md_" + ++md_index
+  return `
+  <div class="stellar-marked-api md-marked" src="${args.src}" id="${md_id}"></div>
+  `
+}

package/scripts/tags/lib/video.js

@@ -0,0 +1,23 @@
+/**
+ * video.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% video src %}
+ *
+ */
+
+'use strict';
+
+module.exports = ctx => function(args) {
+  args = ctx.args.map(args, ['type'], ['src'])
+  if (args.type == null) {
+    args.type = 'video/mp4'
+  }
+  return `
+  <div class="tag-plugin video">
+  <video controls preload>
+  <source src="${args.src}" type="${args.type}">Your browser does not support the video tag.
+  </video>
+  </div>
+  `
+}

package/source/css/_common/media.styl

@@ -0,0 +1,9 @@
+audio,video
+  border-radius: $border-block
+  max-width: 100%
+video
+  z-index: 1
+  box-shadow: $boxshadow-card-float
+.video
+  line-height: 0
+  text-align: center

package/source/css/_layout/list.styl

@@ -84,22 +84,16 @@
     object-fit: cover
     width: 100%
     border-radius: 0
-    height: 280px
-    @media screen and (max-width: 900px)
-      height: 240px
-    @media screen and (max-width: $device-tablet)
-      height: 220px
-    @media screen and (max-width: $device-mobile-425)
-      height: 200px
-    @media screen and (max-width: $device-mobile-375)
-      height: 180px
-
+    aspect-ratio: hexo-config('article.cover_ratio')
+    
 .post-list .post-card.post.photo
   .cover
     position: relative
     line-height: 0
     img
       width: 100%
+      object-fit: cover
+      aspect-ratio: hexo-config('article.cover_ratio')
     .cover-info
       padding: 1.5rem 1rem
       position: absolute

package/source/css/_layout/md.styl

@@ -161,3 +161,6 @@ h1.article-title
           bottom: 0
           left: -2px
           right: -2px
+      &:has(img)
+        &:before
+          content: none

package/source/css/_layout/pages/archives.styl

@@ -8,7 +8,7 @@
     margin-bottom: .5em
     position: relative
     padding: 4px 0
-    color: var(--text-p3)
+    color: var(--text-p1)
     &:after
       content: ""
       position: absolute
@@ -18,7 +18,7 @@
       right: 0
       z-index: -1
       border-radius: 4px
-      background: var(--block-border)
+      background: $color-theme
   a.post
     display: inline-flex
     align-items: baseline
@@ -34,13 +34,9 @@
       color: var(--text-p4)
     &:hover
       border-bottom: 1px solid $color-theme
+      color: var(--text-p0)
       time
         color: $color-theme
-  &:hover
-    .archive-header
-      color: var(--text-p1)
-      &:after
-        background: $color-theme
 
 
 

package/source/css/_layout/partial/cover.styl

@@ -21,6 +21,7 @@
     font-size: 1.5rem
     margin: 1rem 0
     line-height: 1.2
+    color: var(--text-p0)
   .description
     margin: 1rem 0
   .start-wrap

package/source/css/_layout/tag-plugins/banner.styl

@@ -6,9 +6,9 @@
   flex-direction: column
   justify-content: flex-end
   align-items: flex-start
-  height: 240px
+  height: 220px
   @media screen and (max-width: $device-mobile-max)
-    height: 200px
+    height: 180px
   .bg
     z-index: 0
   .content 

package/source/css/_layout/tag-plugins/folding.styl

@@ -60,8 +60,14 @@ details.folding[child=codeblock]>div.body
     margin: 0
     figcaption
       display: none
+      span
+        background: var(--theme-block)
     .code:before
       content: none
+  .highlight+.highlight
+    border-top: 1px dashed var(--theme-border)
+    border-top-left-radius: 0
+    border-top-right-radius: 0
 
 details.folding[child=iframe]
   overflow: hidden

package/source/css/_layout/tag-plugins/friends.styl

@@ -19,7 +19,10 @@
     padding: 1rem 0.5rem
     .name
       max-width: 100%
-      txt-ellipsis()
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 2
     img
       object-fit: cover
       display: block

package/source/css/_layout/tag-plugins/grid.styl

@@ -1,11 +1,7 @@
 .tag-plugin.grid
   display: grid
   grid-gap: 16px
-  grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
-  >.cell
-    p:first-child>strong:only-child
-      font-size: 1rem
-  >.cell>
+  &[bg]>.cell>
     p   
       line-height: 1.5
     :first-child
@@ -21,7 +17,7 @@
   &[bg]>.cell
     padding: 1rem
     border-radius: $border-card
-  &[bg='block']>.cell
+  &[bg='box']>.cell
     background: var(--block)
   &[bg='card']>.cell
     background: var(--card)

package/source/css/_layout/tag-plugins/link.styl

@@ -9,7 +9,7 @@
   justify-content: space-between
   align-items: center
   cursor: pointer
-  width: 320px
+  width: 340px
   max-width: 100%
   box-shadow: $boxshadow-card
   border-radius: $border-bar

package/source/css/_layout/tag-plugins/note.styl

@@ -40,6 +40,13 @@
     margin: 0
     border: none
     background: none
+    figcaption
+      span
+        background: var(--theme-block)
+  .highlight+.highlight
+    border-top: 1px dashed var(--theme-border)
+    border-top-left-radius: 0
+    border-top-right-radius: 0
 
 .md-text .tag-plugin.note[child=tabs]
   >.body

package/source/css/_plugins/copycode.styl

@@ -5,35 +5,36 @@
   position: absolute
   top: 0
   right: 0
-  padding: 4px 0.5rem
-  opacity: 0
+  padding: 0px 0.5rem
   font-weight: 700
-  color: var(--text-p2)
+  visibility: hidden
   border-bottom-left-radius: $border-bar
   border-bottom-right-radius: $border-bar
-  background: var(--block-hover)
+  background: var(--card)
   display: block
   cursor: pointer
-  margin-right: 0.5rem
+  margin-right: 4px
+  margin-top: 4px
+  border-radius: 'calc(%s - 4px)' % $border-block
 
 .highlight:hover
   .code:before
-    opacity: 0
+    visibility: hidden
   .copy-btn 
-    opacity: 0.75
-
-.highlight .code .copy-btn:hover
-  opacity: 1
+    visibility: visible
 
 .highlight .code .copy-btn.success
-  color: $c-green
-  opacity: 0.75
+  background: $c-green
+  color: white
+  visibility: visible
 
 .highlight .code .copy-btn.warning
-  color: $c-orange
-  opacity: 0.75
+  background: $c-orange
+  color: white
+  visibility: visible
 
 .md-text .folding[child=codeblock]
-  .highlight .code .copy-btn
-    margin-top: 1rem
+  .code .copy-btn
+    z-index 1
+    margin-right: 1rem
     border-radius: $border-bar

package/source/js/main.js

@@ -242,7 +242,7 @@ if (stellar.plugins.stellar) {
       const els = document.getElementsByClassName('stellar-' + key + '-api');
       if (els != undefined && els.length > 0) {
         stellar.jQuery(() => {
-          if (key == 'timeline' || 'memos') {
+          if (key == 'timeline' || 'memos' || 'marked') {
             stellar.loadScript(stellar.plugins.marked).then(function () {
               stellar.loadScript(js, { defer: true });
             });

package/source/js/plugins/copycode.js

@@ -13,7 +13,7 @@ codeElementArr.forEach(code => {
 
     codeCopyBtn.innerText = stellar.plugins.copycode.success_text
     codeCopyBtn.classList.add('success')
-    hud.toast(stellar.plugins.copycode.toast)
+    hud.toast(stellar.plugins.copycode.toast, 2500)
     setTimeout(() => {
       codeCopyBtn.innerText = stellar.plugins.copycode.default_text
       codeCopyBtn.classList.remove('success')

package/source/js/plugins/marked.js

@@ -0,0 +1,50 @@
+const loadMarkdown = (cfg) => {
+  if (!window.fetch) {
+    cfg.el.innerHTML =
+      '<div style="font-size: 24px"><p>Your browser outdated. Please use the latest version of Chrome or Firefox!</p><p>您的浏览器版本过低，请使用最新版的 Chrome 或 Firefox 浏览器！</p></div>';
+  } else {
+    cfg.el.innerHTML =
+      '<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>';
+    fetch(cfg.src, { method: "GET" })
+      .then((resp) => {
+        return Promise.all([
+          resp.ok,
+          resp.status,
+          resp.text(),
+          resp.headers,
+        ]);
+      })
+      .then(([ok, status, data, headers]) => {
+        if (ok) {
+          return {
+            ok,
+            status,
+            data,
+            headers,
+          };
+        } else {
+          throw new Error(JSON.stringify(json.error));
+        }
+      })
+      .then((resp) => {
+        let data = marked.parse(resp.data);
+        cfg.el.innerHTML = data;
+      })
+      .catch((error) => {
+        console.error(error);
+        cfg.el.innerHTML =
+          '<div class="loading-wrap error"><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></div>';
+      });
+  };
+};
+
+$(function () {
+  const els = document.getElementsByClassName('stellar-marked-api');
+  for (var i = 0; i < els.length; i++) {
+    var cfg = new Object();
+    const el = els[i];
+    cfg.src = `${el.getAttribute('src')}?t=${new Date().getTime()}`;
+    cfg.el = el;
+    loadMarkdown(cfg);
+  }
+});