优化fancybox加载逻辑

_config.yml

@@ -193,6 +193,9 @@ tag_plugins:
     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
     tieba: https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%s.png
+  # {% image %}
+  image:
+    fancybox: # true, false
 
 
 ######## JS Plugins ########
@@ -201,11 +204,6 @@ plugins:
   # jquery
   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
   sitesjs: /js/plugins/sites.js
   friendsjs: /js/plugins/friends.js
@@ -235,15 +233,21 @@ plugins:
     scale: 1 # 0.1~1
 
   # https://fancyapps.com/docs/ui/fancybox/
+  # available for {% image xxx %}
   fancybox:
-    enable: #true
+    enable: true
     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
-    comment: 
-     enable: #true # 是否处理评论区的图片，注意：不支持 iframe 类评论系统
-     selector:     # 评论区图片选择器，例：
-                   # valine: .vcontent img:not(.vemoji)
-                   # twikoo: .tk-content img:not([class*="emo"]) 
+    # 可以处理评论区的图片（不支持 iframe 类评论系统）例如：
+    # 使用valine评论可以写: .vcontent img:not(.vemoji)
+    # 使用twikoo评论可以写: .tk-content img:not([class*="emo"])
+    selector: .swiper-slide img # 多个选择器用英文逗号隔开
+
+  # 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:
   darkmode: auto # auto / always / false

scripts/tags/image.js

@@ -8,7 +8,7 @@
 'use strict';
 
 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 = '';
   if (args.width) {
     style += 'width:' + args.width + ';';
@@ -16,12 +16,32 @@ hexo.extend.tag.register('image', function(args) {
   if (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) {
     let img = '';
     img += '<img src="' + src + '"';
     if (alt) {
       img += ' alt="' + alt + '"';
     }
+    if (fancybox) {
+      img += ' fancybox="true"';
+    }
     if (style.length > 0) {
       img += ' style="' + style + '"';
     }

source/css/_plugins/fancybox.styl

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

source/css/_plugins/index.styl

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

source/js/main.js

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