« 联系方式李彦宏说:百度小声 »

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;
    }

  最后,重建所有文件。

       这样正文和tags都出现了图片,删除tags出现图片,则把template/b_article-multi.html文件中的
<h5 class="post-tags"><#ZC_MSG138#>: <#template:article_tag#></h5>删除,这样就只有正文有图片了。

  • 相关文章:

发表评论:

sysku.com欢迎您参与讨论;本站言论必须符合当地法律。

日历

评论回复

最近发表

sysku.com森库资讯

遵循创作共用版权协议3.0,可创作演绎、不限形式传播,要求标注版权标识、不对他者有所伤害。森库资讯 SysKu.com 蜀ICP备05021010号