13
2018
12

zblog摘要在有图片和无图片分别实现不同样式效果

思路:将摘要文章的模板post-multi.php分拆成两个文件就可以了,如:post-multi-t.php(有图)post-multi-w.php(无图),然后通过判断就可以分别显示有无图片两种情况的效果了。

例如图下:

方法如下:

1.新建两个文件post-multi-t.php和post-multi-w.php。

2.原模板post-multi.php的代码改为判断语句:如:

{php}
              $pattern="/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png]))[\'|\"].*?[\/]?>/";
              $content = $article->Content;
              preg_match_all($pattern,$content,$matchContent);
{/php}
            {if  isset($matchContent[1][0])}
              {template:post-multi-t}
              {else}
{template:post-multi-w}
              {/if}

3.post-multi-t.php和post-multi-w.php的内容改为分别对应的有图无图的模板就可以了。如:

(1)post-multi-t.php:(有图)

<dl id="wen">
<dd><h3><a href="{$article.Url}" title="{$article.Title}">{$article.Title}</a></h3>
 
 <div class="pic">
              <a href="{$article.Url}" title="{$article.Title}"><img src="{$matchContent[1][0];}" style="width:175px; 
              height:128px;" /></a>
          </div>
          <div class="zynr">
          {php}
          $description = preg_replace('/[\r\n\s]+/', '', trim(SubStrUTF8(TransferHTML($article->Content,'[nohtml]'),100)).'...');
          {/php}
          {$description}
          </div>  
          <div class="clear"></div>
<div class="wen-bottom">发布: {$article.Time('Y-m-d')} 分类: {$article.Category.Name} 阅读{$article.ViewNums} 次 评论: {$article.CommNums}次 </div></dd>
</dl>

(2)post-multi-w.php:(无图)

<dl id="wen">
<dd><h3><a href="{$article.Url}" title="{$article.Title}">{$article.Title}</a></h3>
          <div class="zynr">
          {php}
          $description = preg_replace('/[\r\n\s]+/', '', trim(SubStrUTF8(TransferHTML($article->Content,'[nohtml]'),100)).'...');
          {/php}
          {$description}
          </div>  
          <div class="clear"></div>
<div class="wen-bottom">发布: {$article.Time('Y-m-d')} 分类: {$article.Category.Name} 阅读{$article.ViewNums} 次 评论: {$article.CommNums}次 </div></dd>
</dl>

4.保持完成后就可以刷新缓存,就可以了。

5.祝你成功。

原文链接:https://www.qiquanji.com/post/7065.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。