-
最近忙着修改陈德馨博客,今天有人问我怎么实现我的博客首页上这种自动图文混排的效果,今天我就详细介绍一下在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实现摘要图文混排效果的方法
1620人参与 |分类: 站长百科|时间: 2012年02月13日
相关文章
- 2020-04-15zblog免登录购买插件 zblog免登陆支付插件
- 2019-11-27Z-Blog用户中心(百搭)插件登录过后无法退出问题解决
- 2019-11-22Z-BlogPHP好运锦鲤主题操作教程
- 2019-11-11卢松松博客模板zblogphp版全新升级了
- 2019-11-06Z-Blog利用ue编辑器实现独立图片上传组件(免后端开发)
- 2019-08-16Z-Blog PHP的用户组分别是什么?权限有哪些?
- 2019-08-10Z-Blog验证码改为纯数字的方法
- 2019-05-06Z-Blog使用腾讯云CDN并且开启Https的配置教程
- 2019-03-05Z-BlogPHP删除分类后导致分类ID不连续的解决方法
- 2019-02-21Z-Blog PHP判断用户是否登录和级别区分的方法
评论专区德信商城