From 6f8c941f2ab9a4c6d899f009b69c3daf618152b1 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Fri, 19 Jan 2024 13:51:55 +0800 Subject: [PATCH] [feat] icons.yml --- _config.yml | 49 +++++++++++-------- _data/icons.yml | 25 ++++++++++ layout/404.ejs | 2 +- .../_partial/main/article/article_footer.ejs | 10 +--- layout/_partial/main/navbar/author_banner.ejs | 4 +- layout/_partial/main/navbar/breadcrumb.ejs | 6 +-- layout/_partial/main/post_list/post_card.ejs | 2 +- layout/_partial/menubtn.ejs | 2 +- .../plugins/comments/artalk/layout.ejs | 2 +- .../plugins/comments/beaudar/layout.ejs | 2 +- .../plugins/comments/giscus/layout.ejs | 2 +- .../plugins/comments/twikoo/layout.ejs | 2 +- .../plugins/comments/utterances/layout.ejs | 2 +- .../plugins/comments/waline/layout.ejs | 2 +- layout/_partial/sidebar/menu.ejs | 2 + layout/_partial/sidebar/search.ejs | 2 +- layout/_partial/widgets/ghrepo.ejs | 8 +-- layout/_partial/widgets/ghuser.ejs | 2 +- layout/_partial/widgets/recent.ejs | 4 +- layout/_partial/widgets/related.ejs | 2 +- layout/_partial/widgets/toc.ejs | 2 +- scripts/events/lib/config.js | 10 +++- scripts/helpers/icon.js | 16 ++++++ source/css/_layout/list.styl | 3 ++ source/css/_layout/partial/paginator.styl | 4 +- 25 files changed, 109 insertions(+), 58 deletions(-) create mode 100644 _data/icons.yml create mode 100644 scripts/helpers/icon.js diff --git a/_config.yml b/_config.yml index b42367e..9742ec7 100755 --- a/_config.yml +++ b/_config.yml @@ -29,26 +29,31 @@ logo: menubar: columns: 4 # 一行多少个 items: # 可按照自己需求增加，符合以下格式即可 - # - id: post - # theme: '#1BCDFC' - # icon: '' - # title: 博客 - # url: / - # - id: wiki - # theme: '#3DC550' - # icon: '' - # title: 项目 - # url: /wiki/ - # - id: notes - # theme: '#FA6400' - # icon: '' - # title: 探索 - # url: /notes/ - # - id: social - # theme: '#F44336' - # icon: '' - # title: 社交 - # url: /friends/ + # id: 页面中高亮的 menu_id + # theme: 高亮时的颜色，仅 svg 中 fill="currentColor" 时有效 + # icon: 支持 svg/img 标签，可以定义在 icons.yml 文件中，也支持外部图片的 URL + # title: 标题 + # url: 点击跳转到哪，支持相对路径和绝对路径 + - id: post + theme: '#1BCDFC' + icon: solar:documents-bold-duotone + title: 博客 + url: / + - id: wiki + theme: '#3DC550' + icon: solar:notebook-bookmark-bold-duotone + title: 文档 + url: /wiki/ + - id: explore + theme: '#FA6400' + icon: solar:planet-bold-duotone + title: 探索 + url: /notes/ + - id: social + theme: '#F44336' + icon: solar:chat-square-like-bold-duotone + title: 社交 + url: /friends/ ######## Main ######## @@ -504,6 +509,10 @@ style: # 在图片上层增加高斯模糊效果（同时附带饱和度增强效果） background: 'url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg)' blur: true + paginator: + prev: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/arrow/f049bbd4e88ec.svg + next: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/arrow/064b95430caf4.svg + error_page: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/404/1c830bfcd517d.svg default: avatar: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/avatar/round/3442075.svg diff --git a/_data/icons.yml b/_data/icons.yml new file mode 100644 index 0000000..dca4d21 --- /dev/null +++ b/_data/icons.yml @@ -0,0 +1,25 @@ + +solar:documents-bold-duotone: +solar:chat-square-like-bold-duotone: +solar:planet-bold-duotone: +solar:notebook-bookmark-bold-duotone: + + +default:goback: +default:loading: +default:search: +default:rss: +default:bookmark: +default:sidebar: +default:pin: + +github:logo: +github:repo: +github:star: +github:fork: +github:tag: + +share:wechat: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/social/b32ef3da1162a.svg +share:weibo: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/social/80c07e4dbb303.svg +share:email: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/social/a1b00e20f425d.svg +share:link: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/social/8411ed322ced6.svg \ No newline at end of file diff --git a/layout/404.ejs b/layout/404.ejs index 82710eb..a37a22d 100755 --- a/layout/404.ejs +++ b/layout/404.ejs @@ -4,7 +4,7 @@ page.header = false; 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 dc06e9b..46e9946 100644 --- a/layout/_partial/main/article/article_footer.ejs +++ b/layout/_partial/main/article/article_footer.ejs @@ -113,15 +113,7 @@ function layoutDiv() { el += ' onclick="util.copy("copy-link", "' + __('message.copied') + '")"'; } el += '>'; - if (item == 'wechat') { - el += ''; - } else if (item == 'weibo') { - el += ''; - } else if (item == 'email') { - el += ''; - } else if (item == 'link') { - el += ''; - } + el += icon(`share:${item}`) el += ''; } }); diff --git a/layout/_partial/main/navbar/author_banner.ejs b/layout/_partial/main/navbar/author_banner.ejs index 58e68f5..2406197 100644 --- a/layout/_partial/main/navbar/author_banner.ejs +++ b/layout/_partial/main/navbar/author_banner.ejs @@ -10,9 +10,7 @@ function layoutDiv() {

diff --git a/layout/_partial/main/navbar/breadcrumb.ejs b/layout/_partial/main/navbar/breadcrumb.ejs index dab3c6b..5686c2f 100644 --- a/layout/_partial/main/navbar/breadcrumb.ejs +++ b/layout/_partial/main/navbar/breadcrumb.ejs @@ -121,15 +121,15 @@ function layoutDiv() { el += `
- + ${icon('github:repo')} ${repo} - + ${icon('github:star')} 0stars - + ${icon('github:fork')} 0forks
diff --git a/layout/_partial/main/post_list/post_card.ejs b/layout/_partial/main/post_list/post_card.ejs index 86bf456..16a2f0d 100755 --- a/layout/_partial/main/post_list/post_card.ejs +++ b/layout/_partial/main/post_list/post_card.ejs @@ -91,7 +91,7 @@ function div_default() { } } if (post.pin) { - el += ''; + el += `${icon('default:pin')}` } el += '
'; el += '
'; diff --git a/layout/_partial/menubtn.ejs b/layout/_partial/menubtn.ejs index 64a91a0..dcdfdd7 100644 --- a/layout/_partial/menubtn.ejs +++ b/layout/_partial/menubtn.ejs @@ -1,5 +1,5 @@ diff --git a/layout/_partial/plugins/comments/artalk/layout.ejs b/layout/_partial/plugins/comments/artalk/layout.ejs index fb82fd7..3304b0c 100644 --- a/layout/_partial/plugins/comments/artalk/layout.ejs +++ b/layout/_partial/plugins/comments/artalk/layout.ejs @@ -11,7 +11,7 @@ function layoutDiv() { el += ' ' + key + '="' + cfg[key] + '"'; } } - el += '>'; + el += `>${icon('default:loading')}` return el; } %> diff --git a/layout/_partial/plugins/comments/beaudar/layout.ejs b/layout/_partial/plugins/comments/beaudar/layout.ejs index 48dc222..d386fd3 100644 --- a/layout/_partial/plugins/comments/beaudar/layout.ejs +++ b/layout/_partial/plugins/comments/beaudar/layout.ejs @@ -17,6 +17,6 @@ function layoutDiv() { } %> - +<%- icon('default:loading') %> <%- layoutDiv() %> diff --git a/layout/_partial/plugins/comments/giscus/layout.ejs b/layout/_partial/plugins/comments/giscus/layout.ejs index 48dc222..d386fd3 100644 --- a/layout/_partial/plugins/comments/giscus/layout.ejs +++ b/layout/_partial/plugins/comments/giscus/layout.ejs @@ -17,6 +17,6 @@ function layoutDiv() { } %> - +<%- icon('default:loading') %> <%- layoutDiv() %> diff --git a/layout/_partial/plugins/comments/twikoo/layout.ejs b/layout/_partial/plugins/comments/twikoo/layout.ejs index adbd043..60f10f1 100644 --- a/layout/_partial/plugins/comments/twikoo/layout.ejs +++ b/layout/_partial/plugins/comments/twikoo/layout.ejs @@ -11,7 +11,7 @@ function layoutDiv() { el += ' ' + key + '="' + cfg[key] + '"'; } } - el += '>'; + el += `>${icon('default:loading')}` return el; } %> diff --git a/layout/_partial/plugins/comments/utterances/layout.ejs b/layout/_partial/plugins/comments/utterances/layout.ejs index 48dc222..d386fd3 100644 --- a/layout/_partial/plugins/comments/utterances/layout.ejs +++ b/layout/_partial/plugins/comments/utterances/layout.ejs @@ -17,6 +17,6 @@ function layoutDiv() { } %> - +<%- icon('default:loading') %> <%- layoutDiv() %> diff --git a/layout/_partial/plugins/comments/waline/layout.ejs b/layout/_partial/plugins/comments/waline/layout.ejs index 9142395..f725768 100644 --- a/layout/_partial/plugins/comments/waline/layout.ejs +++ b/layout/_partial/plugins/comments/waline/layout.ejs @@ -11,7 +11,7 @@ function layoutDiv() { el += ' ' + key + '="' + cfg[key] + '"'; } } - el += '>'; + el += `>${icon('default:loading')}` return el; } %> diff --git a/layout/_partial/sidebar/menu.ejs b/layout/_partial/sidebar/menu.ejs index bfc59cb..613e8aa 100644 --- a/layout/_partial/sidebar/menu.ejs +++ b/layout/_partial/sidebar/menu.ejs @@ -14,6 +14,8 @@ function layoutDiv() { if (item.icon?.length > 0) { if (item.icon.startsWith('<')) { el += item.icon + } else if (theme.icons[item.icon]) { + el += theme.icons[item.icon] } else { el += `` } diff --git a/layout/_partial/sidebar/search.ejs b/layout/_partial/sidebar/search.ejs index eb03635..1ad124d 100644 --- a/layout/_partial/sidebar/search.ejs +++ b/layout/_partial/sidebar/search.ejs @@ -20,7 +20,7 @@ function layoutDiv() { } } el += `` - el += `` + el += icon('default:search') el += `` el += ` 0) { diff --git a/layout/_partial/widgets/ghrepo.ejs b/layout/_partial/widgets/ghrepo.ejs index 195e753..c3c13e5 100644 --- a/layout/_partial/widgets/ghrepo.ejs +++ b/layout/_partial/widgets/ghrepo.ejs @@ -22,21 +22,21 @@ function layoutDiv() { el += '
'; el += ''; el += '
'; - el += ''; + el += icon('github:repo') el += repo; el += '
'; el += '
 
'; el += '
'; el += '
'; - el += ''; + el += icon('github:star') el += ''; el += '
'; el += '
'; - el += ''; + el += icon('github:fork') el += ''; el += '
'; el += '
'; - el += ''; + el += icon('github:tag') el += '0'; el += '
'; el += '
'; diff --git a/layout/_partial/widgets/ghuser.ejs b/layout/_partial/widgets/ghuser.ejs index 12257cd..88e11b9 100644 --- a/layout/_partial/widgets/ghuser.ejs +++ b/layout/_partial/widgets/ghuser.ejs @@ -42,7 +42,7 @@ function layoutDiv() { el += '
'; // follow el += ''; el += ''; diff --git a/layout/_partial/widgets/recent.ejs b/layout/_partial/widgets/recent.ejs index 495b3f9..d609eff 100644 --- a/layout/_partial/widgets/recent.ejs +++ b/layout/_partial/widgets/recent.ejs @@ -6,7 +6,7 @@ function layoutDiv() { el += '' + __("meta.recent_update") + ''; if (item.rss) { el += ''; - el += ''; + el += icon('default:rss') el += ''; } el += ''; @@ -41,7 +41,7 @@ function layoutDiv() { } el += (post.title || post.wiki) + ''; if (isActive) { - el += `` + el += icon('default:bookmark') } el += ''; el += ''; diff --git a/layout/_partial/widgets/related.ejs b/layout/_partial/widgets/related.ejs index 2df6f0b..9a482e9 100644 --- a/layout/_partial/widgets/related.ejs +++ b/layout/_partial/widgets/related.ejs @@ -18,7 +18,7 @@ function relatedPostsInTopic() { el += `` el += `${post.title}` if (isActive) { - el += `` + el += icon('default:bookmark') } el += `` } diff --git a/layout/_partial/widgets/toc.ejs b/layout/_partial/widgets/toc.ejs index c9c3c70..81b3548 100644 --- a/layout/_partial/widgets/toc.ejs +++ b/layout/_partial/widgets/toc.ejs @@ -41,7 +41,7 @@ function layoutDocTree(pages) { el += `` el += `${p.title}` if (isActive.length > 0) { - el += `` + el += icon('default:bookmark') } el += `` } diff --git a/scripts/events/lib/config.js b/scripts/events/lib/config.js index b48b85b..f8c1fb5 100644 --- a/scripts/events/lib/config.js +++ b/scripts/events/lib/config.js @@ -29,7 +29,7 @@ module.exports = ctx => { // merge data const data = ctx.locals.get('data') - // merge widgets + // merge widgets: 可覆盖删除的合并 var widgets = ctx.render.renderSync({ path: path.join(ctx.theme_dir, '_data/widgets.yml'), engine: 'yaml' }) if (data.widgets) { for (let i of Object.keys(data.widgets)) { @@ -50,9 +50,15 @@ module.exports = ctx => { } } } - ctx.theme.config.widgets = widgets + // merge icons: 简单覆盖合并 + var icons = ctx.render.renderSync({ path: path.join(ctx.theme_dir, '_data/icons.yml'), engine: 'yaml' }) + if (data.icons) { + icons = Object.assign({}, icons, data.icons) + } + ctx.theme.config.icons = icons + // default menu if (ctx.theme.config.menubar == undefined) { ctx.theme.config.menubar = {} diff --git a/scripts/helpers/icon.js b/scripts/helpers/icon.js new file mode 100644 index 0000000..eb9830a --- /dev/null +++ b/scripts/helpers/icon.js @@ -0,0 +1,16 @@ +'use strict'; + +hexo.extend.helper.register('icon', function(args){ + const { icons } = hexo.theme.config + var result = '' + if (icons[args]) { + result = icons[args] + } else { + result = args + } + if (result.startsWith('/') || result.startsWith('https://') || result.startsWith('http://')) { + return `` + } else { + return result + } +}) diff --git a/source/css/_layout/list.styl b/source/css/_layout/list.styl index 80e9fff..89db0a3 100644 --- a/source/css/_layout/list.styl +++ b/source/css/_layout/list.styl @@ -52,6 +52,9 @@ img object-fit: contain height: 1.5em + svg + height: 1.5rem + color: $c-red .post-list .post-card:hover img diff --git a/source/css/_layout/partial/paginator.styl b/source/css/_layout/partial/paginator.styl index 8d2a107..03a93ca 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.12/arrow/064b95430caf4.svg') + background-image: url(hexo-config('style.paginator.next')) &.prev border-right: 1px dashed var(--block-border) - background-image: url('https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/arrow/f049bbd4e88ec.svg') + background-image: url(hexo-config('style.paginator.prev')) .current font-family: $ff-code background: var(--block)