dede如何调用图片地址?

99ANYc3cd6
预计阅读时长 15 分钟
位置: 首页 DEDE建站 正文

调用文章列表/内容页的缩略图

这是最常见的需求,通常在首页、列表页、文章内容页调用。

dede 调用图片地址
(图片来源网络,侵删)

方法1:使用系统默认的 {dede:field.litpic}

这个标签专门用于获取文章的缩略图地址。

  • 适用页面:文章列表页 (index_list.htm, list_article.htm 等)、文章内容页 (article_article.htm)。
  • 标签代码
    <img src="{dede:field.litpic/}" alt="{dede:field.title/}" />
  • 说明
    • src="{dede:field.litpic/}" 直接获取缩略图的完整路径。
    • alt="{dede:field.title/}" 是一个良好的 SEO 习惯,将图片的 alt 属性设置为文章标题。
    • 如果文章没有上传缩略图,这个标签会返回一个空值或默认的 "无缩略图" 图片地址。

方法2:使用更灵活的 {dede:field name='litpic'}

这个标签和方法一效果完全一样,只是写法不同,更符合 DedeCMS 字段调用的通用规范。

  • 适用页面:同上。
  • 标签代码
    <img src="{dede:field name='litpic'/}" alt="{dede:field name='title'/}" />

调用栏目列表页/内容页的栏目图片

每个栏目都可以设置一个“栏目图片”,通常用于栏目列表页的展示。

方法:使用 {dede:field.typeimg}

这个标签专门用于获取当前栏目的图片地址。

dede 调用图片地址
(图片来源网络,侵删)
  • 适用页面:栏目列表页 (list_type.htm)、栏目内容页 (type_type.htm)、文章内容页(因为文章内容页可以知道它属于哪个栏目)。
  • 标签代码
    <img src="{dede:field.typeimg/}" alt="{dede:field.typename/}" />
  • 说明
    • alt="{dede:field.typename/}"alt 属性设置为栏目名称。
    • 如果该栏目没有设置图片,{dede:field.typeimg/} 会返回空。

调用自定义字段中的图片地址

这是最灵活也最容易出错的地方,当你需要上传多张图片或者上传到特定位置时,就需要使用自定义字段。

假设你已经创建了一个名为 myimg 的单图片上传类型的自定义字段。

方法:使用 {dede:field name='自定义字段名'}

这是调用自定义字段的标准方法。

  • 适用页面:文章列表页、文章内容页(需要根据字段是否在列表中显示来决定)。

    dede 调用图片地址
    (图片来源网络,侵删)
  • 标签代码

    <!-- 调用单张图片 -->
    <img src="{dede:field name='myimg'/}" alt="自定义图片" />
    <!-- 调用多张图片(假设字段名为 `pics`,用 `|` 分隔) -->
    {dede:field name='pics' function='str_replace("|", ",", "@me")'/}
    <!-- 上面的代码会把 "pic1.jpg|pic2.jpg" 转换成 "pic1.jpg,pic2.jpg" -->
    <!-- 然后你可以用这个逗号分隔的字符串来循环输出图片 -->
    {dede:field name='pics' function='explode("|", "@me")'}
      <img src="[field: function='str_replace($cfg_cmspath, "", "@me')'/]" alt="多图展示" />
    {/dede:field}

    注意:多图调用的逻辑稍微复杂,通常需要结合 function 函数来处理分隔符。


在首页/列表页调用文章内容中的第一张图片

文章可能没有上传缩略图,但你希望从文章内容 body 中提取第一张图片作为缩略图来显示。

方法:使用 preg_match 正则表达式

这需要在列表页模板文件 (list_*.phpindex_list.htm) 中通过底层模板 {dede:datalist} 配合PHP代码实现。

步骤 1:修改列表页模板文件 (list_article.htm)

在文件顶部,<head> 标签之后,加入以下PHP代码:

{dede:php}
function GetFirstImg($body){
    $preg = "/<img.*?src=[\\'|\\"](.*?(?:[\\.jpg|\\.jpeg|\\.png|\\.gif|\\.bmp]))[\\'|\\"].*?[\\/]?>/i";
    preg_match_all($preg, $body, $match);
    if(!empty($match[1])){
        return $match[1][0]; // 返回第一张图片地址
    }else{
        return ''; // 如果没有图片,返回空
    }
}
{/dede:php}

步骤 2:在底层循环中调用该函数

修改 {dede:datalist} 循环部分:

{dede:datalist}
  <li>
    <!-- 如果有缩略图,显示缩略图,否则调用内容第一张图 -->
    <a href="[field:arcurl/]">
      <img src="[field:litpic runphp='yes']
        if(@me == '') {
          @me = GetFirstImg(@me); // 调用上面的函数,注意这里的 @me 是当前文章的 body 内容
        }
        [/field:litpic]" alt="[field:title/]" />
    </a>
    <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
  </li>
{/dede:datalist}

注意:这种方法的性能开销比直接调用 litpic 要大,因为它需要解析文章内容,不建议在非常长的列表页中使用。


总结与最佳实践

调用对象 推荐标签 适用页面 示例
文章缩略图 {dede:field.litpic/} 列表页、内容页 <img src="{dede:field.litpic/}" alt="{dede:field.title/}">
栏目图片 {dede:field.typeimg/} 栏目页、内容页 <img src="{dede:field.typeimg/}" alt="{dede:field.typename/}">
自定义单图 {dede:field name='myimg'/} 列表页、内容页 <img src="{dede:field name='myimg'/}" alt="自定义图片">

重要提示:

  • 路径问题:DedeCMS 的图片地址通常是相对于网站根目录的,如果你的网站部署在子目录(如 http://www.example.com/dede/),并且你的网站后台设置了“站点根目录”,DedeCMS 通常会自动处理路径,如果图片无法显示,请检查后台“系统” -> “系统基本参数” -> “站点根目录”是否设置正确。
  • 模板缓存:修改模板文件后,如果看不到效果,请去后台“生成” -> “更新主页HTML”或“更新栏目HTML”,清除缓存。
  • 底层模板:在列表页、首页等需要循环输出内容的地方,一定要使用 {dede:datalist}{dede:arclist} 等底层模板标签,而不是直接使用 {dede:field...}

希望这份详细的指南能帮助你解决在 DedeCMS 中调用图片地址的各种问题!

-- 展开阅读全文 --
头像
程序设计与c语言引论pdf适合零基础自学吗?
« 上一篇 03-07
C语言如何读取txt文件中的字符串?
下一篇 » 03-07

相关文章

取消
微信二维码
支付宝二维码