最近忙着修改陈德馨博客，今天有人问我怎么实现我的博客首页上这种自动图文混排的效果，今天我就详细介绍一下在Z-Blog中实现这种图文混排的方法。

实现这种图文混排的前提条件是，每篇文章有且只能有一个Tag，每个Tag都有一个对应的图片文件，如果没有图片，可以使用一个1像素的GIF图片来代替。

有了这些之后，打开Z-Blog的主题文件夹，编辑TEMPLATE/b_article_tag.html文件，修改为如下内容：

<img src="<#ZC_BLOG_HOST#>logo/<#article/tag/intro#>.gif" alt="<#article/tag/name#>" class="thumb" />

如果想在图片上增加链接，修改上面的内容，加入超级连接即可。

修改主题文件夹TEMPLATE/b_article-multi.html文件，将原来的：

<div class="post-body"><#article/intro#></div>

修改为：

<div class="post-body"><#template:article_tag#><#article/intro#></div>

进入Tags管理，给每个Tags增加一个摘要，内容为一个英文单词，用于图片文章名。

然后，在Blog的根下建立一个名为logo的目录。将上面命名的文件名增加.gif后缀后复制到这个目录下。

修改STYLE目录下的CSS文件，增加如下内容：

div.post-body img.thumb {
float: right;
margin: 4px 4px 4px 4px;
padding: 0px;
border: 0px;
padding: 0px;
max-width: 500px;
max-height:500px;
overflow:hidden;
clear:both;
}

以上的CSS代码在IE和FireFox下测试均显示正常。如果使用表格方式插入图片可能会引起FireFox不兼容的现象。

来源：陈德馨博客（微信/QQ号：35435164），转载请保留出处和链接！

地址：https://www.chendexin.com/archives/31.html