dede 调用图片注释

DedeCMS提供了多种标签来实现这个功能,最常用的是 {dede:field name='imgalt' /} 和 {dede:field name='title' /}。

下面我将详细介绍几种常见的调用场景和具体方法。

页（article_article.htm）中调用

这是最常见的需求,即在文章详情页，让鼠标悬停在图片上时显示Alt信息，或者在图片下方显示图片的标题。

调用单个图片的Alt和标题

页,系统会自动解析 {dede:field.body/} 中的图片，默认情况下，DedeCMS在生成文章内容时，会自动将你上传图片时填写的“Alt文本”和“标题”插入到 <img> 标签中。

后台设置步骤：

1. 登录DedeCMS后台。
2. 进入“[核心] -> [内容维护] -> [选择文档]”，找到并编辑你需要修改的文章。
3. 在文章编辑器中,点击“上传图片”按钮。
4. 上传图片后,在弹出的窗口中，找到“高级属性”或“其他选项”。
5. 填写“Alt文本”（图片注释）和“”。

前台模板调用： 一旦你在后台设置了Alt和标题，DedeCMS在生成HTML时就会自动处理，你无需在模板中做任何额外操作，生成的代码会是这样：

<img src="/uploads/202510/image-1.jpg" alt="这是这张图片的SEO优化描述" title="这是鼠标悬停时显示的标题">

如何让Alt文本以文字形式显示在图片下方？ 如果你想在图片下方直接显示Alt文本作为说明文字，而不是仅仅作为alt属性，你可以这样做：

在 article_article.htm 模板文件中，找到 {dede:field.body/} 标签，用以下代码替换或修改它：

{dede:field.body function='htmlspecialchars_decode(@me)'/}

这行代码本身只是安全地输出内容,要实现“在图片下方显示Alt文本”，你需要更复杂的处理，通常有两种方法：

方法A：使用自定义函数（推荐）

1. 在 /include/extend.func.php 文件（如果不存在则创建）中添加以下PHP函数：

   /**
    * 在文章内容图片下方添加Alt文本说明
    * @param string $body 文章内容
    * @return string 处理后的文章内容
    */
   function AddImgAltText($body) {
       $pattern = "/<img[^>]*>/i";
       $replacement = '';
       if (preg_match_all($pattern, $body, $matches)) {
           foreach ($matches[0] as $img) {
               // 获取alt和title
               if (preg_match('/alt=["\']?([^"\' ]*)["\']?/i', $img, $match_alt)) {
                   $alt_text = $match_alt[1];
               } else {
                   $alt_text = '';
               }
               if (preg_match('/title=["\']?([^"\' ]*)["\']?/i', $img, $match_title)) {
                   $title_text = $match_title[1];
               } else {
                   $title_text = '';
               }
               // 构建新的图片和说明文字
               if (!empty($alt_text)) {
                   $new_img = $img . '<p class="img-description">' . $alt_text . '</p>';
                   $body = str_replace($img, $new_img, $body);
               }
           }
       }
       return $body;
   }

2. 在模板文件 article_article.htm 中调用这个函数：

   {dede:field.body function='AddImgAltText(@me)'/}

   这样,所有带有Alt文本的图片下方都会自动添加一个带有 img-description 类的<p>标签来显示Alt文本。

方法B：使用JavaScript（前端处理）

如果你不想修改PHP文件,可以在页面底部用JS实现，但这种方法SEO效果较差，因为搜索引擎可能无法抓取到JS动态生成的内容。

<script>
document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('.article-content img'); // 根据你的内容区域选择器调整
    images.forEach(img => {
        const alt = img.getAttribute('alt');
        if (alt) {
            const desc = document.createElement('p');
            desc.className = 'img-description-js';
            desc.textContent = alt;
            img.parentNode.insertBefore(desc, img.nextSibling);
        }
    });
});
</script>

在列表页（list_*.htm）或首页（index.htm）中调用缩略图

在列表页,我们通常调用 {dede:field.litpic /} 来显示缩略图，这个缩略图的Alt和标题来自于文章的“”和“”。

调用缩略图的Alt

默认情况下,{dede:field.litpic /} 不会自动添加 alt 属性，你需要手动在模板中添加。

方法：

在 list_*.htm 或 index.htm 模板中，找到调用缩略图的地方，将其修改为：

<a href="[field:arcurl/]">
    <img src="[field:litpic/]" alt="[field:title/]" />
</a>

• [field:litpic/]：缩略图地址。
• [field:title/]：文章的标题，这里用作图片的Alt文本，这对SEO非常有帮助。

调用缩略图的标题（Title）

<img> 标签的 title 属性是鼠标悬停时显示的文本，同样，我们可以用文章的标题或关键词来填充。

<a href="[field:arcurl/]">
    <img src="[field:litpic/]" alt="[field:title/]" title="[field:title/]" />
</a>

如果你想用文章的“关键词”作为标题，可以这样写：

<a href="[field:arcurl/]">
    <img src="[field:litpic/]" alt="[field:title/]" title="[field:keywords/]" />
</a>

在自定义模型中调用

如果你的文章使用了自定义模型,并且图片字段是“图片集”或“多媒体类型”，调用方式会有所不同。

调用图片集中的图片注释

假设你有一个图片集字段,字段名为 pics。 页模板中，DedeCMS会通过 {dede:field.pics/} 来遍历图片集，每张图片的信息都存储在一个数组中。

模板代码示例：

{dede:field name='pics'}
    <dl>
        <dd>
            <a href="[field:linkurl/]" title="[field:text/]">
                <img src="[field:imgsrc/]" alt="[field:text/]" />
            </a>
        </dd>
        <dt>[field:text/]</dt> <!-- 这里显示的就是图片注释 -->
    </dl>
{/dede:field}

• [field:imgsrc/]：图片路径。
• [field:linkurl/]：图片链接（可以留空或指向原图）。
• [field:text/]：这就是你为这张图片填写的注释（Alt文本）。

希望这份详细的指南能帮助你解决在DedeCMS中调用图片注释的问题！