✨ 增加图片放大后可加载原图片的配置

fluid-dev · Apr 17, 2021 · c672273 · c672273
1 parent a4c6909
commit c672273
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/_config.yml b/_config.yml
@@ -381,7 +381,7 @@ footer:
   statistics:
     enable: false
 
-    # 统计数据来源，如果使用 leancloud 需要设置 `web_analytics: leancloud` 中的参数；如果使用 busuanzi 可能会有请求失败的情况
+    # 统计数据来源，使用 leancloud 需要设置 `web_analytics: leancloud` 中的参数；使用 busuanzi 不需要额外设置，但是有时不稳定，另外本地运行时 busuanzi 显示统计数据很大属于正常现象，部署后会正常
     # Data source. If use leancloud, you need to set the parameter in `web_analytics: leancloud`
     # Options: busuanzi | leancloud
     source: "busuanzi"
@@ -581,6 +581,9 @@ post:
   # Zoom feature of images
   image_zoom:
     enable: true
+    # 放大后图片链接替换规则，可用于将压缩图片链接替换为原图片链接，如 ['-slim', ''] 是将链接中 `-slim` 移除；如果想使用正则请使用 `re:` 前缀，如 ['re:\\d{3,4}\\/\\d{3,4}\\/', '']
+    # The image url replacement when zooming, the feature can be used to replace the compressed image to the original image, eg: ['-slim', ''] removes `-slim` from the image url when zooming; if you want to use regular, use prefix `re:`, eg: ['re:\\d{3,4}\\/\\d{3,4}\\/','']
+    img_url_replace: ['', '']
 
   # 脚注语法，会在文章底部生成脚注，如果 Markdown 渲染器本身支持，则建议关闭，否则可能会冲突
   # Support footnote syntax, footnotes will be generated at the bottom of the post page. If the Markdown renderer itself supports it, please disable it, otherwise it may conflict

diff --git a/source/js/plugins.js b/source/js/plugins.js
@@ -60,21 +60,35 @@ Fluid.plugins = {
 
     $('.markdown-body :not(a) > img, .markdown-body > img').each(function() {
       var $image = $(this);
-      var imageLink = $image.attr('data-src') || $image.attr('src');
-      var $imageWrapLink = $image.wrap(`
-        <a class="fancybox fancybox.image" href="${imageLink}"
+      var imageUrl = $image.attr('data-src') || $image.attr('src') || '';
+      if (CONFIG.image_zoom.img_url_replace) {
+        var rep = CONFIG.image_zoom.img_url_replace;
+        var r1 = rep[0] || '';
+        var r2 = rep[1] || '';
+        if (r1) {
+          if (/^re:/.test(r1)) {
+            r1 = r1.replace(/^re:/, '');
+            var reg = new RegExp(r1, 'gi');
+            imageUrl = imageUrl.replace(reg, r2);
+          } else {
+            imageUrl = imageUrl.replace(r1, r2);
+          }
+        }
+      }
+      var $imageWrap = $image.wrap(`
+        <a class="fancybox fancybox.image" href="${imageUrl}"
           itemscope itemtype="http://schema.org/ImageObject" itemprop="url"></a>`
       ).parent('a');
       if ($image.is('.group-image-container img')) {
-        $imageWrapLink.attr('data-fancybox', 'group').attr('rel', 'group');
+        $imageWrap.attr('data-fancybox', 'group').attr('rel', 'group');
       } else {
-        $imageWrapLink.attr('data-fancybox', 'default').attr('rel', 'default');
+        $imageWrap.attr('data-fancybox', 'default').attr('rel', 'default');
       }
 
       var imageTitle = $image.attr('title') || $image.attr('alt');
       if (imageTitle) {
-        $imageWrapLink.append(`<p class="image-caption">${imageTitle}</p>`);
-        $imageWrapLink.attr('title', imageTitle).attr('data-caption', imageTitle);
+        $imageWrap.append(`<p class="image-caption">${imageTitle}</p>`);
+        $imageWrap.attr('title', imageTitle).attr('data-caption', imageTitle);
       }
     });