很多笔记或博客网站，例如 语雀、Blogger 等 都可以自动获取文章中的第一张图片作为文章头图或缩略图。一些笔记类的文章，可能很多人都不会专门制作或挑选缩略图，对于这一类的文章，最省事的方法就是使用文章中的第一张图片作为缩略图。下面简单写一下 Typecho 主题获取文章中的第一张图片作为缩略图的方法。

编写函数

复杂一些的 PHP 代码可以封装为函数放到 functions.php 中，下面编写一个匹配 HTML 的 img 的 src 的函数：

function getPostImg($archive) {
    $img = array();
    //  匹配 img 的 src 的正则表达式
    preg_match_all("/<img.*?src=\"(.*?)\".*?\/?>/i", $archive->content, $img);
    //  判断是否匹配到图片
    if (count($img) > 0 && count($img[0]) > 0) {
        //  返回图片
        return $img[1][0];
    } else {
        //  如果没有匹配到就返回 none
        return 'none';
    }
}

上面的 getPostImg 函数接收一个文章对象，这个文章对象就是 index.php 循环输出文章时的 $this，也是 post.php 或 page.php 输出文章时的 $this。对象的 content 属性就是转换为 HTML 后的文章内容，无论你的文章是 Markdown 还是 HTML 格式，使用 content 属性获取的文章内容都是 HTML。

上面如果匹配到图片就返回图片的 URL，如果没有匹配到图片就返回 none。如果你的主题必须要设置文章头图的话，在没有匹配到图片的情况下可以返回一个默认的图片地址。

调用函数

下面调用 getPostImg 函数来获取文章头图：

<img src="<?php echo getPostImg($this); ?>" alt="<?php $this->title(); ?>">

上面图片 alt 中的内容是文章标题。

固定图片比例

如果你的博客文章缩略图或头图的宽高比是固定的话，就不太适合用 img 标签，在图片尺寸比例不固定的情况下用 img 可能会导致图片变形。这里建议使用 div 来显示图片，可以设置 div 的 background-image 为图片地址。通过 background-image 背景图片 来显示图片可以很方便的设置自动缩放和居中。

下面使用 div 显示图片：

<div style="background-image: url(<?php echo getPostImg($this); ?>)" class="thumbnail"></div>

CSS 样式：

.thumbnail {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #e0e0e0;
}
.thumbnail:after {
  content: '';
  padding-bottom: 50%;
  display: block;
}

上面是一个固定宽高比的响应式缩略图。div 的宽度是 100% 和父容器一样，高度是宽度的 50%，也就是 2 比 1，无论 div 的宽度怎么变，高度都是宽度的 50%。

如果要调整宽高比可以更改 :after 内的 padding-bottom，下面是一些常见的宽高比：

  • 2 比 1：50%
  • 4 比 3：75%
  • 16 比 9：56.25%

下面是一些用到的 CSS 说明：

  • background-size: cover：背景图片大小自动缩放。
  • background-position: center：背景图片纵向和横向都居中。

如果响应式网站的元素需要固定宽高比也可以参考上面的写法。

相关文章：