templates/page: support img caption displaymain

2 files changed, 31 insertions, 0 deletions

diff --git a/sass/_partial/_post.scss b/sass/_partial/_post.scss
index ed556af..3ce5ef9 100644
--- a/sass/_partial/_post.scss
+++ b/sass/_partial/_post.scss
@@ -74,6 +74,13 @@
         box-sizing: content-box;
         width: 100%;
     }
+    .img-caption {
+        display: block;
+        text-align: center;
+        margin: 0.5em 0 1em 0;
+        font-size: 0.9em;
+        opacity: 0.8;
+    }
     .shk {
         margin: 1em 0;
     }
diff --git a/templates/page.html b/templates/page.html
index ec3116d..f795876 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -50,4 +50,28 @@
 {% endif %}
 {% endblock %}
 </div>
+
+{% if page.extra.enable_img_caption %}
+<script>
+    const images = document.querySelectorAll(".post-content img");
+    images.forEach((img) => {
+        if (img.alt && img.alt.trim() !== "") {
+            const caption = document.createElement("div");
+            caption.className = "img-caption";
+            caption.textContent = img.alt;
+
+            let insertionPoint = img;
+            if (img.parentElement.tagName === "A") {
+                insertionPoint = img.parentElement;
+            }
+
+            insertionPoint.parentNode.insertBefore(
+                caption,
+                insertionPoint.nextSibling,
+            );
+        }
+    });
+</script>
+{% endif %}
+
 {% endblock %}