Typecho 文档：如何在文章中显示图片描述？
适用程序：Typecho
程序版本：1.2.1
文档作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/attachment/3943/
许可方式：CC BY-NC-SA
注意：此文档源于作者在博客改造中的一些经验总结，转载还请署名。
敬告：此文档操作涉及程序核心文件的修改，作者不对你在使用中产生的任何问题造成的不良后果，承担责任。
文档说明
Typecho 支持以下两种格式显示文章中的图片，每种格式都可以自定义图片的描述，但是，似乎没有内置方法获取和输出这些描述，本文档通过几种方式实现这一需求。
1. Markdown 语法插入图片
2. 编辑器功能按键插入图片
![图片描述][3]
[3]: 图片链接
文件 var\Utils\HyperDown.php 会对以上两种格式做解析转换为 HTML 输出，由 post.php 和 page.php 文件中的 $this->content() 渲染出图片 <img src="图片链接" alt="图片描述" title="图片描述">
那么，知晓解析机制后，思路会清晰，操作也顺畅多了。
使用方法
方法一：修改程序源文件。
缺点，不利于后期博客升级；也会让之前未完善的图片描述（如 IMG_888.jpg）一并输出。
1. 打开 var\Utils\HyperDown.php 文件，找到第496行和第508行，在其内 <img> 结构之后添加图片描述容器：
// 第496行替换为
"<img src=\"{$url}\" alt=\"{$title}\" title=\"{$title}\"><span class=\"escaped\">{$title}</span>"
// 第508行替换为
"<img src=\"{$this->_definitions[$matches[2]]}\" alt=\"{$escaped}\" title=\"{$escaped}\"><span class=\"escaped\">{$escaped}</span>"
2. 通过定义 .escaped 适配样式。
方法二：在前端使用 JavaScript 脚本。
缺点，对于使用异步加载的文章内容，可能不太友好；对于网络不顺畅、图片较多等情况下，显示方面有明显延迟；对于使用 <img> 方式插入的表情包，也会受影响。
优点，可以通过字符 ·（中文输入状态下的 ~ 键）决定哪些图片需要输出图片描述，即图片描述以字符 · 起头的（如 · 图片描述）才会输出，避免之前未完善的图片描述（如 IMG_888.jpg）一并输出。
1. 查找文章内容区的所有 <img> 图片，提取 title 属性值，并添加至对应图片后方：
document.addEventListener("DOMContentLoaded", () => {
const post = document.querySelector(".lopwon-content"); // 替换为文章内容区的类名
if (!post) return;
const images = post.querySelectorAll("img");
for (let img of images) {
const titleText = img.getAttribute("title");
if (titleText && titleText.startsWith("·")) { // 检查 title 是否存在且以字符 · 起头的
const span = document.createElement("span");
span.textContent = titleText;
span.className = "escaped";
img.insertAdjacentElement("afterend", span);
}
}
});
2. 通过定义 .escaped 适配样式。
方法三：在后端使用 PHP 替换。
缺点，对于使用 <img> 方式插入的表情包，会受影响。
优点，可以通过字符 ·（中文输入状态下的 ~ 键）决定哪些图片需要输出图片描述，即图片描述包含字符 · （如 · 图片描述）的才会输出，避免之前未完善的图片描述（如 IMG_888.jpg）一并输出。
1. 在主题 functions.php 新增文章内容替换函数：
function lopwonContent($content) {
// 在 $this->content 中匹配图片 <img src="" alt="" title=""> 并重新构建 <img> 结构，此方法也可以用于对 <img> 构建为符合灯箱系统或延迟加载的结构
$content = preg_replace_callback('/<img[^>]+src=["\']([^"\']+)["\'][^>]*>/i', function ($matches) {
$imgTag = $matches[0];
$imgSrc = $matches[1]; // 图片 src 属性值，即图片链接
preg_match('/alt=["\']([^"\']*)["\']/', $imgTag, $altMatches); // 提取 img 标签中的 alt 属性
preg_match('/title=["\']([^"\']*)["\']/', $imgTag, $titleMatches); // 提取 img 标签中的 title 属性
// 两个值是一样的，详见文件 var\Utils\HyperDown.php 第487行和第502行，图片描述同时添加到 alt 和 title
$altText = isset($altMatches[1]) ? $altMatches[1] : ''; // 图片 alt 属性值，即图片描述
$titleText = isset($titleMatches[1]) ? $titleMatches[1] : ''; // 图片 title 属性值，即图片描述
$escaped = (stripos($altText, '·') !== false) ? '<span class="escaped">' . $altText . '</span>' : ''; // 如果图片描述包含 · 字符，才需要构建图片描述容器
$newImgTag = '<img src="' . $imgSrc . '" alt="' . $altText . '" title="' . $titleText . '" />' . $escaped; // 构建包含图片描述的新 <img> 标签结构
return $newImgTag;
}, $content);
return $content; // 返回经过处理的文章内容
}
2. 通过定义 .escaped 适配样式。
3. 在 post.php 和 page.php 调用 lopwonContent($content)
$content = $this->content; // 如果找不到 $this->content 说明在用主题已经对文章内容作了自定义，找到输出文章内容的变量进行赋值
echo lopwonContent($content); // 输出经过函数 lopwonContent 处理的文章内容
至此，在文章中的图片也能显示自定义的图片描述了。
