关于Z-Blog列表显示文章图片的坑

技巧4年前 隔壁老李于 2020-05-23 09:27:15 最后编辑

很多Z-Blog主题都会在列表显示文章的第一张图片作为封面,老李的主题自然也不例外。

这个缩略图的实现方式其实是利用正则查找文章正文里的<img src=""的图片地址,然后输出到文章列表里。

Z-Blog官方wiki提供了这样一行代码

$pattern = "/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.jpeg|\.png]))[\'|\"].*?[\/]?>/";

现在市面上大部分包含列表缩略图的主题也都是用了这个代码。

然后就在昨天,开发群里的李洋同学发现了一个很有意思的问题,当你的文章内容里图片的前面是一个外链的iframe嵌入的话(比如插入一个视频),列表缩略图就会出现错误。

关于Z-Blog列表显示文章图片的坑  第1张

其表现为本来的图片地址变成了从你嵌入的外链视频地址开始一直到第一张图片地址结束的所有代码。

比如你的文章是这样:

<p>
    <iframe class="edui-faked-video" src="http://sfsdfsdf.com/123.mp4" width="420" height="280" allowfullscreen="" frameborder="0"></iframe>
</p>
<p>
    <img src="http://127.0.0.11/zb_users/upload/2020/05/202005231590196170711540.jpg" title="476623669465357329.jpg" alt="476623669465357329.jpg"/>
</p>

抓出的图片地址就变成了这样:

http://sfsdfsdf.com/123.mp4" width="420" height="280" allowfullscreen="" frameborder="0"></iframe>
</p>
<p>
    <img src="http://127.0.0.11/zb_users/upload/2020/05/202005231590196170711540.jpg

关于Z-Blog列表显示文章图片的坑  第2张

然后发现阳光大佬的os2019主题就没有这个问题,作为一个主题裁缝,最不缺的技能当然就是抄啊,于是复制了阳光大佬的代码:

$pattern = "/<img.*?src=[\'|\"](.*?)[\'|\"].*?[\/]?>/i";

问题就这样解决了。

关于Z-Blog列表显示文章图片的坑  第3张

阳光大佬的代码考虑到了大小写、'"、和所有的后缀的情形。

如果你的站不是采集的站,那么文章代码会比较规范,就无需考虑大小写和'",开发群里的水水大佬给出了这样一段代码:

$pattern="/<img[^>]*src=\"([^\"]+\.(gif|jpg|png))\"[^>]*>/";

以上两段代码都可以正常使用,你可以根据你的需求自行选择。

然后,Z-Blog官方已经在wiki里更新了水水这段代码。

关于Z-Blog列表显示文章图片的坑  第4张

本文由 @隔壁老李 于 2020-05-23 发布在 野路子博客,如无特别说明,本博文章均为原创,转载请保留出处。
评论 (0)
访客
Top