调用文章缩略图(最常用、最推荐)
这是手机版列表页和内容页最常用的方法,因为它加载速度快,且图片通常是经过裁剪的,适合手机屏幕显示。
在列表页(如 index.htm, list_article.htm)调用
在手机版的列表模板中,使用 {dede:arclist} 标签来循环文章列表,并在其中使用 [field:picname/] 来调用每篇文章的缩略图。
代码示例:
<ul>
{dede:arclist row='5' titlelen='30'}
<li>
<!-- 调用缩略图,并添加链接到文章详情页 -->
<a href="[field:arcurl/]">
<img src="[field:picname/]" alt="[field:title/]" />
</a>
<h3><a href="[field:arcurl/]">[field:title/]</a></h3>
</li>
{/dede:arclist}
</ul>
代码解析:
{dede:arclist row='5' titlelen='30'}: 调用5条文章,标题长度限制为30个字符。[field:picname/]: 这是调用文章缩略图地址的核心标签,它对应的是数据库中dede_archives表的litpic字段。[field:arcurl/]: 调用文章的URL地址。[field:title/]: 调用文章标题。
页(如 article_article.htm)调用
在文章详情页,你可能想在文章标题上方或内容下方显示一张大图,同样可以使用 {dede:field} 标签来调用当前文章的缩略图。
代码示例:
<h1>{dede:field.title/}</h1>
<!-- 调用当前文章的缩略图 -->
{dede:field name='litpic'/}
<div class="article-content">
{dede:field.body/}
</div>
代码解析:
{dede:field name='litpic'/}: 直接调用当前文章的缩略图。litpic是dede_archives表中缩略图字段的名称。
调用文章内容中的第一张图片(当没有缩略图时使用)
有些文章可能没有上传缩略图,但你想在列表页显示文章内容里的第一张图片作为配图,这时可以使用织梦的自定义函数 GetFirstImg()。
修改织梦标签(需要修改模板文件)
这个方法需要你在模板中使用一个特殊的变量来调用函数。
代码示例(在列表页 arclist 标签内):
<ul>
{dede:arclist row='5' titlelen='30'}
<li>
<a href="[field:arcurl/]">
<!-- 使用[field:array/]来获取文章完整信息,然后调用自定义函数 -->
[field:array runphp='yes']
// 获取文章内容
$body = @me['body'];
// 调用系统函数获取第一张图片
$img = GetFirstImg($body);
// 如果图片存在,则输出img标签,否则输出一个默认图片
if($img) {
@me = '<img src="'.$img.'" alt="@me['title'].'" />';
} else {
@me = '<img src="/images/default.jpg" alt="@me['title'].'" />';
}
[/field:array]
</a>
<h3><a href="[field:arcurl/]">[field:title/]</a></h3>
</li>
{/dede:arclist}
</ul>
代码解析:
[field:array runphp='yes']: 这是一个强大的标签,允许你获取当前文章的所有字段,并在PHP代码块中处理。$body = @me['body'];: 获取当前文章的body字段(即文章内容)。GetFirstImg($body);: 这是织梦系统自带的一个函数,它会从字符串(文章内容)中提取第一张<img>标签的src地址。if($img) { ... } else { ... }: 判断是否找到了图片,如果找到了,就输出<img>标签;如果没找到,就输出一个你预设的默认图片路径,避免显示空白或破损图标。
重要提示:
如果你的模板中 GetFirstImg 函数无法使用,可能是因为你的织梦版本问题或者函数被禁用了,你可以将这个函数代码添加到织梦的核心函数文件中,通常是 /include/helpers/extend.helper.php。
// 在 extend.helper.php 文件中添加以下函数
if ( ! function_exists('GetFirstImg'))
{
function GetFirstImg($body)
{
$preg = "/<img.*?src=[\'|\"](.*?)[\'|\"].*?[\/]?>/i";
preg_match_all($preg, $body, $match);
if (!empty($match[1]))
{
return $match[1][0];
}
return '';
}
}
调用自定义字段图片
如果你的文章是通过自定义字段(myimage)来上传图片的,那么调用方法会更直接。
在列表页调用
在 arclist 标签中使用 [field:myimage/] 即可。
代码示例:
{dede:arclist row='5' titlelen='30'}
<a href="[field:arcurl/]">
<img src="[field:myimage/]" alt="[field:title/]" />
</a>
<h3><a href="[field:arcurl/]">[field:title/]</a></h3>
{/dede:arclist}
页调用
页使用 {dede:field name='myimage'/}。
代码示例:
<h1>{dede:field.title/}</h1>
{dede:field name='myimage'/}
<div class="article-content">
{dede:field.body/}
</div>
总结与最佳实践
| 场景 | 推荐方法 | 核心标签/代码 | 优点 | 缺点 |
|---|---|---|---|---|
| 手机列表页 | 调用文章缩略图 | [field:picname/] |
速度快,图片经过优化,用户体验好。 | 需要手动为每篇文章上传缩略图。 |
| 无缩略图列表页 | 第一张图 | GetFirstImg() 函数 |
自动化,无需额外操作。 | 速度稍慢,图片尺寸可能不规整。 |
| 文章详情页 | 调用文章缩略图 | {dede:field name='litpic'/} |
标准做法,适合做头图。 | 同上,需要上传缩略图。 |
| 特殊需求 | 调用自定义字段图片 | [field:myimage/] |
灵活,适合特定栏目或内容类型。 | 需要提前设置好自定义字段。 |
给手机版开发者的建议:
- 优先使用缩略图:养成为每篇文章上传缩略图的习惯,这是移动端性能优化的关键。
- 设置默认图片:在使用
GetFirstImg或调用缩略图时,最好都设置一个默认图片,以防没有图片时页面布局错乱。 - 图片尺寸优化:在手机版模板中,为
<img>标签设置max-width: 100%和height: auto,确保图片能自适应屏幕宽度。
希望这些详细的解释和示例能帮助你顺利地在织梦手机版中调用图片!
