有些使用Z-Blog的用户询问我,怎么实现我的月光博客首页上这种自动图文混排的版式效果,今天我就详细介绍一下在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不兼容的现象。

最后,重建所有文件。

注:本文转自月光博客http://www.williamlong.info/archives/754.html

目前有2 条留言

  1. 2009年08月07日 16:48 zhukun   |  引用  |  #1     

    又换主题了啊,呵呵,过来看看

    ifu25 于 2009-8-7 16:49:44 回复

    这个主题我比较喜欢.嘎嘎.

  2. 2011年07月13日 18:43 奢侈品   |  引用  |  #2     

    实现这种版式的前提条件是,每篇文章有且只能有一个Tag,每个Tag都有一个对应的图片文件,如果没有图片,可以使用一个1像素的GIF图片来代替。
    本文来源:[微酷博客] 原文地址:http://www.vcoo.me/show/1202.html

    ifu25 于 2011-7-16 18:14:03 回复

    明显的垃圾评论,复制我的文章里的内容直接评论。这是我在论坛里常用的手段。

发表评论

/ 快捷键:Ctrl+Enter
加载中……