From 9d36c6d7d238d5b0183dafa22fd54d0d636420d3 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Fri, 22 Dec 2023 17:15:05 +0800 Subject: [PATCH] [feat] banner plugin --- _config.yml | 21 ++-- layout/404.ejs | 2 +- .../_partial/main/article/article_footer.ejs | 8 +- layout/_partial/main/post_list/post_card.ejs | 2 +- scripts/tags/index.js | 1 + scripts/tags/lib/banner.js | 68 +++++++++++++ scripts/tags/lib/navbar.js | 49 +++------ source/css/_layout/partial/paginator.styl | 4 +- source/css/_layout/tag-plugins/banner.styl | 99 +++++++++++++++++++ source/css/_layout/tag-plugins/frame.styl | 2 +- source/js/plugins/fcircle.js | 2 +- source/js/plugins/friends.js | 2 +- source/js/plugins/memos.js | 2 +- source/js/plugins/sites.js | 4 +- source/js/plugins/weibo.js | 2 +- 15 files changed, 209 insertions(+), 59 deletions(-) create mode 100644 scripts/tags/lib/banner.js create mode 100644 source/css/_layout/tag-plugins/banner.styl diff --git a/_config.yml b/_config.yml index a3c4690..e104ede 100755 --- a/_config.yml +++ b/_config.yml @@ -182,16 +182,16 @@ comments: footer: social: # github: - # icon: '' + # icon: '' # url: / # music: - # icon: '' + # icon: '' # url: / # unsplash: - # icon: '' + # icon: '' # url: / # comments: - # icon: '' + # icon: '' # 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 diff --git a/layout/404.ejs b/layout/404.ejs index a817f0c..2ed6f00 100755 --- a/layout/404.ejs +++ b/layout/404.ejs @@ -6,7 +6,7 @@ page.header = 'auto'; page.robots = 'none'; %>
-

404

+

404

<%- __('page.error.what') %> diff --git a/layout/_partial/main/article/article_footer.ejs b/layout/_partial/main/article/article_footer.ejs index 23a224b..e7f998e 100644 --- a/layout/_partial/main/article/article_footer.ejs +++ b/layout/_partial/main/article/article_footer.ejs @@ -103,13 +103,13 @@ function layoutDiv() { } el += '>'; if (item == 'wechat') { - el += ''; + el += ''; } else if (item == 'weibo') { - el += ''; + el += ''; } else if (item == 'email') { - el += ''; + el += ''; } else if (item == 'link') { - el += ''; + el += ''; } el += ''; } diff --git a/layout/_partial/main/post_list/post_card.ejs b/layout/_partial/main/post_list/post_card.ejs index 0522bdd..382b489 100755 --- a/layout/_partial/main/post_list/post_card.ejs +++ b/layout/_partial/main/post_list/post_card.ejs @@ -90,7 +90,7 @@ function div_default() { } } if (post.pin) { - el += ''; + el += ''; } el += ''; el += '

'; diff --git a/scripts/tags/index.js b/scripts/tags/index.js index b02132c..b313f71 100644 --- a/scripts/tags/index.js +++ b/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)) diff --git a/scripts/tags/lib/banner.js b/scripts/tags/lib/banner.js new file mode 100644 index 0000000..927feac --- /dev/null +++ b/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 += `` + return el +} diff --git a/scripts/tags/lib/navbar.js b/scripts/tags/lib/navbar.js index 622ec0c..d44589a 100644 --- a/scripts/tags/lib/navbar.js +++ b/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 = '
` return el } diff --git a/source/css/_layout/partial/paginator.styl b/source/css/_layout/partial/paginator.styl index 8cad4b9..797bc7e 100644 --- a/source/css/_layout/partial/paginator.styl +++ b/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) diff --git a/source/css/_layout/tag-plugins/banner.styl b/source/css/_layout/tag-plugins/banner.styl new file mode 100644 index 0000000..933cbe2 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/source/css/_layout/tag-plugins/frame.styl b/source/css/_layout/tag-plugins/frame.styl index 5cf9b6d..84c13d5 100644 --- a/source/css/_layout/tag-plugins/frame.styl +++ b/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'] diff --git a/source/js/plugins/fcircle.js b/source/js/plugins/fcircle.js index 156bfa5..4bfba97 100644 --- a/source/js/plugins/fcircle.js +++ b/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); } }); diff --git a/source/js/plugins/friends.js b/source/js/plugins/friends.js index 948dd99..bb81d91 100644 --- a/source/js/plugins/friends.js +++ b/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); } }); diff --git a/source/js/plugins/memos.js b/source/js/plugins/memos.js index 30d2374..1e8f579 100644 --- a/source/js/plugins/memos.js +++ b/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); } diff --git a/source/js/plugins/sites.js b/source/js/plugins/sites.js index 0250d5f..d76f45d 100644 --- a/source/js/plugins/sites.js +++ b/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.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); } }); diff --git a/source/js/plugins/weibo.js b/source/js/plugins/weibo.js index a0f09a3..271e87a 100644 --- a/source/js/plugins/weibo.js +++ b/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); } });