下述例子讲述了快速增加挂件的方法，但对系统中的代码未做更改，基本参照image_ad挂件的方法。

第 一步：

了解首页模板结构

首页文 件结构	include hearder.html	包含的头文件，其中包含top logo区域
	<div class=”keyword”>…</div>	搜索栏区域
	<div class=”content”>…</div>	第一个是内容区 域，包含左，右区域，右区域又划分为中和右区块
	<div class=”ad_banner” area=”banner” widget_type=”area”>…</div>	通栏广告区域
	<div class=”content”>…</div>	第二个是下部区 域，同样是左右区域，一般放置分类和产品混排模块
	<div class=”content” area=”bottom_down” widget_type=”area”>…</div>	底部友情链接区域
	include footer.html	包含的底部文件，主要包含版权信息

弄明白template结构后，添加挂件区域就方便多了。 导航下方通栏广告通常是网站的黄金位置，但是默认没有，于是我在<div class=”keyword”>…</div>下方添加一个div区域，如下 <div class=”ad_banner” area=”nav_banner” widget_type=”area”>…</div>

想添加别的区域也很容易，但是要考虑布局是否会破碎，最好是先研究theme下css的设置。

第二步：

进入 商城系统external/widgets目录下，会看见默认已经自带很多插件，将image_ad下载下来，重命名为xxx_ad或者是好记的名称

目录结构	config.html	后台管理模板时设置挂件页面
	widget.html	首页模板中挂件html代码片段页面
	main.widget.php	model源码文件，包含对挂件类 的建模
	widget.info.php	定义挂件的数组信息

修改widget.info.php中挂件信息，数组array[name]要与挂件目录名相同

第三步： 修改main.widget.php文件中class XXX extends BaseWidget 类

• _get_data()函 数是获取图片地址和链接
• parse_config($input)函数是后台设置时返 回图片地址
• _upload_image()是图片上传函数

第四步：

config.html 是后台管理插件时html代码文件，基本不用动，widget.html文件根据自己模板和css设定修改，例如修改div class,是否显示链接等等。

最后，基本上简单的广 告挂件完成，将添加自定义区域的index.html和挂件目录上传。

最 最后,然后在后台编辑模板，将挂件加入模板中新添加的区域中，设置后即可

转自 http://my.oschina.net/u/779687/blog/118419