近期不断在折腾主题，友圈中有许多WordPress主题的博友，都有图片描述的显示功能，比如：雅余，旅行漫记。我也想实现这个，装饰文章显示，下面是效果图，在图片底部都有描述显示。 
在bing和baidu搜索中，关于typecho在文章中显示图片描述的描述太少太少，搜索很久终于找到友圈中的立云图志，我们通过邮件交流了该图片描述显示的可能性。
鸣谢立云图志的解决思路（功能整理成了文档，也做了优化，比如可以选择性输出需要显示的图片描述 ），不仅给出了多种解决方法，还附带了代码！
本主题如何实现
有了思路，一步步解决，先找到Html显示我的图片位于figure，可以看到data-caption="番薯"，新增的代码就可以获取图片标题并添加到图片下方，获取data-caption，排除.jpg和.png，只显示中文，将figcaption标签添加到figure标签下，就完成整个的逻辑。
post.php搜索figure部分，我这里的主题pigeon采用的是js来显示文章图片，所以我采用了立云图志的在前端使用 JavaScript 脚本的思路，虽然之前的图片描述，比如 IMF_0001.jpg 这些都会输出，既然如此，我就把关于.jpg 都自动隐藏。这样子有了判断条件，就只会输出有中文的描述=标题，就不会把之前的各种.jpg都输出了。
在后台文章编辑器中显示：
![番薯][9] 则显示图片描述
![番薯.jpg][10] 则不显示图片描述
立云图志点评缺点：使用 js 检查是否包含 .jpg，会导致这个过程滞后，表现为容器添加时，会出现布局在高度上的跳动。总的来说，是我目前我认为最简单的一种方法，有待改进。
更新
感谢蔷薇角落博主的帮助，在评论区留言了完整的PHP执行代码，解决了上诉布局跳动的缺点(V2024.05.19) 。
最后更新 2025-02-27
上一篇： 春节叙事
下一篇：南宁青秀山郁金香花展游记
图片这样处理 加上水印 确实高级了许多
单独设计了水印，加上更好些，之前有被盗图的情况。
我的话会在后端完成这个转换，这样就不会有跳动的问题了。
技术不到位，后端显示图片我还没研究明白。
其实就是把js 处理的过程，在 typecho 增加处理函数 进行处理后输出。
function addImageCaptions($content) { // 使用正则表达式匹配所有包含 data-caption 属性的 figure 标签 preg_match_all('/<figure.*?data-caption="(.*?)".*?>(.*?)<\/figure>/is', $content, $matches); foreach ($matches[0] as $index => $figure) { // 获取 data-caption 属性的值 $caption = $matches[1][$index]; // 只保留中文 $caption = preg_replace('/[^\p{Han}]/u', '', $caption); if (!empty($caption)) { // 构建 figcaption 标签 $figcaption = '<figcaption>' . $caption . '</figcaption>'; // 将 figcaption 标签插入到 figure 标签内部 $newFigure = str_replace('</figure>', $figcaption . '</figure>', $figure); // 替换原始的 figure 标签 $content = str_replace($figure, $newFigure, $content); } } return $content; }感谢修改好的代码！我把代码放入php文件，再引用这个函数就解决了，厉害！现在已经删除了js处理，改用php了。
能用就好，其实这个问题如果你搜索一下百度还能看到类似的教程。
因为js是页面加载完毕后进行处理，会导致延迟和其他情况的发生。如果是php后端处理后输出到页面就不会啦。
能帮助到你就行，这个百度搜索问AI都能找到解决方案的。
专业，这个方面知识储备少，还好有你们多指点。像你主题就好简洁，就不那么折腾了。
让 ai 写一个
ai我还使用得不是很流畅，也尝试过，慢慢琢磨了哈哈。
这个应该是引入什么信息吧，我之前看到一个博友有写。
https://rzi.me/read-2263.html 这个
可以呀，显示EXIF测试，之前作者一直用pigeon的，现在换新，看看他怎么设计了。
这玩意我之前好几回想搞，但是整不出来，几次折腾几次放弃了
我折腾了两天，太烧脑了，只能不断的试错。