feat: better gallery shortcode

add utility classes ("center" and "full-width")


Former-commit-id: 0f779940b2ce241ba446fc61c3dcb40a9d2f597f

5 files changed, 24 insertions, 10 deletions

diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss
index 71a99edb..f53df7c0 100644
--- a/assets/css/components/_markdown.scss
+++ b/assets/css/components/_markdown.scss
@@ -123,6 +123,7 @@ $em-text-color: #889E73;
       font-size: 0.9rem;
       color: var(--secondary-text-color);
       font-weight: 400;
+      text-align: center;
     }
   }
 
diff --git a/assets/css/components/_shortcodes.scss b/assets/css/components/_shortcodes.scss
index 725d5eb2..52de0999 100644
--- a/assets/css/components/_shortcodes.scss
+++ b/assets/css/components/_shortcodes.scss
@@ -70,14 +70,15 @@
     margin: 0.1rem
 }
 
-/* inline-image shortcode */
+/* gallery shortcode */
 
-.inline-image {
+.gallery {
   display: flex;
   overflow-x: auto;
   scroll-behavior: smooth;
   gap: 1rem;
   white-space: nowrap;
+
   & > figure {
     display: inline-block;
     margin: 0;
@@ -90,6 +91,18 @@
     }
   }
   & > p { display: none }
+
+  &.center {
+      justify-content: center;
+  }
+  &.full-width {
+      & > figure {
+          flex-shrink: unset;
+          img {
+              width: 100%;
+          }
+      }
+  }
 }
 
 /* sidenote shortcode */
diff --git a/content/posts/weekly/23.md b/content/posts/weekly/23.md
index 1c8adb65..5c5b9b25 100644
--- a/content/posts/weekly/23.md
+++ b/content/posts/weekly/23.md
@@ -38,12 +38,12 @@ aliases:
 
 拍了一些我很喜欢的作品：
 
-{{< gallery >}}
+{{< gallery class="full-width" >}}
 ![漆画，居然有点像怪核，配色也有点像 Minecraft 的末地](https://image.guhub.cn//uPic/IMG_3227大.jpeg "漆画，居然有点像怪核，配色也有点像 Minecraft 的末地")
 ![有种淡淡的激情和淡淡的死意](https://image.guhub.cn//uPic/IMG_3231大.jpeg "有种淡淡的激情和淡淡的死意")
 {{</ gallery >}}
 
-{{< gallery >}}
+{{< gallery class="full-width" >}}
 ![猫猫🐱](https://image.guhub.cn//uPic/IMG_3244大.jpeg "猫猫🐱")
 ![看了半天才看出来画的是手插进牛仔裤的特写](https://image.guhub.cn//uPic/IMG_3256大.jpeg "看了半天才看出来画的是手插进牛仔裤的特写")
 {{</ gallery >}}
diff --git a/content/posts/逃离群居生活.md b/content/posts/逃离群居生活.md
index ede3ade5..4d96a039 100644
--- a/content/posts/逃离群居生活.md
+++ b/content/posts/逃离群居生活.md
@@ -13,13 +13,13 @@ aliases:
 ---
 
 > 在我审视自己对小孩子的厌恶情绪时，我发现「高中生」是一个微妙的转折点。我惧怕用哭闹控制母亲的婴儿，我回避总是在四处张望的幼儿，我厌恶蛮不讲理、说着自以为是的话的小学生，我认为初中生比起小学生也不过如此，他们的行为甚至更过火。至于高中生，他们其中的确有不少难以应付的个体，但大部分都至少还算是「可以交流」。
-> 
+>
 > 似乎我找到了一个合理的不讨厌高中生的解释，但我认为，真实的原因可能并非如此——我可能只是在高中过得还不错而已。
-> 
+>
 > 如此一来，对孩童的厌恶其实是「自我厌恶」——因为讨厌过去的自己，所以讨厌现在的小孩子。那些对我说「你这么讨厌小孩子，你自己以前也是小孩子呀」的人，我还真被他们说中了。
-> 
+>
 > 按照这个链路继续发展下去，「自我厌恶」的原因可能是「合理化自身」——因为过去自己的行为和现在自己的行为不同，为了合理化这种变化，就告诉自己「以前的自己不懂事」，贬低过去的自己，从而使得当下做出了改变的自己变得合理，甚至变得光荣。
-> 
+>
 > 说不定再过几年，我也会开始讨厌高中生；等我大学毕业，对大学生活的流连忘返，大概也有朝一日会变成对当时清澈而愚蠢的自己的嘲笑。
 
 {{< right "——《[我为什么讨厌小孩子？](/posts/我为什么讨厌小孩子？)》" >}}
@@ -40,7 +40,7 @@ aliases:
 
 我的床位在靠阳台的一侧，阳台和室内有一扇门隔断，阳台左侧是厕所，也有一扇门。阳台门的封闭性还不错，我在入住的时候为了防虫还给阳台门下面的门缝堵了。厕所门就不那么美好了，大概是为了透气，厕所门的下半部分是类似通风口的、倾斜的百叶窗。很不幸的是，我的位置正好处于厕所的斜对面，如果把阳台门和厕所门都打开，我转过身就能看到厕所里长什么样子。*这样的黄金位置，整个寝室独我一份。*
 
-{{< gallery >}}
+{{< gallery class="center" >}}
 ![IMG_0362](https://image.guhub.cn//uPic/IMG_0362.PNG "没错我还画了个布局图")
 
 ![PixPin_2025-05-28_15-47-18](https://image.guhub.cn//uPic/PixPin_2025-05-28_15-47-18.png "类似于厕所门下半部分的结构")
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
index 67de9e0e..ce456e05 100644
--- a/layouts/shortcodes/gallery.html
+++ b/layouts/shortcodes/gallery.html
@@ -1,3 +1,3 @@
-<div class="inline-image">
+<div class="gallery{{ with .Get "class" }} {{ . }}{{ end }}">
     {{ .Inner | markdownify | safeHTML }}
 </div>