起因

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

经过

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

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

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%;
    }
}

image-20211001155120488

总结

原生的figure语法如下:

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

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

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

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

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