Z-BlogPHP实现摘要图文混排效果的方法

Z-BlogPHP实现摘要图文混排效果的方法-飞狗网-fegou.cn

zblog php实现图文混排很简单,只需要下载个带缩略图的模板就可以了。但是要如何实现像飞狗网fegou.cn这样的图文混排效果的?这种图文混排效果来自著名的月光博客,但是只有asp版的方法,没有PHP的实现代码。而两者的不同还是很明显的。

在zblog的官方论坛提问,没有得到想要的答案,只有自己学习研究试错测试了。最后得以大功告成!

实现这种版式的前提条件是,每篇文章有且只能有一个Tag,每个Tag都有一个对应的图片文件,如果没有图片,可以使用一个1像素的GIF图片来代替,命名为Tag名.gif上传到根目录/logo文件夹里。

然后,

第一步,在模板文件夹新建文件tags.php,该文件的模板选择改search.php文件,把里面的搜索段代码用下面的代码替换掉:



{foreach $tags as $tag}

<li><a href="{$tag.Url}">{$tag.Name}<span class="tag-count"> ({$tag.Count})</span></a></li>

{/foreach}

将新制作的tags.php模板文件上传到template目录;

第二步,修改模板文件post-multi.php,在需要加上缩略图的文章位置加上以下代码:

{foreach $article.Tags as $tag}

      <a href="{$article.Url}" title="{$article.Title}-fegou.cn" target="_blank" class="list-tu"><img src="{$host}logo/{$tag.Intro}.gif" alt="{$article.Title}-fegou.cn" title="{$article.Title}"></a> 

 {/foreach}

上传模板文件post-multi.php,同时,修改其他需要显示缩略图图文混排的模板文件位置,比如post-istop.php等等。

第三步,修改tag设置,给每个tag加上摘要说明,内容为一个英文单词,用于图片文章名。

第四步,修改css文件,在适当位置加上如下代码:

增加如下内容:

    .tagsimg {
     float: right;
     margin: 4px 4px 4px 4px;
     padding: 0px;
     border: 0px;
     padding: 0px;
     max-width: 500px;
     max-height:500px;
     overflow:hidden;
     clear:both;
    }

大功告成,跟新模板文件。

如果有问题,可以再次留言,fegou.cn尽量回答您的问题。


添加回复:

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