月光博客 » 编程开发 » Z-Blog实现摘要图文混排效果的方法

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

  有些使用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不兼容的现象。

  最后,重建所有文件。

  这时候,你就可以得到和我的博客一样的显示效果。

  更多关于Z-Blog的相关技巧和下载,请参见我的Z-Blog专题。

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

顶一下 ▲()   踩一下 ▼()

相关文章

  1. 1
    williamlong   说道:
    是的,加上去就会有的。
    支持(17反对(9回复
  1. 2
    陈华   说道:
    很不错,但是只用一个标签好像不太舒服
    支持(13反对(8回复
  1. 3
    小仙女   说道:
    月光先生,我按照你的方法,出来的图片很搞笑,你看一下我的这个网站就知道了。对于我们这些几乎不懂代码的人只能比葫芦画瓢,你能不能说的再详细一些呢。谢谢月光先生。我急等您的答复。
    支持(17反对(12回复
  1. 4
    hzhjun   说道:
    这个方法是可以实现图片的显示,但个人感觉有些弊大于利;我只是想在首页显示摘要的图片,内容页照旧,难道就没有更好的方法来实现这个功能吗?
    hzhjun 于 2009-11-4 16:53:28 回复
    非常感谢月光这套方法给俺的思路,俺可以利用新版提供的<#article/firsttagintro#>首标签摘要来命名图片名称就可以了,不用修改b_article_tag.html原有内容,而且可以多标签共存,内容页也可选择是否显示该图片。
    支持(18反对(13回复
  1. 5
    vc   说道:
    嗯,半角和全角改了,如果要在文章内容显示,是不是加这个,<#template:article_tag#>.

    您好..我不知道这个在哪里加啊?新人请教谢谢了.怎么在内容页里有...谢谢
    支持(13反对(9回复

发表留言


点击更换验证码