2年前第一次在cnbeta看到这类样式的时候.非常喜欢
对自己说.如果自己写博客,一定也要用这类样式..呵呵.现在找到了具体实现方法
实现这种版式的前提条件是，每篇文章有且只能有一个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后缀后复制到这个目录下。
修改b_article-single.html中的:
<div class="post-body"><#article/content#></div>
改为:
<div class="post-body"><a title="<#article/firsttagintro#>" href="catalog.asp?tags=<#article/firsttagintro#>"><img src="<#ZC_BLOG_HOST#>tags/<#article/firsttagintro#>.gif" class="thumb" /> </a>
<#article/content#></div>
上面这个修改.是让日志里的tags显示也如首页一样的
修改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不兼容的现象。
最后，重建所有文件。
做完以上步骤后,你会发现摘要和正文所有调用TAG的地方全部变成了带超链接图片的形式,需要将
b_article-multi.html和b_article-single.html中
<h5 class="post-tags"><#ZC_MSG138#>: <#template:article_tag#></h5>
删除,而且每一篇文章最好设一个TAG.
这时候，你就可以得到和我的博客一样的显示效果。