模板制作

相信很多同学都会迫不及待的翻开九阳神功的这一篇。

非也非也,九阳神功重在内功修为,而非花拳绣腿的一招半式。

要想将此篇参悟透彻,须沉心静气,细心钻研!

按流程制作模板

前面已经提到过了模板制作流程,这里,我们将一些问题细化,辅以实例制作,让制作来个更快更直接!

嗯,这张首页图还是比较有代表性的!

建立模板文件夹目录首先建立好模板文件夹还有一系列相关文件,如theme.xml、info.xml、block文件夹、border文件夹、images文件夹(其实呢,最简单的方法是:从您系统中的已有模板复制一份过来,然后诸如修改模板id、模板名称、版本什么的您就可以轻松搞定了!)

静态页面嵌入shopex系统使用HTML布局方式,将模板分为以下几个部分。每个部分内的元素无需细化,其中含有功能性以及广告、图片、文字等元素,均可使用挂件代替:
在这里还需要提醒大家,需要多熟悉ShopEx48系列的各种挂件,这样在制作模板的时候,您会有更多的选择空间!这样一个index.html就诞生了!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<{header}>
<link rel="stylesheet" type="text/css" href="images/css.css" />
</head>
<body>
<!--   头部开始  -->
<div class="header">
	<div class="logo"><{widgets id="logo"}></div>
	<div class="toplink"><{widgets id="toplink"}</div>
	<div class="toptel"><{widgets id="toptel"}</div>
</div>

<!--  主要内容区域    -->
<div class="main clearfix">
	<div class="span-5"><{widgets id="left_sidebar"}</div>
	<div class="span-13"><{widgets id="main"}</div>
	<div class="span-6"><{widgets id="right_sidebar"}</div>
</div>
<!--  主要内容区域 结束    -->

<!--  底部开始  -->
<div class="footer">
	<div class="footlinks"><{widgets id="footlinks"}></div>
	<{footer}>
</div>
</body>
</html>
  • 头部head内必须有<{header}>标签,建议紧随"<header>"之后
  • 尾部必须有<{footer}>标签,位置放在"</body>"之前
  • 注意空板块区域的写法<{widgets id="****"}>
  • 留意为什么用span-5、span-13、和clearfix这几个class

<{header}>和<{footer}>这2个标签用于输出ShopEx程序附带的资源,如果您忘记添加,内页的部分功能会出现错误,也有可能导致可视化编辑无法正常编辑。

ShopEx系统会自动识别每一个div里的"<{widgets id="****"}>",其实这些widgets代表着在后台可视化编辑里的空板块区域。widgets里的id无实际含义,ShopEx仅以id记录板块的参数和数据,还是建议语义化命名id,注意id绝对不能重复;而该空板块区域的大小,可以由父层级的div决定。

在一个空板块区域里,我们可以添加一个或多个挂件,在这里,建议大家在一个widgets里仅添加相同宽度的挂件,尽量减少因宽度而导致出错的可能性。

span-5、span-13、clearfix这几个class是ShopEx Css Framework中定义css的一部分,在ShopEz48.4和ShopEx48.5的前台页面均会渲染该样式表(该样式表位置为:static/framework.css),可以有效的利用系统已有的样式,减少自身css文件的大小,提前页面前端性能。

HTML制作完成后,因为页面的头部和尾部都是公用的,所以我们将它们分离出去,作为独立的html引用到各个框架页面中。这里我们用到类似普通asp文件引用的方式,加入smarty标签:

<{require file="block/header.html"}>
这时只需要在block里建立好对应文件,将对应代码复制进header.html即可;footer.html同理!

我们来看改造后的index.html

<{require file="block/header.html"}>
<!--  主要内容区域    -->
<div class="main clearfix">
	<div class="span-5"><{widgets id="left_sidebar"}</div>
	<div class="span-13"><{widgets id="main"}</div>
	<div class="span-6"><{widgets id="right_sidebar"}</div>
</div>
<!--  主要内容区域 结束    -->
<{require file="block/footer.html"}>

对比框架划分前后的代码:


添加挂件预览效果,并完善样式修改

用挂件这一特殊的模板制作方式,使shopex与其他程序的模板制作上有着根本的不同。

通俗的理解,一个空板块区域就是一个USB接口一样,USB接口接鼠标、接键盘、接移动硬盘等等...挂件也是一样,你可以添加系统自带的一些挂件,也可以添加自己制作的挂件,而在新的Ec-store系统中,还将开放传说中的"模板级挂件"(即挂件存放于模板目录,而非plugins目录)

因为上一步在HTML中添加的板块(widget)信息,在这一步骤中可将它转化为各种功能类型(如商品列表,文章列表,商品分类,导航菜单、各种形式广告、以及注册登录等等,甚至包括静态HTML都可以通过这一步加入进去),免去了修改代码、熟悉调用规则、和后期修改的大量宝贵时间。


添加挂件后,需要自行调整样式。

在这里ShopEx程序设计的非常人性化,将前台页面模板级CSS样式优先级设置到了最高,将系统默认css样式设到了最低。

然后用到firebug或者google的开发人员调试工具,通过CSS覆盖法则,来实现设计稿的实际效果。

根据情况制作模板的边框和挂件

这里的详细篇章,下文会详细介绍。

制作内页

除了首页外,其他页面都可以用默认框架default.html,默认框架输出业务区,承担所有业务流程的功能,也就是说只要一个默认框架 default.html就能表示所有功能内页,进入不同的功能内页时,业务区输出不同的预置内容。default.html文件放置在模板目录下,与 index.html相同。

这里忘记说了,在ShopEx48系列中,在模板文件目录里的部分规则命名的文件,系统会自动识别成对应的页面模板文件,对应表格如下:

文件名称页面名称
index.html首页模板
gallery.html列表页模板
product.html商品详细页模板
cart.html购物车页模板
gift.html赠品页模板
search.html搜索页模板
page.html站点栏目单独页模板
member.html会员中心页模板
brandlist.html品牌列表页模板
brand.html品牌展示页模板
article.html文章列表页
default.html默认页模板

可能细心的人士会发现...怎么我的模板里,很多页面都没有?

这样会不会有问题?

没有关系,ShopEx的模板引擎非常强大,只要有default.html,系统在访问到没有模板的页面时,会自动套用default.html作为当前页面的模板页。

一般来讲,只要有index.html和default.html就能凑成一个模板了,这当然是最简单的做法...

现在我们来看一下default.html的通常构造:

<{require file="block/header.html"}>
<div class="main clearfix">
	 <div class="main_left">
		<div class="category btm10"><{widgets id="category01"}></div>
		<div class="left_ad01 btm10"><{widgets id="left_ad01"}></div>
		<div class="toplist"><{widgets id="toplist"}></div>
	</div>
	<div class="main_right">
		<{main}>
	 </div>
</div>
<{require file="block/footer.html"}>

咦??? "<{main}>"???

不错,default.html必须有这个标签,这就是传说中的"系统流程区域,无法可视化编辑"。

而且"<{main}>"里面的内容输出完全由程序进行,与模板无关。

预览-调试各版本各浏览器兼容性-完成制作-维护

神功初成,诸多细节问题,需要不断的反馈,不断的调整提高。

模板开发手册下载

EC-store/外销宝是基于ShopEx48版本机制之上颠覆性创新,更人性化将页面、功能挂件等支持可自定义制作修改,满足不同行业理念的模板需求。

EcStore进入内侧阶段,暂还未对外,不过模板机制已经交付,现提供下载:

ShopEx模板文档EcStore模板文档

序言·神功入门
产品模板制作区别
模板机制概括
模板开发环境/流程
模板速成篇
上卷·ShopEx48模板开发
Html规范
Css规范
Javascript规范
模板制作
边框制作
简单的smarty语法
下卷·EcStore1.2模板开发
机制更新/申请SDK开发包
模板级挂件
精确选择商品接口
模板级页面拦截
边框机制的开启与隐藏
Mootools框架及效果实例
结尾·模板堂平台
模板堂平台介绍
申请成为模板开发者
开发者服务协议
模板定制服务
模板审核规范
EDM模板制作规范
开发者认证/分成/违规