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

    您好..我不知道这个在哪里加啊?新人请教谢谢了.怎么在内容页里有...谢谢
  • 2008/5/22 15:29:22   支持(13)反对(8) 回复
  • 6.bus
  • 嗯,半角和全角改了,如果要在文章内容显示,是不是加这个,<#template:article_tag#>.
  • 2007/1/12 23:37:30   支持(10)反对(7) 回复
  • 7.visc
  • 嘿嘿~我成功实现,看看我的~

    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   支持(11)反对(8) 回复
  • 8.prelead
  • 不错 不错 加分
    就是有个遗憾 使用该功能 不能加多个TAG 建议作者 修改一下 可以添加多个TAG的前提下 优先使用其中一个TAG 做图片标记

    观望中……
  • 2007/5/25 17:09:24   支持(13)反对(10) 回复
  • 9.heyi
  • <#template:article_tag#>
    似乎还得在b_article-single.html里面加把。
  • 2007/7/9 15:40:41   支持(15)反对(12) 回复
  • 10.东东
  • 请问在哪里加什么代码可以像您的那样点击TAG图片后可以连接到相同TAG的文章目录页面啊?
  • 2008/5/22 15:41:46   支持(14)反对(11) 回复
  • 11.猎奇博客
  • 这个修改真不错,给zblog增加了很多的色彩。
    我根据这个修改的原理和思路,也制作了一个以分类为标志的分类方案,欢迎大家试试看《以category分类为标志的自动图文混排的版式效果》
  • 2009/1/19 20:10:34   支持(12)反对(9) 回复
  • 13.williamlong
  • 不好意思,我原文中排版的时候误把半角的冒号替换为全角的冒号了,请大家将全角修改为半角即可。
  • 2007/1/12 20:27:59   支持(18)反对(16) 回复
  • 15.小仙女
  • 月光,为什么我下面会出现两个图片呢。郁闷。上个问题解决了,多了个空格。这个是怎么回事呢??
  • 2007/1/13 10:37:11   支持(10)反对(9) 回复
  • 16.williamlong
  • 你要修改一下模版文件,把原有的那个tag删除掉。
  • 2007/1/13 10:59:48   支持(12)反对(11) 回复
  • 17.prelead
  • 12楼的兄弟 visc 其实不用那么麻烦删 只要在CSS里加入
    body.multi div.post .post-tags{
    display:none;
    }
    就行了 以免以后还要用到TAGS 再加 太麻烦了 呵呵
    看看我的吧
  • 2007/5/28 17:28:59   支持(13)反对(12) 回复
  • 18.园子
  • 呵呵

    我用的是WP
    寻找新的方法~
  • 2009/4/20 9:41:07   支持(12)反对(11) 回复
  • 19.googlefans
  • 有创意,有文采,有技术,我真服得你很要紧。
  • 2007/1/12 8:36:57   支持(10)反对(10) 回复
  • 20.周奔驰
  • 月老大,怎么给博客加上像你这样的Google广告呢,我也想加!
  • 2007/2/12 19:51:57   支持(13)反对(13) 回复
  • 23.一叶
  • 月光,我照着做了,但是没有显示啊,难道不适用于1.7版本的?另外,我的博客站点统计不工作,老是现实浏览为0是怎么回事啊。
  • 2007/3/23 9:47:27   支持(12)反对(13) 回复
  • 24.Zx.MYS
  • 提醒一下诸位,如果是1.7那么请把<#template:article_tag#>改成<#article/firsttagintro#>.gif,然后tag管理设置tag摘要(图片文件名就是 [摘要内容].gif )。
  • 2007/5/8 23:01:47   支持(8)反对(9) 回复
  • 25.在1.8上有错误啊
  • 我在1.8上试了下,发现显示错误,在文章页图标显示在下面的tags里,十分影响美观,怎么和你一样啊
  • 2008/4/5 1:59:40   支持(10)反对(12) 回复
  • 26.w156
  • 这个好,转载了,不会引用,所以就转载了.~!~
  • 2008/9/22 9:36:00   支持(10)反对(13) 回复
  • 27.bus
  • <#template:article_tag#>
    我改了,可是没有图片而是显示了这个标签,不知道什么原因啊
    版本之间有区别吗?
  • 2007/1/12 18:57:47   支持(6)反对(10) 回复
  • 28.菠萝莉
  • 感觉效果很好,有空也试着玩玩,不大熟啊,怕玩塌了。
  • 2007/7/27 16:17:35   支持(14)反对(18) 回复
  • 30.成也散人
  • 月光,不用这么麻烦的吧?用USB标签[IMG_RIGHT]upload/[/IMG_RIGHT]不就可以了吗?
  • 2007/1/12 0:10:35   支持(8)反对(14) 回复

发表评论:

 请勿发送垃圾信息、广告、推广信息或链接,这样的信息将会被直接删除。

订阅博客

  • 订阅我的博客:订阅我的博客
  • 关注新浪微博:关注新浪微博
  • 关注腾讯微博:关注腾讯微博
  • 关注认证空间:关注QQ空间
  • 通过电子邮件订阅
  • 通过QQ邮件订阅

站内搜索

热文排行


月度排行

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享. 转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议.
This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.