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:
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
link: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/link/8f277b4ee0ecd.svg
cover: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/cover/76b86c0226ffd.svg
image: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/image/2659360.svg
project: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/image/2779789.png
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.9/link/8f277b4ee0ecd.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.9/image/2659360.svg
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

2
layout/404.ejs
View File

@ -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') %>

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

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

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

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

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('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))

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
}

51
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:
* {% 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">'
function layoutItem(a, i) {
var text = ''
var href = ''
var el = '<a'
if ((i+1).toString() === args.active) {
el += ' class="active"'
}
if (a.includes('](')) {
// markdown
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 + '"'
var el = `<div class="tag-plugin navbar"><nav class="cap">`
for (let link of args.links) {
const matches = link.match(/\[(.*?)\]\((.*?)\)/i)
if (matches?.length > 2) {
let text = matches[1]
let href = matches[2]
if (href == args.active) {
el += `<a class="link blur active" href="${href}">${text}</a>`
} else {
el += `<a class="link" href="${href}">${text}</a>`
}
} else {
el += ' href="#' + a + '"'
text = a
el += `<a class="link" href="#${link}">${link}</a>`
}
el += '>'
el += text
el += '</a>'
return el
}
(args.links || []).forEach((item, i) => {
el += layoutItem(item, i)
})
el += '</nav></div>'
}
el += `</nav></div>`
return el
}

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

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

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-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']

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

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

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

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

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

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

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

@ -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.screenshot = 'https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.5/cover/76b86c0226ffd.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.9/cover/76b86c0226ffd.svg';
sitesjs.layout(cfg);
}
});

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

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