From 4cb849ca3b4ac9db139f521766c98f684f854ceb Mon Sep 17 00:00:00 2001 From: Eltrac Date: Fri, 30 May 2025 19:57:05 +0800 Subject: feat: better gallery shortcode add utility classes ("center" and "full-width") Former-commit-id: 0f779940b2ce241ba446fc61c3dcb40a9d2f597f --- assets/css/components/_markdown.scss | 1 + assets/css/components/_shortcodes.scss | 17 +++++++++++++++-- content/posts/weekly/23.md | 4 ++-- ...\347\276\244\345\261\205\347\224\237\346\264\273.md" | 10 +++++----- layouts/shortcodes/gallery.html | 2 +- 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 class="full-width" >}} ![猫猫🐱](https://image.guhub.cn//uPic/IMG_3244大.jpeg "猫猫🐱") ![看了半天才看出来画的是手插进牛仔裤的特写](https://image.guhub.cn//uPic/IMG_3256大.jpeg "看了半天才看出来画的是手插进牛仔裤的特写") {{}} diff --git "a/content/posts/\351\200\203\347\246\273\347\276\244\345\261\205\347\224\237\346\264\273.md" "b/content/posts/\351\200\203\347\246\273\347\276\244\345\261\205\347\224\237\346\264\273.md" index ede3ade5..4d96a039 100644 --- "a/content/posts/\351\200\203\347\246\273\347\276\244\345\261\205\347\224\237\346\264\273.md" +++ "b/content/posts/\351\200\203\347\246\273\347\276\244\345\261\205\347\224\237\346\264\273.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 @@ -
+
{{ .Inner | markdownify | safeHTML }}
-- cgit v1.2.3