xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[feat] banner plugin

This commit is contained in:
xaoxuu 2023-12-22 17:15:05 +08:00
parent 9e1fca5c12
commit 9d36c6d7d2
15 changed files with 209 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
_config.yml
View File

@ -182,16 +182,16 @@ comments:
footer: footer:
social: social:
# github: # 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: / # url: /
# music: # 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: / # url: /
# unsplash: # 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: / # url: /
# comments: # 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 # url: /about/#comments
sitemap: sitemap:
# '博客': # '博客':
@ -426,7 +426,7 @@ style:
underline: true # true / false underline: true # true / false
animated_avatar: animated_avatar:
animate: auto # auto, always 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: codeblock:
scrollbar: 4px scrollbar: 4px
highlightjs_theme: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/atom-one-dark.min.css 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)' search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)'
default: 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: api_host:
ghapi: https://api.github.com ghapi: https://api.github.com

2
layout/404.ejs
View File

@ -6,7 +6,7 @@ page.header = 'auto';
page.robots = 'none'; page.robots = 'none';
%> %>
<article class='md-text error-page'> <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'> <p class='what'>
<strong> <strong>
<%- __('page.error.what') %> <%- __('page.error.what') %>

8
layout/_partial/main/article/article_footer.ejs
View File

@ -103,13 +103,13 @@ function layoutDiv() {
} }
el += '>'; el += '>';
if (item == 'wechat') { 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') { } 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') { } 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') { } 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>'; el += '</a>';
} }

2
layout/_partial/main/post_list/post_card.ejs
View File

@ -90,7 +90,7 @@ function div_default() {
} }
} }
if (post.pin) { 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 += '</div>';
el += '</article>'; el += '</article>';

1
scripts/tags/index.js
View File

@ -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('grid', require('./lib/grid')(hexo), true)
hexo.extend.tag.register('swiper', require('./lib/swiper')(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('gallery', require('./lib/gallery')(hexo), {ends: true})
hexo.extend.tag.register('banner', require('./lib/banner')(hexo), true)
// data // data
hexo.extend.tag.register('users', require('./lib/friends')(hexo)) hexo.extend.tag.register('users', require('./lib/friends')(hexo))

68
scripts/tags/lib/banner.js Normal file
View File

@ -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
}

49
scripts/tags/lib/navbar.js
View File

@ -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: * example:
* {% navbar active:1 [Home](/) [About](/about/) [Comments](#comments) %} * {% navbar active:/about/ [Home](/) [About](/about/) [Comments](#comments) %}
*/ */
'use strict' 'use strict'
@ -18,40 +18,21 @@ module.exports = ctx => function(args) {
if (args.links) { if (args.links) {
args.links = args.links.split(' ') 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 { } else {
el += ' href="#' + a + '"' el += `<a class="link" href="#${link}">${link}</a>`
text = a
} }
el += '>'
el += text
el += '</a>'
return el
} }
(args.links || []).forEach((item, i) => { el += `</nav></div>`
el += layoutItem(item, i)
})
el += '</nav></div>'
return el return el
} }

4
source/css/_layout/partial/paginator.styl
View File

@ -28,10 +28,10 @@
background-clip: content-box background-clip: content-box
&.next &.next
border-left: 1px dashed var(--block-border) 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 &.prev
border-right: 1px dashed var(--block-border) 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 .current
font-family: $ff-code font-family: $ff-code
background: var(--block) background: var(--block)

99
source/css/_layout/tag-plugins/banner.styl Normal file
View File

@ -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

2
source/css/_layout/tag-plugins/frame.styl
View File

@ -27,7 +27,7 @@
margin-top: 19px margin-top: 19px
margin-bottom: 20px margin-bottom: 20px
.frame .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 width: 329px
height: 658px height: 658px
&[focus='top'] &[focus='top']

2
source/js/plugins/fcircle.js
View File

@ -86,7 +86,7 @@ $(function () {
var cfg = new Object(); var cfg = new Object();
cfg.el = el; cfg.el = el;
cfg.api = api; 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); FCircle.layoutDiv(cfg);
} }
}); });

2
source/js/plugins/friends.js
View File

@ -78,7 +78,7 @@ $(function () {
cfg.el = el; cfg.el = el;
cfg.api = api; cfg.api = api;
cfg.class = el.getAttribute('class'); 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); friendsjs.layout(cfg);
} }
}); });

2
source/js/plugins/memos.js
View File

@ -126,7 +126,7 @@ $(function () {
cfg.host = api.replace(/https:\/\/(.*?)\/(.*)/i, '$1'); cfg.host = api.replace(/https:\/\/(.*?)\/(.*)/i, '$1');
cfg.avatar = el.getAttribute('avatar'); cfg.avatar = el.getAttribute('avatar');
if (!cfg.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); MemosJS.layoutDiv(cfg);
} }

4
source/js/plugins/sites.js
View File

@ -81,8 +81,8 @@ $(function () {
cfg.class = el.getAttribute('class'); cfg.class = el.getAttribute('class');
cfg.el = el; cfg.el = el;
cfg.api = api; 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); sitesjs.layout(cfg);
} }
}); });

2
source/js/plugins/weibo.js
View File

@ -110,7 +110,7 @@ $(function () {
var cfg = new Object(); var cfg = new Object();
cfg.el = el; cfg.el = el;
cfg.api = api; 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); weibojs.layoutDiv(cfg);
} }
}); });