From c377515fd7c5dfd82bec6663a37c0f564bbe323d Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Sat, 28 Aug 2021 15:49:05 +0800
Subject: [PATCH] Fix image caption generated by pandoc with fancybox enabled

---
 source/css/_common/components/post/post-body.styl | 3 ++-
 source/js/utils.js                                | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/source/css/_common/components/post/post-body.styl b/source/css/_common/components/post/post-body.styl
index 1b62c7455..8e0eec206 100644
--- a/source/css/_common/components/post/post-body.styl
+++ b/source/css/_common/components/post/post-body.styl
@@ -45,7 +45,8 @@
     margin-left: 4px;
   }
 
-  .image-caption, .figure .caption {
+  // For fancybox and pandoc
+  .image-caption, img + figcaption, .fancybox + figcaption {
     color: $grey-dark;
     font-size: $font-size-small;
     font-weight: bold;
diff --git a/source/js/utils.js b/source/js/utils.js
index 7567b76ab..63d72f9ef 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -49,7 +49,10 @@ NexT.utils = {
 
       const imageTitle = $image.attr('title') || $image.attr('alt');
       if (imageTitle) {
-        $imageWrapLink.append(`<p class="image-caption">${imageTitle}</p>`);
+        // Do not append image-caption if pandoc has already created a figcaption
+        if (!$imageWrapLink.next('figcaption').length) {
+          $imageWrapLink.append(`<p class="image-caption">${imageTitle}</p>`);
+        }
         // Make sure img title tag will show correctly in fancybox
         $imageWrapLink.attr('title', imageTitle).attr('data-caption', imageTitle);
       }