代码实现Typecho文章有图片则显示缩略图,没有图片则不显示
admin
撰写于 2023年 04月 08 日

代码实现Typecho文章有图片则显示缩略图,没有图片则不显示

网上大部分typecho缩略图功能一般分为两类。一类是文章有图片的会显示缩略图,没有图片的则显示随机图片。还有一类是有图片会显示缩略图,没有图片显示默认图片。

总而言之就是每一个文章都要有一个缩略图。这样有一个好处就是文章会很统一,很美观。但是如果有很多随机的缩略图或者默认图片,那么明显用户体验会很差。

今天给大家提供另外一种缩略图的方案:有图片则显示缩略图,没有图片则不显示。先上一张图片,如下:

2023-04-08T08:14:39-20230408041440.png

把下面这段代码贴到functions.php里面

//获取文章缩略图
function showThumbnail($widget)
{ 
$attach = $widget->attachments(1)->attachment;
$pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i'; 
if (preg_match_all($pattern, $widget->content, $thumbUrl)) {
     echo "<div class='post-thumb'> <img class='thumb' src='".$thumbUrl[1][0]."' /></div>";
} elseif ($attach->isImage) {
  echo "<div class='post-thumb'> <img class='thumb' src='".$attach->url."' /></div>";
} 
}

这段代码的意思是,使用正则表达式扫描全文第一张图片,如果有就输出。如果没有再检查附件,如果有则输出。顺便提一句,网上有一些方案是只检查附件有没有图片,这种方案是明显存在漏洞的,你比如如果是外链图片,就会认为是没有图片。所以优先推荐带正则表达式的方案。

下一步要打开 index.php 或者 archive.php 将 <?php showThumbnail($this); ?> 这段代码贴到

前面。
然后在style.css样式表里面添加缩略图样式。

.post-thumb{
width:200px;
max-height:150px;
}

代码实现Typecho文章有图片则显示缩略图,没有图片则不显示

代码实现Typecho文章有图片则显示缩略图,没有图片则不显示

网上大部分typecho缩略图功能一般分为两类。一类是文章有图片的会显示缩略图,没有图片的则显示随机图片。还有一类是有图片会显示缩略图,没有图片显示默认图片。

总而言之就是每一个文章都要有一个缩略图。这样有一个好处就是文章会很统一,很美观。但是如果有很多随机的缩略图或者默认图片,那么明显用户体验会很差。

今天给大家提供另外一种缩略图的方案:有图片则显示缩略图,没有图片则不显示。先上一张图片,如下:

2023-04-08T08:14:39-20230408041440.png

把下面这段代码贴到functions.php里面

//获取文章缩略图
function showThumbnail($widget)
{ 
$attach = $widget->attachments(1)->attachment;
$pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i'; 
if (preg_match_all($pattern, $widget->content, $thumbUrl)) {
     echo "<div class='post-thumb'> <img class='thumb' src='".$thumbUrl[1][0]."' /></div>";
} elseif ($attach->isImage) {
  echo "<div class='post-thumb'> <img class='thumb' src='".$attach->url."' /></div>";
} 
}

这段代码的意思是,使用正则表达式扫描全文第一张图片,如果有就输出。如果没有再检查附件,如果有则输出。顺便提一句,网上有一些方案是只检查附件有没有图片,这种方案是明显存在漏洞的,你比如如果是外链图片,就会认为是没有图片。所以优先推荐带正则表达式的方案。

下一步要打开 index.php 或者 archive.php 将 <?php showThumbnail($this); ?> 这段代码贴到

前面。
然后在style.css样式表里面添加缩略图样式。

.post-thumb{
width:200px;
max-height:150px;
}

那年今日
04月
08日
上一篇
风度 - 汪苏泷
下一篇
农历2023.2.19
赞 (0)

猜您想看

评论区(暂无评论)

这里空空如也,快来评论吧~

我要评论