feat: use custom caption img component for better display

Author: MR-Addict

assets/css/patch.css

@@ -1,3 +1,9 @@
+/* patch for list */
+main ul {
+  margin-block: 0;
+  padding-inline-start: 2rem;
+}
+
 /* patch for table */
 table {
   width: 100%;
@@ -13,30 +19,6 @@ table tr :is(th, td) {
   }
 }
 
-/* images */
-main ul {
-  margin-block: 0;
-  padding-inline-start: 2rem;
-}
-
-main img {
-  border-radius: 1rem;
-}
-
-img.right {
-  float: none;
-  width: 100%;
-}
-
-@media (min-width: 40rem) {
-  img.right {
-    float: right;
-    margin-left: 1rem;
-    margin-bottom: 1rem;
-    width: attr(data-width rem, 20rem);
-  }
-}
-
 /* patch for disabled link */
 .chapter-item div {
   color: var(--sidebar-fg);

assets/css/templates.css

@@ -0,0 +1,24 @@
+/* img template */
+main img {
+  border-radius: 1rem;
+}
+
+.img-container {
+  float: none;
+
+  & .caption {
+    margin: 0;
+    font-size: small;
+    text-align: center;
+    color: var(--icons);
+  }
+}
+
+@media (min-width: 40rem) {
+  .img-container {
+    float: right;
+    padding-left: 1rem;
+    padding-bottom: 1rem;
+    width: attr(data-width rem, 20rem);
+  }
+}

assets/templates/img.html

@@ -0,0 +1,4 @@
+<div class="img-container" data-width="{% width=20 %}">
+  <img src="{% src %}" alt="{% alt %}" />
+  <p class="caption">{% alt %}</p>
+</div>

book.toml

@@ -17,7 +17,7 @@ mathjax-support = false
 no-section-label = false
 git-repository-url = "https://github.com/mr-addict/notes"
 edit-url-template = "https://github.com/mr-addict/notes/edit/main/{path}"
-additional-css = ["./assets/css/patch.css"]
+additional-css = ["./assets/css/patch.css","./assets/css/templates.css"]
 
 [output.html.print]
 enable = true

src/index.md

@@ -1,3 +1,3 @@
 # 我的笔记
 
-{% embed include file="README.md" type="insert" range="5-11" %}
+{% embed include file="README.md" type="raw" range="5-11" %}

src/life/entertainment/chiikawa/index.md

@@ -20,7 +20,7 @@
 
 ### 吉伊卡哇 （ちいかわ）
 
-<img src="images/chiikawa.jpg" alt="Chiikawa" class="right" />
+{% embed img src="images/chiikawa.jpg" alt="Chiikawa" class="right"  %}
 
 - 别名：吉伊、小可爱
 - 物种：仓鼠
@@ -33,7 +33,7 @@
 
 ### 小八猫（ハチワレ）
 
-<img src="images/hachiware.webp" alt="Hachiware" class="right" />
+{% embed img src="images/hachiware.webp" alt="Hachiware" class="right"  %}
 
 - 别名：小八、八字猫
 - 物种：奔驰猫
@@ -46,7 +46,7 @@
 
 ### 兔兔（うさぎ）
 
-<img src="images/usagi.webp" alt="Usagi" class="right" />
+{% embed img src="images/usagi.webp" alt="Usagi" class="right"  %}
 
 - 别名：乌萨奇、兔子、537
 - 物种：兔子
@@ -61,7 +61,7 @@
 
 ### 小桃鼠（モモンガ）
 
-<img src="images/momonga.gif" alt="Momonga" class="right" />
+{% embed img src="images/momonga.gif" alt="Momonga" class="right"  %}
 
 - 别名：飞鼠、小桃、莫莫咖、毛毛力
 - 物种：飞鼠
@@ -72,7 +72,7 @@
 
 ### 栗子馒头（栗まんじゅう）
 
-<img src="images/kuri.webp" alt="Kuri" class="right" />
+{% embed img src="images/kuri.webp" alt="Kuri" class="right"  %}
 
 - 别名：栗子馒头前辈、布丁狗前辈
 - 物种：蜜獾
@@ -83,7 +83,7 @@
 
 ### 海獭（ラッコ）
 
-<img src="images/lakko.gif" alt="Lakko" class="right" />
+{% embed img src="images/lakko.gif" alt="Lakko" class="right"  %}
 
 - 别名：海獭勇者、海獭师傅、师傅、獭师
 - 物种：海獭

src/life/entertainment/sanrio/index.md

@@ -14,7 +14,7 @@
 >
 > [帕恰狗](https://zh.wikipedia.org/wiki/帕恰狗)
 
-<img src="images/pochacco.png" alt="Pochacco" class="right" />
+{% embed img src="images/pochacco.png" alt="Pochacco" class="right"  %}
 
 - 名称：Pochacco、帕恰狗
 - 物种：狗
@@ -29,7 +29,7 @@
 >
 > [Hello Kitty](https://zh.wikipedia.org/wiki/Hello_Kitty)
 
-<img src="images/hello-kitty.png" alt="Hello Kitty" class="right" />
+{% embed img src="images/hello-kitty.png" alt="Hello Kitty" class="right"  %}
 
 - 名称：Hello Kitty，凯蒂猫、无口猫
 - 物种：猫/人（2015 年，三丽鸥发表新设定，指出：Hello Kitty 并不是猫。她走路是用两只脚，从来没有四只脚走路，并没有猫的行为特性，与过往设定并不相同。）
@@ -43,7 +43,7 @@
 >
 > [My Melody](https://zh.wikipedia.org/wiki/My_Melody)
 
-<img src="images/my-melody.png" alt="My Melody" class="right" />
+{% embed img src="images/my-melody.png" alt="My Melody" class="right"  %}
 
 - 名称：Little Red Riding Hood、My Melody、美乐蒂
 - 物种：兔子
@@ -59,7 +59,7 @@
 >
 > [酷洛米](https://zh.wikipedia.org/wiki/酷洛米)
 
-<img src="images/kuromi.png" alt="Kuromi" class="right" />
+{% embed img src="images/kuromi.png" alt="Kuromi" class="right"  %}
 
 - 名称：Kuromi、酷洛米
 - 物种：兔子
@@ -75,7 +75,7 @@
 >
 > [玉桂狗](https://zh.wikipedia.org/wiki/玉桂狗)
 
-<img src="images/cinnamoroll.png" alt="Cinnamoroll" class="right" />
+{% embed img src="images/cinnamoroll.png" alt="Cinnamoroll" class="right"  %}
 
 - 名称：Cinnamoroll、玉桂狗、肉桂狗
 - 物种：狗
@@ -94,7 +94,7 @@
 >
 > [布丁狗](https://zh.wikipedia.org/wiki/布丁狗)
 
-<img src="images/pom-pom-purin.png" alt="Pom Pom Purin" class="right" />
+{% embed img src="images/pom-pom-purin.png" alt="Pom Pom Purin" class="right"  %}
 
 - 名称：Pom Pom Purin、布丁狗
 - 物种：黄金猎犬（黄金寻回犬，Golden Retriever）

src/life/studio/disney/index.md

@@ -0,0 +1 @@
+# 迪士尼

src/life/studio/pixar/index.md

@@ -2,7 +2,7 @@
 
 ## 一、简介
 
-<img src="images/pixar-lamp.webp" alt="Pixar Lamp" class="right" data-width="34" />
+{% embed img src="images/pixar-lamp.webp" alt="小台灯是皮克斯的经典标识" width="34" %}
 
 皮克斯动画工作室（Pixar Animation Studios），简称皮克斯（英语：Pixar），其总部位于美国加利福尼亚州的埃默里维尔，是一家以**计算机动画制作**而闻名的动画电影制片公司。