开始写博客之后我发现了 Markdown 缺少一个重要功能:给图片加上说明文字。Markdown 插入图片的语法是这样的:
|
|
我希望「这是一张图片」可以显示在图片底部。想修改网站样式的时候,我常常告诫自己要多写文章,少美化网站。毕竟写作灵感稍纵即逝,样式却随时可以改。可能是今天牙痛比较烦躁,想起这个问题就很想解决掉。在谷歌搜索一番,发现了一篇文章(存档)里有给图片加说明文字的方法。我根据里面的代码略作修改,就搞定这个问题了。步骤如下:
-
在博客根目录下新建
layouts/_default/_markup/render-image.html
1 2
mkdir layouts/_default/_markup/ -p touch layouts/_default/_markup/render-image.html
-
往
render-image.html
填入以下内容1 2 3 4 5 6
<figure> <center> <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}"> <figcaption>{{ .Text }}</figcaption> </center> </figure>
现在输入:
|
|
它会被显示为:
另外,我还在 Stack Overflow 发现了一个怪招:使用单列双行的表格,第一行放图片,第二行放说明文字。
|
|
|
|
效果如下:
![]() |
---|
Space |