哆麦CMS列表模板自动提取文章图片作为缩略图代码总结

在使用哆麦CMS撰写文章时，很多用户希望能自动从文章内容中提取图片作为缩略图，无需手动设置特色图片或单独上传作为缩略图。这不仅可以减少工作量，还能保持缩略图与正文内容的高度相关性。

本文整理了四种常见方案，根据你的网站需求选择合适的方式即可。

方法一：有图就显示第一张，无图显示默认图

适用于需要始终展示一张缩略图的场景。

<?php
while(have_posts()){
    the_post();
$images = get_images();
?>
      <div class="item" data-href="<?php the_permalink();?>">
        <?php 
$img_src = !empty($images) && !empty($images[0]) ? $images[0] : '/dm-content/themes/blog/image/thumbnail.jpg';
?>
        <p class="figure"><img src="<?php echo $img_src;?>!300x200" alt="<?php the_subtitle();?>" width="300" height="200" loading="lazy"></p>
        <div class="content">
          <p class="title text-row-1"><?php the_subtitle();?></p>
          <p class="summary text-row-2"><?php echo dm_trim_words(get_the_excerpt(), 360);?></p>
  <span class="time"><?php the_time('j M, Y');?></span>
        </div>
      </div>
<?php } ?>

适用场景：所有文章都需要展示缩略图的场合，避免空图布局破坏页面风格。

方法二：自动提取最多3张图片显示，空图则用默认图补全

<?php
while (have_posts()) {
    the_post();
    $imgs = get_images();
    $default_img = "/dm-content/themes/blog/image/thumbnail.jpg";
    $end = (!empty($imgs) && count($imgs) >= 3) ? 3 : count($imgs);
    if (empty($imgs)) {
        $imgs = [$default_img];
        $end = 1;
    }
?>
    <div class="item">
        <p class="title"><a href="<?php the_permalink(); ?>"><?php the_subtitle(); ?></a></p>
        <div class="figure figure-<?php echo $end; ?>">
            <?php for ($i = 0; $i < $end; $i++) { ?>
                <img src="<?php echo !empty($imgs[$i]) ? $imgs[$i] : $default_img; ?>!400x300" alt="<?php the_subtitle(); ?>" width="400" height="300" loading="lazy">
            <?php } ?>
        </div>
        <div class="summary">
            <p><?php echo dm_trim_words(get_the_excerpt(), 612); ?></p>
            <a href="<?php the_permalink(); ?>" class="more" role="button">Learn More</a> 
        </div>
    </div>
<?php } ?>

适用场景：内容中图片较丰富，希望展示多张图以增强视觉吸引力。

方法三：最多显示三张图片，无图则不显示图片

<?php
while(have_posts()){
    the_post();
    $imgs = get_images();
    $end = count($imgs) >= 3 ? 3 : count($imgs);
?>
            <div class="item">
                <h2 class="title"><a href="<?php the_permalink();?>"><?php the_subtitle();?></a></h2>
                <div class="figure figure-<?php echo $end;?>">
<?php for($i = 0; $i < $end; $i++){?>
                    <img src="<?php echo $imgs[$i];?>!400x300" alt="<?php the_subtitle();?>" width="400" height="300" loading="lazy">
<?php }?>
                </div>
                <div class="summary">
                    <p><?php echo dm_trim_words(get_the_excerpt(), 512);?></p>
                    <a href="<?php the_permalink();?>" class="morelink">Learn More</a>
                </div>
            </div>
<?php } ?>

适用场景：不希望文章没有图时加载默认图，保持页面纯净简洁。

方法四：仅当内容中有图时才显示图片，无图则不显示

<?php
while(have_posts()){
    the_post();
    $images = get_images();
    $img_src = !empty($images) && !empty($images[0]) ? $images[0] : '';
?>
  <div class="item">
  <h2 class="caption-xs" data-href="<?php the_permalink();?>"><?php the_subtitle(); ?></h2>
    <?php if ($img_src): ?>
      <p class="figure"><img src="<?php echo $img_src; ?>!170x120" alt="<?php the_subtitle(); ?>" width="170" height="120" loading="lazy"></p>
    <?php endif; ?>
    <div class="content">
      <p class="summary text-row-3"><?php echo dm_trim_words(get_the_excerpt(), 200); ?></p>
      <p class="info"><?php the_category(', ');?><span class="time"><?php the_time('Y年m月d日'); ?></span></p>
    </div>
  </div>
<?php } ?>

适用场景：避免结构冗余，当内容无图时不输出相关 HTML 标签，保持结构清爽。

以上四种方法各有优劣，根据你的网站设计和内容排版习惯，可以灵活选择一种或多种搭配使用。自动提取缩略图不仅提高效率，也能提升网站视觉一致性。

如果你还在一个个上传缩略图，是时候换个更高效的方式了！