月光博客

青青子衿, 悠悠我心, 但为君故, 沉吟至今

« 中国网银安全分析:USB Key电信屏蔽eMule了吗 »

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专题



原创文章如转载,请注明:转载自月光博客 [ http://www.williamlong.info/ ]

本文链接地址:http://www.williamlong.info/archives/754.html
  • 文章排行:
  • Zblog 摘要图片效果(引用)
  • 跑调博客
  • &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好几天没写东西主要是因为最近连网都上不了,一个实验接着一个实验没完没了,貌似建筑盒子这些日子也是忙得要命,没法,学校安排的紧.就在前几天写评论广告之“拿人钱财,替人消灾”时Zblog的可视
  • 2007-5-26 19:26:43
  • 5.小仙女
  • http://www.logo-cn.com
  • 月光先生,我按照你的方法,出来的图片很搞笑,你看一下我的这个网站就知道了。对于我们这些几乎不懂代码的人只能比葫芦画瓢,你能不能说的再详细一些呢。谢谢月光先生。我急等您的答复。
  • 2007-1-12 16:59:54
  • 12.visc
  • http://www.chinaham.com.cn/blog/
  • 嘿嘿~我成功实现,看看我的~

    P:还要把template/b_article-multi.html和b_article-single文件中的
    <h5 class="post-tags"><#ZC_MSG138#>: <#template:article_tag#></h5>删除,不然Tags都是以图片形式显示就搞乱页面了~~
  • 2007-1-18 9:04:47
  • 15.Zx.MYS
  • http://ZxMYS.COM
  • 提醒一下诸位,如果是1.7那么请把<#template:article_tag#>改成<#article/firsttagintro#>.gif,然后tag管理设置tag摘要(图片文件名就是 [摘要内容].gif )。
  • 2007-5-8 23:01:47
  • 23.vc
  • 嗯,半角和全角改了,如果要在文章内容显示,是不是加这个,<#template:article_tag#>.

    您好..我不知道这个在哪里加啊?新人请教谢谢了.怎么在内容页里有...谢谢
  • 2008-5-22 15:29:22
  • 24.东东
  • 请问在哪里加什么代码可以像您的那样点击TAG图片后可以连接到相同TAG的文章目录页面啊?
  • 2008-5-22 15:41:46

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

  • 订阅我的博客:订阅我的博客
  • 通过Google订阅本站
  • 通过鲜果订阅本站
  • 通过抓虾订阅本站
  • 通过电子邮件订阅本站

站内搜索


热文排行

最新评论及回复

最近发表

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.

This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.