feat: 增加隐藏图片功能

assets/customize.js

@@ -24,3 +24,7 @@ document.addEventListener(
   },
   { capture: true },
 );
+
+function showHiddenPhoto(elem) {
+  elem.classList.add('show');
+}

assets/customize.scss

@@ -164,3 +164,37 @@ a.anchor {
 .footer__contents {
   text-align: left;
 }
+div.hidden-photo {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+  img {
+    transition: filter 0.3s;
+    filter: blur(25px);
+  }
+  .mask {
+    position: absolute;
+    z-index: 1;
+    top: 0; bottom: 0; left: 0; right: 0;
+    background-color: rgba($color: #000000, $alpha: 0.5);
+    transition: opacity 0.3s;
+    opacity: 1;
+    &::before {
+      content: '点击查看';
+      color: white;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  &.show {
+    img {
+      filter: blur(0);
+    }
+    .mask {
+      opacity: 0;
+    }
+  }
+}

content/zh-cn/docs/srs/china/sh411/index.md

@@ -172,9 +172,7 @@ keywords:
 ## 术后评价
 
 - 2021 年 6 月手术，术后 7 个月拍摄：
-  {{< expand "展开查看" >}}
-  ![srs-photo](postoperative-1.jpg)
-  {{< /expand >}}
+  {{< hiddenphoto "postoperative-1.jpg" >}}
 
 ## 其他事项
 

layouts/shortcodes/hiddenphoto.html

@@ -0,0 +1,4 @@
+<div class="hidden-photo" onclick="showHiddenPhoto(this)">
+  <img src="{{ .Get 0 }}" alt="{{ .Get 1 }}">
+  <div class="mask"></div>
+</div>