zblog的文章封面图片显示设置教程
弄了半天,zblog原来和typecho一样没有图片封面的,这样对有图展示的时候,需要的页面效果多多少少会有不便之处,收集一下做主题的时候,显示文章封面的方法代码把
1,获取文章内容的第一张图片
{plain_thumbnail($article)}
function plain_thumbnail($related) { global $zbp; $pattern="/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png]))[\'|\"].*?[\/]?>/"; $content = $related->Content; preg_match_all($pattern,$content,$matchContent); if(isset($matchContent[1][0])){ $thumb=$matchContent[1][0]; }else{ $thumb=$zbp->host .'zb_users/theme/plain/style/images/no-image.jpg'; } return $thumb; }
下面详细说明下,如何为文章、分类、标签tag加入单独的缩略图功能:
一、文章增加独立的缩略图上传字段:
1、在include.php挂载
Add_Filter_Plugin('Filter_Plugin_Edit_Response3','ydnew_article_img');
function ydnew_article_img(){ global $zbp,$article; echo "<script type=\"text/javascript\" src=\"{$zbp->host}zb_users/theme/ydnew/style/js/lib.upload.js\"></script>"; echo '<p align="right" class="uploadimg">上传缩略图: <input name="meta_pic" id="edtTitle" type="text" class="uplod_img" style="width:60%;" value="'.$article->Metas->pic.'" /><br /><br /> <strong style="color: #ffffff; font-size: 14px;padding: 6px 18px 6px 18px; background: #3a6ea5;border: 1px solid #3399cc; cursor: pointer;">浏览文件</strong> </p>'; }
说明:必须单独加载一个JS文件:下载
3、调用方法:
{$article.Metas.pic}
二、分类、标签tag加入上传缩略图功能:
如果按文章增加独立缩略图的方法操作,会发现点击浏览文件,无法弹出编辑的上传弹窗,这是因为默认情况下,在分类和标签tag的编辑页面,并没有加载UEditor 的部分JS文件,而是只为文章编辑准备的。
所以,需要手动补充完整UEditor的部分JS文件:
方法:
1、还是include.php挂载:
Add_Filter_Plugin('Filter_Plugin_Tag_Edit_Response','ydnew_tag_seo');//tag自定义字段
2、加入:(注意,这里补充加载了UEditor编辑器的部分JS文件)
function ydnew_tag_seo(){ global $zbp,$tag; echo "<script type=\"text/javascript\" src=\"{$zbp->host}zb_system/script/jquery.tagto.js\"></script>"; echo "<script type=\"text/javascript\" src=\"{$zbp->host}zb_system/script/jquery-ui-timepicker-addon.js\"></script>"; echo "<script type=\"text/javascript\" src=\"{$zbp->host}zb_users/plugin/UEditor/ueditor.config.php\"></script>"; echo "<script type=\"text/javascript\" src=\"{$zbp->host}zb_users/plugin/UEditor/ueditor.all.min.js\"></script>"; echo "<script type=\"text/javascript\" src=\"{$zbp->host}zb_users/theme/FreshGreen/script/lib.upload.js\"></script>"; echo '<p align="left" class="uploadimg">上传TAG图:<input name="meta_tagpic" id="edtTitle" type="text" class="uplod_img" style="width:40%;" value="'.$tag->Metas->tagpic.'" /> <strong style="color: #ffffff; font-size: 14px;padding: 6px 18px 6px 18px; background: #3a6ea5;border: 1px solid #3399cc; cursor: pointer;">浏览文件</strong> </p>'; }
注意:以上所有JS文件请确保路径正确,特别是lib.upload.js文件的路径,必须保证!
3、调用方法:
{$tag.Metas.tagpic}
原文地址:https://www.dpaoz.com/516,本文仅做个人备份
欢迎访问每天进步网:https://meitianjinbu.cn/
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
2018-02-04 HTML实现图片360度循环旋转