优化fancybox加载逻辑
This commit is contained in:
parent
bd2bc077ab
commit
3ada269c68
28
_config.yml
28
_config.yml
|
@ -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
|
||||||
|
|
|
@ -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 + '"';
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
img[fancybox='true']
|
||||||
|
cursor: zoom-in
|
||||||
|
|
||||||
|
.swiper-slide
|
||||||
|
cursor: zoom-in
|
|
@ -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'
|
||||||
|
|
|
@ -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) {
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue