improve figure preview

assets/_custom.scss

@@ -18,9 +18,17 @@ figure.audio-player audio {
   width: 100%;
 }
 
-img[data-thumbnail] {
-  background-repeat: no-repeat;
-  background-size: 100%;
+figure.image {
+  border: 1px solid #ccc;
+  border-radius: 15px;
+  overflow: hidden;
+  img[data-thumbnail] {
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+  figcaption {
+    text-align: center;
+  }
 }
 
 .grid-list {

content/docs/honpen/chapter-4/_index.md

@@ -357,7 +357,7 @@ CD 的声音，对各声音的特征都容易捕捉，比起理想的状态来
 
 接下来保持着嗓子的状态，加入清嗓子时候的感觉。形成比较痛苦且刺耳的声音的话便是成功了。保持着这样的声音，更加抬高喉结的位置吧。
 
-通常，在下图（图 04）位置的喉结，请将喉结抬升到能够完全被下颚埋没的高度。
+通常，在 [下图（图 04）]({{< ref "#figure-04" >}}) 位置的喉结，请将喉结抬升到能够完全被下颚埋没的高度。
 
 {{< figure src="figure-04.jpg" title="图 04" >}}
 

content/docs/sokko-boi/chapter-1/_index.md

@@ -262,7 +262,7 @@ description: 第一章 为了发出良好的声音进行准备 - 成为女孩子
 
 **平稳的姿势**
 
-像下图（图 14）一样，让两脚和肩宽平行站立。
+像 [下图（图 14）]({{< ref "#figure-14" >}}) 一样，让两脚和肩宽平行站立。
 
 但是，对于自己来说最轻松的姿势是十分重要的，如果感觉到“这样的姿势和自己舒服的姿势有所不同啊”的话，调节脚的打开角度找到适合自己的姿势吧。
 

content/docs/sokko-boi/chapter-4/_index.md

@@ -532,7 +532,7 @@ Mi~Si 的音阶各为一组进行练习。
 到现在为止进行了腹式呼吸、各种发声的练习的话，应当能发出相当顺滑的发出假声。
 不要强迫自己发出较大的声音，最初先从私语一样的声音，渐渐的提高声音的话，嗓子便不会被力气所控制。
 手在触摸嗓子的时候，如果肌肉变硬的话则不可以。
-请用手触摸下图（图 16）的位置。
+请用手触摸 [下图（图 16）]({{< ref "#figure-16" >}}) 的位置。
 这时候应当相当柔软，感受不到任何力。
 
 {{< figure src="figure-16.jpg" title="图 16" >}}

layouts/shortcodes/figure.html

@@ -1,8 +1,9 @@
 {{- $src := .Get "src" -}}
 {{- $resource := .Page.Resources.Get $src -}}
 {{- $title := .Get "title" | default $resource.Title -}}
+{{- $hashtag := .Get "hashtag" | default (path.BaseName $src) | anchorize -}}
 {{- $thumbnail := $resource.Resize "64x" | images.Filter (images.GaussianBlur 5) -}}
-<figure>
+<figure class="image" id="{{ $hashtag }}">
   <img
     src="{{ $resource.Permalink }}"
     width="{{ $resource.Width }}"
@@ -11,6 +12,6 @@
     style="background-image: url('data:{{ $thumbnail.MediaType }};base64,{{ $thumbnail.Content | base64Encode }}')"
   >
   {{- with $title -}}
-  <figcaption><h4>.</h4></figcaption>
+  <figcaption><h4>{{ . }}</h4></figcaption>
   {{- end -}}
 </figure>