Added caption sytle for hyperlinked images (#144).

assets/css/_addon/main.scss

@@ -816,19 +816,18 @@ div.post-content .table-wrapper {
   margin-top: 2rem;
   overflow-wrap: break-word;
   word-wrap: break-word;
-  a {
-    @extend %link-color;
-    @extend %link-underline;
-    &:hover {
-      @extend %link-hover;
-    }
-  }
-  p {
-    font-size: 1.08rem;
+
+  @mixin img {
     > img {
       &:not([style]) {
         margin: .5rem 0;
         @include align-center;
+        @include img-caption;
+      }
+    }
+  }
+
+  @mixin img-caption {
     + em {
       display: block;
       text-align: center;
@@ -837,9 +836,25 @@ div.post-content .table-wrapper {
       padding: 0;
       color: #6d6c6c;
     }
+  }
 
+  a {
+    &:not(.img-hyperlink) {
+      @extend %link-color;
+      @extend %link-underline;
+      &:hover {
+        @extend %link-hover;
       }
     }
+    &.img-hyperlink {
+      @include img;
+      @include img-caption;
+    }
+  }
+
+  p {
+    font-size: 1.08rem;
+    @include img;
   }// p
 }
 

assets/js/_utils/img-hyperlink.js

@@ -0,0 +1,16 @@
+/*
+ * Find out the <a> tag contains an image and mark it.
+ *
+ * v2.5.1
+ * https://github.com/cotes2020/jekyll-theme-chirpy
+ * © 2020 Cotes Chung
+ * MIT Licensed
+ */
+
+$(function() {
+
+  var MARK="img-hyperlink";
+
+  $("a:has(img)").addClass(MARK);
+  
+});

assets/js/post.min.js

@@ -13,3 +13,5 @@ layout: compress
 {% include_relative lib/_bootstrap-toc.min.js %}
 
 {% include_relative _utils/toc-filter.js %}
+
+{% include_relative _utils/img-hyperlink.js %}