起因

昨晚心血来潮，看到某位博主的博客甚是眼馋——里面的相册和豆瓣内容展示页面。但是，不知道咋回事，打完几把吃鸡后头脑不在状态，折腾到很晚都没搞定。安睡一晚上，早上起床醒来，一下就搞定了。

经过

弃用普通的HTML标记<center>图片标题</center>作为图片标题，改用原先一直没发现的figure（其实在Hugo文档中写的很详细了，之前没有仔细的阅读），在此基础上优化了ficaption的样式。

在themes\PaperMod\assets\css\common\post-single.css中，添加了

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

figure {
    text-align: center;
    margin: 0;
}
figure figcaption {
    text-align: center;
    margin:0.5rem auto 1rem;
    width: 40%;
    border-top: 1px solid #bbb;
    font-size:0.8em;
    color:#bbb;
    padding:5px;
    line-height:1.8em;
}
figure figcaption:before {
    content: "◎ ";
}

figure img {
    max-width: 100%;
    border-radius: 0;
}

@media (max-width:683px) {
    figure figcaption {
        width: 75%;
    }
}

总结

原生的figure语法如下：

1

{{ < figure align=center src="image.jpg" > }}

也有人魔改了shortcode配置，使用以下的语法：

1

{{ < figure "https://lmm.elizen.me/images/2021/08/obsidian-start-1.jpeg" "起始页 By Dataview" > }}

后者比前者要简洁一些，但是还是存在缺点：在 Markdown 文档中书写的时候不能直接预览图片。

所以我还是采用 Markdown 的![]()语法来添加图片，使用<figure><center><figcaption>图片标题</figcaption></center><figure>来为图片添加标题，以同时获得较好的预览体验和标题显示效果。