优化fancybox加载逻辑

This commit is contained in:
xaoxuu 2022-01-27 13:46:11 +08:00
parent bd2bc077ab
commit 3ada269c68
5 changed files with 48 additions and 19 deletions

View File

@ -193,6 +193,9 @@ tag_plugins:
qq: https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/qq/%s.gif qq: https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/qq/%s.gif
aru: https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/%s.gif aru: https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/%s.gif
tieba: https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%s.png tieba: https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%s.png
# {% image %}
image:
fancybox: # true, false
######## JS Plugins ######## ######## JS Plugins ########
@ -201,11 +204,6 @@ plugins:
# jquery # jquery
jquery: https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js jquery: https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js
# swiper
swiper:
enable: true
css: https://unpkg.com/swiper@6/swiper-bundle.min.css
js: https://unpkg.com/swiper@6/swiper-bundle.min.js
# issues api # issues api
sitesjs: /js/plugins/sites.js sitesjs: /js/plugins/sites.js
friendsjs: /js/plugins/friends.js friendsjs: /js/plugins/friends.js
@ -233,17 +231,23 @@ plugins:
duration: 500 # ms duration: 500 # ms
interval: 100 # ms interval: 100 # ms
scale: 1 # 0.1~1 scale: 1 # 0.1~1
# https://fancyapps.com/docs/ui/fancybox/ # https://fancyapps.com/docs/ui/fancybox/
# available for {% image xxx %}
fancybox: fancybox:
enable: #true enable: true
js: https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js js: https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js
css: https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css css: https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css
comment: # 可以处理评论区的图片(不支持 iframe 类评论系统)例如:
enable: #true # 是否处理评论区的图片,注意:不支持 iframe 类评论系统 # 使用valine评论可以写: .vcontent img:not(.vemoji)
selector: # 评论区图片选择器,例: # 使用twikoo评论可以写: .tk-content img:not([class*="emo"])
# valine: .vcontent img:not(.vemoji) selector: .swiper-slide img # 多个选择器用英文逗号隔开
# twikoo: .tk-content img:not([class*="emo"])
# swiper
swiper:
enable: true
css: https://unpkg.com/swiper@6/swiper-bundle.min.css
js: https://unpkg.com/swiper@6/swiper-bundle.min.js
style: style:
darkmode: auto # auto / always / false darkmode: auto # auto / always / false

View File

@ -8,7 +8,7 @@
'use strict'; 'use strict';
hexo.extend.tag.register('image', function(args) { hexo.extend.tag.register('image', function(args) {
args = hexo.args.map(args, ['width', 'height', 'bg', 'download', 'padding'], ['src', 'alt']); args = hexo.args.map(args, ['width', 'height', 'bg', 'download', 'padding', 'fancybox'], ['src', 'alt']);
var style = ''; var style = '';
if (args.width) { if (args.width) {
style += 'width:' + args.width + ';'; style += 'width:' + args.width + ';';
@ -16,12 +16,32 @@ hexo.extend.tag.register('image', function(args) {
if (args.height) { if (args.height) {
style += 'height:' + args.height + ';'; style += 'height:' + args.height + ';';
} }
// fancybox
var fancybox = false;
if (hexo.theme.config.plugins.fancybox && hexo.theme.config.plugins.fancybox.enable) {
// 主题配置
if (hexo.theme.config.tag_plugins.image && hexo.theme.config.tag_plugins.image.fancybox) {
fancybox = hexo.theme.config.tag_plugins.image.fancybox;
}
// 覆盖配置
if (args.fancybox && args.fancybox.length > 0) {
if (args.fancybox == 'true') {
fancybox = true;
} else if (args.fancybox == 'false') {
fancybox = false;
}
}
}
function img(src, alt, style) { function img(src, alt, style) {
let img = ''; let img = '';
img += '<img src="' + src + '"'; img += '<img src="' + src + '"';
if (alt) { if (alt) {
img += ' alt="' + alt + '"'; img += ' alt="' + alt + '"';
} }
if (fancybox) {
img += ' fancybox="true"';
}
if (style.length > 0) { if (style.length > 0) {
img += ' style="' + style + '"'; img += ' style="' + style + '"';
} }

View File

@ -0,0 +1,5 @@
img[fancybox='true']
cursor: zoom-in
.swiper-slide
cursor: zoom-in

View File

@ -5,6 +5,8 @@ if hexo-config('plugins.swiper.enable')
@import 'swiper' @import 'swiper'
if hexo-config('plugins.scrollreveal.enable') if hexo-config('plugins.scrollreveal.enable')
@import 'scrollreveal' @import 'scrollreveal'
if hexo-config('plugins.fancybox.enable')
@import 'fancybox'
// //
if hexo-config('comments.service') == 'beaudar' if hexo-config('comments.service') == 'beaudar'

View File

@ -276,12 +276,10 @@ if (stellar.plugins.preload) {
// fancybox // fancybox
if (stellar.plugins.fancybox) { if (stellar.plugins.fancybox) {
let selector = 'article .tag-plugin.image img'; let selector = 'img[fancybox]:not(.error)';
if (stellar.plugins.fancybox.selector) {
if (stellar.plugins.fancybox.comment.enable) { selector += `, ${stellar.plugins.fancybox.selector}`
selector += `, ${stellar.plugins.fancybox.comment.selector}`
} }
if (document.querySelectorAll(selector).length !== 0) { if (document.querySelectorAll(selector).length !== 0) {
stellar.loadCSS(stellar.plugins.fancybox.css); stellar.loadCSS(stellar.plugins.fancybox.css);
stellar.loadScript(stellar.plugins.fancybox.js, { defer: true }).then(function () { stellar.loadScript(stellar.plugins.fancybox.js, { defer: true }).then(function () {
@ -297,4 +295,4 @@ if (stellar.plugins.fancybox) {
}); });
}) })
} }
} }