[feat] banner plugin

_config.yml

@@ -182,16 +182,16 @@ comments:
 footer:
   social:
     # github:
-    #   icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/social/08a41b181ce68.svg"/>'
+    #   icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/social/08a41b181ce68.svg"/>'
     #   url: /
     # music:
-    #   icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/social/3845874.svg"/>'
+    #   icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/social/3845874.svg"/>'
     #   url: /
     # unsplash:
-    #   icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/social/3616429.svg"/>'
+    #   icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/social/3616429.svg"/>'
     #   url: /
     # comments:
-    #   icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/social/942ebbf1a4b91.svg"/>'
+    #   icon: '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/social/942ebbf1a4b91.svg"/>'
     #   url: /about/#comments
   sitemap:
     # '博客':
@@ -426,7 +426,7 @@ style:
     underline: true # true / false
   animated_avatar:
     animate: auto # auto, always
-    background: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/avatar/round/rainbow64@3x.webp
+    background: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/avatar/round/rainbow64@3x.webp
   codeblock:
     scrollbar: 4px
     highlightjs_theme: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/atom-one-dark.min.css
@@ -438,11 +438,12 @@ style:
     search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)'
 
 default:
-  avatar: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/avatar/round/3442075.svg
+  avatar: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/avatar/round/3442075.svg
-  link: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/link/8f277b4ee0ecd.svg
+  link: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/link/8f277b4ee0ecd.svg
-  cover: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/cover/76b86c0226ffd.svg
+  cover: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/cover/76b86c0226ffd.svg
-  image: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/image/2659360.svg
+  image: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/image/2659360.svg
-  project: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/image/2779789.png
+  project: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/image/2779789.png
+  banner: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/banner/books.jpg
 
 api_host:
   ghapi: https://api.github.com

layout/404.ejs

@@ -6,7 +6,7 @@ page.header = 'auto';
 page.robots = 'none';
 %>
 <article class='md-text error-page'>
-  <h1><img id='error' src='https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/404/1c830bfcd517d.svg' alt='404'></h1>
+  <h1><img id='error' src='https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/404/1c830bfcd517d.svg' alt='404'></h1>
   <p class='what'>
     <strong>
       <%- __('page.error.what') %>

layout/_partial/main/article/article_footer.ejs

@@ -103,13 +103,13 @@ function layoutDiv() {
           }
           el += '>';
           if (item == 'wechat') {
-            el += '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/social/b32ef3da1162a.svg"/>';
+            el += '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/social/b32ef3da1162a.svg"/>';
           } else if (item == 'weibo') {
-            el += '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/social/80c07e4dbb303.svg"/>';
+            el += '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/social/80c07e4dbb303.svg"/>';
           } else if (item == 'email') {
-            el += '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/social/a1b00e20f425d.svg"/>';
+            el += '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/social/a1b00e20f425d.svg"/>';
           } else if (item == 'link') {
-            el += '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/social/8411ed322ced6.svg"/>';
+            el += '<img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/social/8411ed322ced6.svg"/>';
           }
           el += '</a>';
         }

layout/_partial/main/post_list/post_card.ejs

@@ -90,7 +90,7 @@ function div_default() {
     }
   }
   if (post.pin) {
-    el += '<span class="pin"><img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/badge/3279dd441df8b.svg"/></span>';
+    el += '<span class="pin"><img src="https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/badge/3279dd441df8b.svg"/></span>';
   }
   el += '</div>';
   el += '</article>';

scripts/tags/index.js

@@ -11,6 +11,7 @@ hexo.extend.tag.register('folders', require('./lib/folders')(hexo), true)
 hexo.extend.tag.register('grid', require('./lib/grid')(hexo), true)
 hexo.extend.tag.register('swiper', require('./lib/swiper')(hexo), true)
 hexo.extend.tag.register('gallery', require('./lib/gallery')(hexo), {ends: true})
+hexo.extend.tag.register('banner', require('./lib/banner')(hexo), true)
 
 // data
 hexo.extend.tag.register('users', require('./lib/friends')(hexo))

scripts/tags/lib/banner.js

@@ -0,0 +1,68 @@
+/**
+ * banner.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% banner title [subtitle] [bg:src] [avatar:src] [link] %}
+ * {% navbar xxx %}
+ * {% endbanner %}
+ */
+
+'use strict';
+
+module.exports = ctx => function(args, content) {
+  const url_for = require('hexo-util').url_for.bind(ctx)
+  args = ctx.args.map(args, ['bg', 'avatar', 'link'], ['title', 'subtitle'])
+  var el = ''
+  el += `<div class="tag-plugin banner">`
+  // bg
+  el += `<img class="bg" src="${args.bg ? args.bg : ctx.theme.config.default.banner}">`
+  // content
+  el += `<div class="content">`
+  // content.top
+  el += `<div class="top">`
+  // content.top.back
+  if (args.link?.length > 0) {
+    el += `<div></div>`
+  } else {
+    el += `
+    <a class="back cap" href="${url_for(ctx.config.root)}">
+      <svg aria-hidden="true" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path></svg>
+    </a>
+    `
+  }
+  
+  // content.top.menus
+  const rows = content.split('\n').filter(item => item.trim().length > 0)
+  for (let row of rows) {
+    if (row.includes('tag-plugin navbar')) {
+      el += row
+      break
+    }
+  }
+  el += `</div>`
+  // content.bottom
+  el += `<div class="bottom">`
+  // content.bottom.avatar
+  if (args.avatar?.length > 0) {
+    el += `<img class="avatar" src="${args.avatar}">`
+  }
+  // content.bottom.text-area
+  if (args.title?.length > 0 || args.subtitle?.length > 0) {
+    el += `<div class="text-area">`
+    if (args.title?.length > 0) {
+      el += `<div class="text title">${args.title}</div>`
+    }
+    if (args.subtitle?.length > 0) {
+      el += `<div class="text subtitle">${args.subtitle}</div>`
+    }
+    el += `</div>`
+  }
+  el += `</div>`
+  el += `</div>`
+  // link
+  if (args.link?.length > 0) {
+    el += `<a class="banner-link" href="${args.link}"></a>`
+  }
+  el += `</div>`
+  return el
+}

scripts/tags/lib/navbar.js

@@ -1,11 +1,11 @@
 /**
- * navbar.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * navbar.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% navbar [markdown link] ... %}
+ * {% navbar [active:url] [markdown-link] ... %}
  *
  * example:
- * {% navbar active:1 [Home](/) [About](/about/) [Comments](#comments) %}
+ * {% navbar active:/about/ [Home](/) [About](/about/) [Comments](#comments) %}
  */
 
 'use strict'
@@ -18,40 +18,21 @@ module.exports = ctx => function(args) {
   if (args.links) {
     args.links = args.links.split(' ')
   }
-  var el = '<div class="tag-plugin navbar"><nav class="cap">'
+  var el = `<div class="tag-plugin navbar"><nav class="cap">`
-  function layoutItem(a, i) {
+  for (let link of args.links) {
-    var text = ''
+    const matches = link.match(/\[(.*?)\]\((.*?)\)/i)
-    var href = ''
+    if (matches?.length > 2) {
-    var el = '<a'
+      let text = matches[1]
-    if ((i+1).toString() === args.active) {
+      let href = matches[2]
-      el += ' class="active"'
+      if (href == args.active) {
-    }
+        el += `<a class="link blur active" href="${href}">${text}</a>`
-    if (a.includes('](')) {
+      } else {
-      // markdown
+        el += `<a class="link" href="${href}">${text}</a>`
-      let tmp = a.split('](')
-      if (tmp.length > 1) {
-        text = tmp[0]
-        if (text.length > 1) {
-          text = text.substring(1, text.length)
-        }
-        href = tmp[1]
-        if (href.length > 1) {
-          href = href.substring(0, href.length-1)
-        }
-        el += ' href="' + href + '"'
       }
     } else {
-      el += ' href="#' + a + '"'
+      el += `<a class="link" href="#${link}">${link}</a>`
-      text = a
     }
-    el += '>'
+  }
-    el += text
+  el += `</nav></div>`
-    el += '</a>'
-    return el
-  }
-  (args.links || []).forEach((item, i) => {
-    el += layoutItem(item, i)
-  })
-  el += '</nav></div>'
   return el
 }

source/css/_layout/partial/paginator.styl

@@ -28,10 +28,10 @@
     background-clip: content-box
     &.next
       border-left: 1px dashed var(--block-border)
-      background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/arrow/064b95430caf4.svg')
+      background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/arrow/064b95430caf4.svg')
     &.prev
       border-right: 1px dashed var(--block-border)
-      background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/arrow/f049bbd4e88ec.svg')
+      background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/arrow/f049bbd4e88ec.svg')
   .current
     font-family: $ff-code
     background: var(--block)

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

@@ -0,0 +1,99 @@
+.tag-plugin.banner
+  background: var(--block)
+  border-radius: $border-card
+  position: relative
+  overflow: hidden
+  display: flex 
+  flex-direction: column
+  justify-content: flex-end
+  align-items: flex-start
+  color: white
+  height: 240px
+  @media screen and (max-width: $device-mobile-max)
+    height: 200px
+  .bg
+    z-index: 0
+  .content 
+    z-index: 1
+    width: 100%
+    height: 100%
+    display: flex
+    flex-direction: column
+    justify-content: space-between
+    .top
+      display: flex
+      justify-content: space-between
+      align-items: center
+      line-height: 1
+      margin: 1rem
+      .navbar
+        margin: 0
+        nav.cap
+          border-radius: 6px
+          background: rgba(black, 0.2)
+        .link
+          color: rgba(white, 0.8)
+          padding: 2px 6px
+          border-radius: 4px
+          background: none
+          line-height: 1.5
+          font-size: $fs-15
+          &:hover
+            color: white
+            background: rgba(black, 0.5)
+          &.active
+            color: white
+            background: rgba(white, 0.25)
+      .back
+        line-height: 0
+        visibility: hidden
+        @media screen and (max-width: $device-mobile-max)
+          visibility: visible
+        svg
+          width: 20px
+          height: 20px
+          fill: white
+  .banner-link
+    position: absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+    opacity 0
+  img
+    object-fit: cover
+    disable-select()
+    margin: 0
+    height: 100%
+    width: 100%
+  img.bg
+    position absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+  img.avatar
+    border-radius: 50%
+    width: 48px
+    height: 48px
+    border: 2px solid white
+  .bottom
+    display: flex
+    padding: 1rem
+    width: 100%
+    box-sizing: border-box
+    background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2))
+    text-shadow: 0 0 1px rgba(0,0,0,0.12)
+    .title
+      font-size: 1.5rem
+      font-weight: 600
+    .avatar+.text-area
+      margin-left: 0.75rem
+    .text-area .text
+      line-height: 1.2
+      margin-top: 0.25rem
+      margin-bottom: 0.25rem
+    .avatar+.text-area .title
+      font-size: 1.2rem
+    .subtitle
+      font-size: $fs-14

source/css/_layout/tag-plugins/frame.styl

@@ -27,7 +27,7 @@
       margin-top: 19px
       margin-bottom: 20px
     .frame
-      background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/frame/iphone11.svg);
+      background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/frame/iphone11.svg);
       width: 329px
       height: 658px
   &[focus='top']

source/js/plugins/fcircle.js

@@ -86,7 +86,7 @@ $(function () {
     var cfg = new Object();
     cfg.el = el;
     cfg.api = api;
-    cfg.avatar = 'https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/avatar/round/3442075.svg';
+    cfg.avatar = 'https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/avatar/round/3442075.svg';
     FCircle.layoutDiv(cfg);
   }
 });

source/js/plugins/friends.js

@@ -78,7 +78,7 @@ $(function () {
     cfg.el = el;
     cfg.api = api;
     cfg.class = el.getAttribute('class');
-    cfg.avatar = 'https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/avatar/round/3442075.svg';
+    cfg.avatar = 'https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/avatar/round/3442075.svg';
     friendsjs.layout(cfg);
   }
 });

source/js/plugins/memos.js

@@ -126,7 +126,7 @@ $(function () {
     cfg.host = api.replace(/https:\/\/(.*?)\/(.*)/i, '$1');
     cfg.avatar = el.getAttribute('avatar');
     if (!cfg.avatar) {
-      cfg.avatar = 'https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/avatar/round/3442075.svg';
+      cfg.avatar = 'https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/avatar/round/3442075.svg';
     }
     MemosJS.layoutDiv(cfg);
   }

source/js/plugins/sites.js

@@ -81,8 +81,8 @@ $(function () {
     cfg.class = el.getAttribute('class');
     cfg.el = el;
     cfg.api = api;
-    cfg.avatar = 'https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/link/8f277b4ee0ecd.svg';
+    cfg.avatar = 'https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/link/8f277b4ee0ecd.svg';
-    cfg.screenshot = 'https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/cover/76b86c0226ffd.svg';
+    cfg.screenshot = 'https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/cover/76b86c0226ffd.svg';
     sitesjs.layout(cfg);
   }
 });

source/js/plugins/weibo.js

@@ -110,7 +110,7 @@ $(function () {
     var cfg = new Object();
     cfg.el = el;
     cfg.api = api;
-    cfg.avatar = 'https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/avatar/round/3442075.svg';
+    cfg.avatar = 'https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/avatar/round/3442075.svg';
     weibojs.layoutDiv(cfg);
   }
 });