
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尽量回答您的问题。