【Java精品源码栏目提醒】:网学会员Java精品源码为您提供JavaShop模板制作手册 - 其它资料参考,解决您在JavaShop模板制作手册 - 其它资料学习中工作中的难题,参考学习。
JavaShop 模板制作手册 Version: 1.0 Public date: 2010-06-21 All right reserved Javamall.com.cn 第一章 模板制作指南1 模板目录规范在开始制作之前,先来了解下 JavaShoop 的模板路径和构成模板的文件。
模板路径是 JavaShop 安装目录/themes/进入到某一套模板目录中后,就可以看到该模板的目录和文件结构了:1. 可重用部分,文件夹中存放着模板各页面的公用部分,扩展名为 html,一般是模板的头部和尾部,这 两个部分在整个站点中都是相同的,支持 freemarker 语法2. 边框目录,扩展名为 html,存放着边框文件,边框是版块的呈现样式,相当于版块的模板,支持 freemarker 语法3. images 目录,存放所有图片文件、css 文件等4. .html,框架文件,扩展名为 html,决定了页面的布局和版块可摆放的区域,是页面的骨架5. preview.jpg ,模板预览6. widgets.xml 是整个模板中最重要的部分,所有模板的配置信息都是存在这个 xml 中的,包括板块的位 置、配置信息,边框的信息等等。
2 划分页面结构,建立框架 首页对于一个网站来说比较复杂,内页的话相对简单,内页都可以用一个框架 default.html 来表示。
以首页为例,如图,这是一张做好了的 psd 页面,现在我们要把它制作成模板。
这个过程其实和一般页面的制作过程是一样的。
先将页面做大致的划分,搭建框架,剩下的部分通过配置 widges.xml 来完成。
我们将页面划分如下: 页面的头部和尾部都是公用的,所以将它们分离出去,作为独立的 html 引用到各个框架页面中。
以上面这个模板来说,页面中部布局分为左中右三栏,各栏内部是一些小的功能板块,这些板块的内容和功能是预置的,通过编辑 widgets.xml 来配置。
也就是说,JavaShop 模板的制作实际上较少涉及这些功能板块的内容,更多关心的是框架和边框的表现样式。
实际制作过程中我们可以将这板块内容以低保真的形式,如图片或文字占位,留待以后细调。
3建立框架,划分板块区 首页框架对应的是 index.html,代码的写法和平常的 html 文件是相同的。
框架同时也支持 freemarker 语法。
如上图的 index.html
源码是: widget_1 widget_2 widget_3 widget_4 代码中可以看到,框架的
源码很简单,只做布局,头尾都做独立的 html 引用。
4其他页面的框架 除了首页外,其他页面都可以用默认框架 default.html,默认框架输出业务区,承担所有业务流程的功 能,也就是说只要一个默认框架 default.html 就能表示所有功能内页,进入不同的功能内页时,业务区输出 不同的预置内容。
业务区在 html 代码中的写法是widget_main,default.html 必须有这个标签,参见【挂 件配置说明】。
当然某个功能页也能新建一个框架,框架文件名是系统预置好的,与某个功能页面相对应,只要新建 出来一个框架,就自动应用在这个页面上,不同的框架可以带来不同的布局和板块配置。
会员中心和购物车页面需要更大的宽度,因此他们的框架一般与默认框架不同,因此模板一般需要 4 个框架页,首页 index.html、默认页 defaut.html、会员中心页 member.html、购物车 cart.html。
5制作边框资源 框架和板块区建立完成之后,就可以在后台可视编辑配置板块了。
但在这之前还需要将各个边框做好。
边框是包裹板块的一段 html 代码,定义了板块的风格,选用不同的边框能改变板块的风格。
如下图,一个文章板块的边框:边框文件位于 borders 目录下,和框架一样也是 html 文件,也支持 freemarker 语法。
边框的标签有如下几个: 1. title,标题,可在 widgets.xml 中配置 2. body,板块内容输出的部分 3. widgetid 挂件 id,在 widgets.xml 中配置边框代码的例子:titlebody这段代码的图示: 上面这段代码中有几点可以注意下,border1,一套模板会有多个边框,不同的边框用不同的 css 来定义。
一般一个边框是由头中尾三部分组成的,所以结构上也是如此体现。
如果边框内有复杂布局,需要多个板块来实现,那么这时就需要把最外层的内容样式写在框架页中, 内层的板块再用另外的边框。
6配置挂件参数,细调板块内部样式 框架页,边框的资源完成后,余下的制作就是在 widgets.xml 中编辑配置挂件。
板块的 html 内容是预置的,现有挂件的种类和使用可以参考【挂件详细说明】章节。
常用的板块有商品、商品分类、文章、搜索、广告、菜单等等,通过对这些板块的灵活应用,可以满足一个在线购物网站的基本功能。
模板制作需要制作者们对软件内置的板块有一个大致的了解。
板块的 html 结构可以通过原有模板中存在的模板,用 firefox 浏览器的 firebug 插件查看,如图: 第二章 挂件配置说明1 widgets.xmlwidgets.xml 由多个 page 结点和其子结点 widget 结点构成,描述了每个页面的挂件配置情况,如: visible 商品分类 border3 goods_cat 其它挂件的定义。
。
。
其它页面的定义。
。
。
2page 结点说明widgets.xml 中可以有多个 page 结点,分别对应模板中的框架文件。
page 结点有一个唯一的属性是 id,以“/”开头,和模板目录中的框架页面名称对应。
page 结点中有两个 page 较为特殊:id 分别为“common”和 id 为“/default.html”1. 其中 id 为“common”的结点中配置的挂件在每个页面中都可以使用,一般用于 header 和 footer2. id 为“/default.html”的 page 结点, 一些页面布局相同功能模块都使用“default.html”这个框架页, 此结点中的 widget 子结点 id 功能模块的 url,在一般的网店中不需要修改这个结点的配置。
参见【附录/default.html】结点配置。
3widget 结点说明示例: articlecat visible border3 新闻中心 2widget 结点参数说明属性/结点 说明 必须id 属性 一般为数字,和框架页面中的widget_id对应 必须type 子节点 对应挂件类 id,参见【挂件详细说明】 必须border 子节点 指定挂件使用的边框,对应边框文件的名称(不带.html),不指定边 必须 框指定为 none,参见【建立边框资源】。
bordertitle 子节点 定义边框的标标题,即输出在边框文件中的title变量 当指定边框 时为必须custom_page 自定义挂件页面路径 非必须 如:articlelist 则会显示当前模板根下的 articlelist.html 的内容,在这个 html 中可以 使用 freemarker 语法,其中可以使用的数据视不同的挂件而定。
folder 自定义挂件页面所在路径,如果不填则为当前模板所在文件夹 非必须 v2.1.0 新增其它结点 【挂件详细说明】 根据不同挂件有不同定义, 。
第三章挂件详细说明1.1. 文本区域挂件显示某篇文章的详细1.1.1. 挂件 idpartZone1.1.2. 参数:参数 说明article_id 文章的 id1.2. 图片挂件根据路径显示图片1.2.1. 挂件 idimageWidget1.2.2. 参数:参数 说明src 图片的路径,以当前模板为根的相对路径1.3. 菜单挂件1.3.1. 挂件 idshop_menumenu推荐使用1.3.2. 参数参数 说明isDropDown on:显示下拉效果 off:不显示下拉效果 默认为 off1.3.3. 示例 shop_menu none on1.3.4. 效果1.4. 网站头挂件1.4.1. 挂件 idheader1.4.2. 说明 header 挂件负责 间的信息输出,如 titlekeywords 等,这些信息可在后台,我的站点中进行设置。
1.4.3. 参数:无1.5. 留言板挂件1.5.1. 挂件 idguestbook1.5.2. 参数:参数 说明 是否必须pagesize 分页大小 否 默认为 10message 留言成功提示信息 否 “ 默认为: 留言成功,稍候我们会对您的留言 回复。
”adminname 管理员名称 否 默认为“管理员” 将显示在列表的 “某某回复”1.5.3. 示例 guestbook 律师1.5.4. 自定义页面提供的数据主题列表变量:subject属性 说明title 标题content 留言内容username 用户名sex 性别0 女 1 男addtime 留言时间email 邮件tel 电话area 地区replyList 回复列表,包含 content 属性和 addtime 属性留言输入表单说明字段 说明title 标题content 留言内容username 用户名sex 性别0 女 1 男email 邮件tel 电话注:请参见: /eop/com/enation/app/base/widget/guestbook/GuestBookWidget.html1.6. 商品列表挂件1.6.1. 挂件 idgoods_list1.6.2. 参数:参数 说明setting 挂件具体参数 json 串。
参见【setting json 字串】term 商品筛选条件 当 setting.typedefault时此结点生效 参见【term json 字串参数】tabs 当 setting.typemorediv时此结点生效 参见【tab json 数组字口中参数】Setting JSON 字串参数:参数 说明type 可选值: default 或 morediv(多层选项卡式) 默认值: defaultshowGoodsDesc 是否显示商品描述,可选值: on:显示 off:不显示 默认值:onshowGoodsImg 是否显示商品图片,可选值: on:显示 off:不显示 默认值:onshowGoodsName 是否显示商品名称 ,可选值: on:显示 off:不显示 默认值:ongoodsImgPosition 商品图片位置可选值: topbottomleftrightcenter 默认值:topgoodsNum 显示商品数 默认值:10columnnum 显示列数 默认值:4thumbnail_pic_width 商品图片缩略图宽 如果未指定此参数,将使用系统设置中商品 中缩略图的设置thumbnail_pic_height 商品图片缩略图高 如果未指定此参数,将使用系统设置中商品 中缩略图的设置 showTitleImg 是否显示分类图片,可选值: on:显示 off:不显示 默认值:offshowTitle 是否显示 分类描述,可选值: on:显示 off:不显示 默认值:offtitleImgHref 分类图片连接titleImgSrc 分类图片地址titleImgPosition 分类图片位置可选值: topbottomleftrightcenter 默认值:lefttitleImgAlt 分类图片提示titleDesc 分类描述titleImgWidth 分类图片宽,支持100px 和80 的方式 默认值:100changeEffect tab 事件方式可选值: 0:mouseover 1:click 默认值:1Term JSON 字串参数参数 说明tagid 商品标签 id 串,号分隔,如: tagid:123catid 商品分类 id 串,号分隔,如: catid:123brandid 品牌 id 串,号分隔,如: brandid:123typeid 类型值,如:typeid:1minprice 最大价格maxprice 最小价格keyword 关键字order 排序方式: 0默认 1按发布时间 新到旧 2按发布时间 旧到新 3按价格 从高到低 4按价格 从低到高 5访问次数 7周购买次数Tab Json 数组字串参数参数 说明title 选项卡标题term 此选项卡商品列表的筛选条件,参见 Term JSON 参数1.6.3. 示例示例一:简单列表:需求:类别 1,2 的热卖商品列表,图片在中间效果配置: visible 热卖商品 border1 goods_list tagid:1catid:12 type:defaultgoodsImgPosition:center示例二:多层选项卡式效果配置 visible 打折促销 border3 goods_list title:长裙term:catid:2 title:美丽女裤term:catid:3 type:moredivcolumnnum:4goodsNum:10goodsImgPosition:topchangeEffect:11.7. 商品分类挂件1.7.1. 挂件 idgoods_cat1.7.2. 参数:参数 说明showimg on:显示类别图片 off:不显示类别图片 默认为 off1.7.3. 示例 商品分类 border5 goods_cat1.7.4. 效果1.8. 商品详细挂件1.8.1. 挂件 idgoods_detail1.8.2. 说明商品详细挂件是由一些挂件共同组成的,如下图所示:默认的组合挂件列表:goods_gallery 商品相册goods_props 商品属性goods_spec 商品规格goods_adjunct 商品配件goods_intro 商品详细描述goods_complex 相关商品goods_params 商品详细参数goods_ask 商品咨询goods_discuss 商品评论商品挂件展示效果如上图所示,一般很少有对这个效果做大的改动,如果有的话您需要通地指定 )来指定为您的新页面如“goods.html”custom_page 属性(参见【挂件配置说明-widget 结点说明】 ,然后在个“goods.html”中您可以照常使用上述组合挂件中提供的数据。
具体参见挂件实现,下表给出了商品详细挂件相关的实现类:goods_gallery com.enation.javashop.widget.gallery.GoodsGalleryWidgetgoods_props com.enation.javashop.widget.GoodsPropsWidgetgoods_spec com.enation.javashop.widget.spec.ShopexSpecWidgetgoods_adjunct com.enation.javashop.widget.adjunct.GoodsAdjunctWidget