Z-Blog实现摘要图文混排效果的方法
作者：williamlong 来源：月光博客 发布时间：2009-02-23 13:54:00
标签：z-blog,图文,摘要,tag
有些使用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不兼容的现象。
最后，重建所有文件。
这时候，你就可以得到和我的博客一样的显示效果。
0
投稿猜你喜欢
一、Pycharm安装Django框架二、新建Django项目1、manage.py是个管理角色，拥有的功能包括：(1)创建app: pyt- 一 Protobuf介绍Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标
- 前言最近在试着研究飞浆平台的许多功能，看到了许多有意思的功能。其中可以将照片美化以及年龄调整这个功能让我想到了之前抖音的一个功能，所以特别感
- 一、需求来源：如果用户在文本框中填了一段<script>alert(xxx);</script>代码，然后我们还保存
- 前言使用anaconda 命令安装pytorch包的问题，以下给出解决办法。状况描述：由于是第一次接触安装，看了很多篇文章，也遇到了一些坑，
- picker-view 相关文章：微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch微信小
- 之前一直傻傻分不清（n,1）和（n,）之间的区别，这里做一下总结，希望度过此文章的小伙伴都能明白。例如如果我们创建一个包含10个整型数的数组
- 如果用户输入的是直接插入到一个SQL语句中的查询，应用程序会很容易受到SQL注入，例如下面的例子:$unsafe_variable = $_
- 上一篇：微软建议的ASP性能优化28条守则(7)技巧 22：尽可能使用 Server.Transfer 代替 Response.Redire
- 错误出现：导入数据时出现“SqlDateTime 溢出。必须介于 1/1/1753 12:00:00 AM 和 12/31/9999 11:
- 有些时候我在们需要的用正则提取出html中某一个部分的文字内容，如图:获取dd部分的html文档，我们要通过它的一个属性去确定他的位置才可以
- 索引 经常要查询的语句，则给它建一个索引 表连接 select T_Oders as o join T_Customers as C on
- 先来看看架构，如下图：部署1.修改hosts在所有的服务器中执行相同的操作。vim /etc/hosts192.168.137.10 mas
- 面试mysqldba的时候遇到一个题：描述msyql replication 机制的实现原理，如何在不停掉mysql主库的情况下，恢复数据不
- 一直以来都是用python脚本，执行的时候就是在终端直接命令执行，或者直接输入代码执行，最近为了方便他人使用，想做个界面，可以通过里面的控件
- 今天想围绕“产品交互设计”说说一些我们的想法，一说到产品设计，我想在坐的各位脑海里肯定联想到了很多表单设计、导航设计、界面布局等等，但是今天
- 聊一聊Python与网络爬虫。1、爬虫的定义爬虫：自动抓取互联网数据的程序。2、爬虫的主要框架爬虫程序的主要框架如上图所示，爬虫调度端通过U
- 本文实例为大家分享了vuejs实现下拉框菜单选择的具体代码，供大家参考，具体内容如下方法一：<script type="te
- 本文介绍python如何进行截图保存的几种方法，在测试过程中，是有必要截图，特别是遇到错误的时候进行截图。结合Python其它模块如time
- 本文研究的主要是Django开发中的signal 的相关内容，具体如下。前言在web开发中， 你可能会遇到下面这种场景:在用户完成某个操作后
