modoer模板之路
modoer模板之路
http://hi.baidu.com/cnhackcity/blog/item/e5639d8002c953df9023d973.html
最近接触了一套不错的点评系统modoer,而且做了一个小小的点评网站出来。有感于制作过程中的点点滴滴,所以决定写这样个文章,来讲述下modoer程序的模板是如何制作的
首先声明下……本人不是专业的文案人员,所以写出来的东西难免全是大白话,各位看客就凑合着读吧。首先,为了方便模板的设计与制作,最好在本地构建一个运行环境。有很多人一听到IIS,PHP,MYSQL等等就头大。其实,环境构建很简单,你可以直接下载一个xampp就OK了。
XAMPP 是一个易于安装且包含 MySQL、PHP 和 Perl 的 Apache 发行版。XAMPP 的确非常容易安装和使用:只需下载,解压缩,启动即可。
针对Windows版本的下载地址:http://www.apachefriends.org/zh_cn/xampp-windows.html其次,你必须要去下载一套modoer系统(废话……没有程序还做个P的模板)。
目前modoer的最新版本是 Modoer v1.1.0 Build 081113
下载地址:http://www.modoer.com/downloads.php
至于如何安装,可以看压缩包内的install.txt。我想,我这类型的菜鸟都可以看懂,那么大家应该也没什么问题吧。一切准备就绪之后,开始我们的模板制作之路。
凡事都要有个计划,所以不要着急的上来就改,我们先来看看,modoer给我们提供了什么。
让我们先来看看官方提供的demo站
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/JOLbcDNLDn2VjK5TCzJmVQ==/3123527816558960072.jpg)
了解下网站大概提供了什么功能给我们,我们可以用到的有哪些。
在对网站有了一个整体的了解之后,你就可以着手制作模板了。
其实各种网站的模板设计无外乎就是设计效果图,把效果图转化为网页,调用函数转化为模板这样一个过程。
那么合理的初期效果设计是很重要的,你需要给网站一个整体的定位,给网站一个主题风格,这样才能在后面的制作过程中保持整个网站的协调与美观。设计图的制作与切图转化网页部分就不做细谈了。那不是主要需要讲的内容了~
今天就先写到这里。大家假如不是很忙,可以先看看、想想,而不至于到了后面手忙脚乱的去改改这,改改那~
下次讲modoer的模板构成于作用。
浅析modoer的模板构成于作用,让我们来肢解modoer
书接上回
话说modoer的模板主要放置在templates文件夹下,包含datacall、item、main、member、space几个文件夹
我们先来说说他们都是干嘛的
datacall 模块模板
item 商家模板
main 主模板
member 用户模板
space 空间模板具体在用的过程中大家会一一接触的,那么我们先从首页这个部分来说起,就以株洲点评网为例子来说下我是怎么做的吧。
整个网页分为3个部分,如下图
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/ri7qM3aDhFgcTWh6WGTfwg==/3123527816558960073.jpg)
首页的结构就是这个样子的了。
那么一步步的来,首先来说头部modoer_header.htm
先看一下我们的头部都有什么东西
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/EXiBscoI6KPd-klKqjds0A==/3123527816558960074.jpg)
看图说话
1.logo
2.主导航栏
3.注册,登录入口
4.搜索框
5.网站统计
6.发布功能
当然你也可以不这么布局,具体怎么来那要看你的设计稿是怎么弄的,我只是针对我的网站来做一个简单的分析。
那么接下来我们一个一个的来说。
logo
这个部分没有什么可说的,基本就是一个图片,一个链接而已,跳过这部分。主导航条
官方的模板中,导航条的显示是这样一段代码
利用了循环,他的编辑是在后台。而判定是否选中,则是利用了语句{if SCRIPTNAV==$val[scriptnav]} class=”selected”{/if}。一般常规的导航条可以套用此方法,简单而且明了。
但是由于之前我没有仔细研究过官方模板的结构,所以在制作过程中无法使用官方的规则来显示。
那么我是如何做的呢?
这个是我的导航条部分的代码
那么这样出来之后,无法做到跳转,没有办法,只能加载了一个JS来控制。而本人的JS又是鸟蛋级的……所以呢……
这段JS的大致意思呢就是抓取地址栏中的特定字符,判定网页处于哪个部分中。
这样写有一个不好的地方,就是在商铺的单独页的时候无法抓到地址栏的特定字符,无法判断属于哪个分类。
有谁想到更好的办法麻烦透露一下吧~让小弟我也好学习学习。注册登陆
这部分直接使用官方提供的代码就OK了,当然你对样式不满意可以调整CSS,你可以在css_main.css里找到mainmenu下面的一系列CSS,针对性的进行编辑就好。搜索框
同注册登录方法一样,同样是在css_main.css里找到.search下的CSS进行修改。网站统计
在官方模板里,这部分是不属于header区的,而是在modoer_index.htm的101行开始到104行。具体的内容查看一下源代码你就能明白了。只是放到你想要的地方就OK发布功能
依旧是同样的代码代用与CSS修改。不做多说了。预知modoer_footer如何编辑,且听下回分解。
本来想的是说下modoer_footer.htm的作用,不过细看,其实footer部分没有什么可说的。那么还是直接进入大头部分,modoer_index.htm吧。
依旧是用株洲点评网的例子来说。
让我们从上到下,从做到右,一步一步的来。
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/xzuKSR5-sgpYxFmcnIhAIQ==/3123527816558960075.jpg)
当然,这只是一种展示方式。假如你比较喜欢flash或者XML+CSS+XHTML类型的切换也一样可以放上去。
我这么做的原因是不想有一个地方来回动,分散用户的注意力。
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/5XSgWCvW1KskVO-lHeDoYw==/3123527816558960076.jpg)
这部分借鉴的是口碑网的模式,本来我设计之初不是这个样子的。是SNAKE同学指出了我设计稿的部分不妥之处,加以思考之后改成了现在这个样子。
本意是点击之后提交搜索,然后转入页面。但是在实现过程中遇到了一些困难,现在都没有考虑明白怎么解决。
我的想法是这样的
JS部分代码
HTML部分代码
简单的说,就是把文字部分传入搜索框内,然后提交。
有谁知道怎么结局的,麻烦指导下小弟我哦~
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/mwx8biTF0RI5yTeJkgbwDQ==/3123527816558960077.jpg)
这个部分是展示商铺的。
在代码部分的调用类似这样的
那么这个是什么意思呢?
你可以在后台>系统工具看到,对应的8号的说明就是”首页_热门商铺”而后面对应的模板就是index_item_li。那么这个index_item_li在哪里呢?templates目录下的datacall文件夹下。
举一反三,所有类似datacall:8这样的调用,都可以用这种办法来修改模板来实现你想要的效果。
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/EJvKREyFznv2G700ybiptA==/3123527816558960078.jpg)
这部分是用来显示网站动态的,我使用了网站的文章模块。同样的是datacall调用。
下面加了一个天气预报,我用的是[url=http://weather.china.com.cn/]http://weather.china.com.cn/[/url]的调用。具体使用哪里,你可以自己来决定。
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/Ldw2XCfgh6QApfApbZy0HQ==/3123527816558960079.jpg)
具体的分类,调用部分的代码如下
官方的调用我记得是h4,但是因为跟我的模板书写有冲突,所以我写了h3,并相应的修改了CSS。这部分没有什么特别需要说明的,总体来说就是找到相对应的CSS,修改成为你自己想要的样式。注意字间距与颜色就好。
[url=http://hiphotos.baidu.com/cnhackcity/pic/item/1e2bfbaf4f44d7ee7cd92abd.jpg]
[/url]
会员排行,SNAKE同学说这部分没有必要,但是我还是选择了放上来。一来占位,二来满足会员的虚荣心。毕竟排在前面看起来比较有面子。当然,你还是可以根据自己的网站设计来决定放什么东西。我只是就我的网站来举例子而已。
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/vFuAsU2GGX5JNCRkqZqJnw==/3123527816558960081.jpg)
首页比较重要的评论部分。同样是datacall调用模式。找到对应的模板,调整CSS以及加上部分美化。
在首页显示的时候,原本官方给出的是“我要回应”,但是有几个“笨”MM,以为是评论。所以,我做了一点点修改,点击之后成为评论这家店铺。还有就是最下面的友情链接了,其实那个不是必须的东西。我也在考虑是否去掉它。所以不对它做过多的说明了。
大概说一下它的调用是
这一类型的模板调用就是直接在模板文件夹下找到modoer_part_plugin_links.htm就OK了。
首页基本就分析到这里了。我只是说了一个皮毛,具体大家如何设计,如何制作还是要靠自己了~
http://hi.baidu.com/cnhackcity/blog/item/e5639d8002c953df9023d973.html
最近接触了一套不错的点评系统modoer,而且做了一个小小的点评网站出来。有感于制作过程中的点点滴滴,所以决定写这样个文章,来讲述下modoer程序的模板是如何制作的
首先声明下……本人不是专业的文案人员,所以写出来的东西难免全是大白话,各位看客就凑合着读吧。首先,为了方便模板的设计与制作,最好在本地构建一个运行环境。有很多人一听到IIS,PHP,MYSQL等等就头大。其实,环境构建很简单,你可以直接下载一个xampp就OK了。
XAMPP 是一个易于安装且包含 MySQL、PHP 和 Perl 的 Apache 发行版。XAMPP 的确非常容易安装和使用:只需下载,解压缩,启动即可。
针对Windows版本的下载地址:http://www.apachefriends.org/zh_cn/xampp-windows.html其次,你必须要去下载一套modoer系统(废话……没有程序还做个P的模板)。
目前modoer的最新版本是 Modoer v1.1.0 Build 081113
下载地址:http://www.modoer.com/downloads.php
至于如何安装,可以看压缩包内的install.txt。我想,我这类型的菜鸟都可以看懂,那么大家应该也没什么问题吧。一切准备就绪之后,开始我们的模板制作之路。
凡事都要有个计划,所以不要着急的上来就改,我们先来看看,modoer给我们提供了什么。
让我们先来看看官方提供的demo站
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/JOLbcDNLDn2VjK5TCzJmVQ==/3123527816558960072.jpg)
了解下网站大概提供了什么功能给我们,我们可以用到的有哪些。
在对网站有了一个整体的了解之后,你就可以着手制作模板了。
其实各种网站的模板设计无外乎就是设计效果图,把效果图转化为网页,调用函数转化为模板这样一个过程。
那么合理的初期效果设计是很重要的,你需要给网站一个整体的定位,给网站一个主题风格,这样才能在后面的制作过程中保持整个网站的协调与美观。设计图的制作与切图转化网页部分就不做细谈了。那不是主要需要讲的内容了~
今天就先写到这里。大家假如不是很忙,可以先看看、想想,而不至于到了后面手忙脚乱的去改改这,改改那~
下次讲modoer的模板构成于作用。
浅析modoer的模板构成于作用,让我们来肢解modoer
书接上回
话说modoer的模板主要放置在templates文件夹下,包含datacall、item、main、member、space几个文件夹
我们先来说说他们都是干嘛的
datacall 模块模板
item 商家模板
main 主模板
member 用户模板
space 空间模板具体在用的过程中大家会一一接触的,那么我们先从首页这个部分来说起,就以株洲点评网为例子来说下我是怎么做的吧。
整个网页分为3个部分,如下图
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/ri7qM3aDhFgcTWh6WGTfwg==/3123527816558960073.jpg)
首页的结构就是这个样子的了。
那么一步步的来,首先来说头部modoer_header.htm
先看一下我们的头部都有什么东西
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/EXiBscoI6KPd-klKqjds0A==/3123527816558960074.jpg)
看图说话
1.logo
2.主导航栏
3.注册,登录入口
4.搜索框
5.网站统计
6.发布功能
当然你也可以不这么布局,具体怎么来那要看你的设计稿是怎么弄的,我只是针对我的网站来做一个简单的分析。
那么接下来我们一个一个的来说。
logo
这个部分没有什么可说的,基本就是一个图片,一个链接而已,跳过这部分。主导航条
官方的模板中,导航条的显示是这样一段代码
- <ul>
- <!--{loop $_menus[website] $val}-->
- <li {if SCRIPTNAV==$val[scriptnav]} class="selected"{/if}><a href="$val[url]"><span>$val[title]</span></a></li>
- <!--{/loop}-->
- </ul>
利用了循环,他的编辑是在后台。而判定是否选中,则是利用了语句{if SCRIPTNAV==$val[scriptnav]} class=”selected”{/if}。一般常规的导航条可以套用此方法,简单而且明了。
但是由于之前我没有仔细研究过官方模板的结构,所以在制作过程中无法使用官方的规则来显示。
那么我是如何做的呢?
这个是我的导航条部分的代码
- <ul>
- <li class="n1 noLine"><a id="nav1" href="/">首页</a></li>
- <li class="n2"><a id="nav2" href="/shop/cate.php?cd=10">餐饮美食</a></li>
- <li class="n3"><a id="nav3" href="/shop/cate.php?cd=11">休闲娱乐</a></li>
- <li class="n4"><a id="nav4" href="/shop/cate.php?cd=12">生活服务</a></li>
- <li class="n5"><a id="nav5" href="/shop/cate.php?cd=13">逛街购物</a></li>
- <li class="n6 blk noLine" ><a id="nav6" href="/card/">会员卡</a></li>
- <li class="n7"><a id="nav7" href="/coupon/">优惠券</a></li>
- </ul>
那么这样出来之后,无法做到跳转,没有办法,只能加载了一个JS来控制。而本人的JS又是鸟蛋级的……所以呢……
- function geturl()
- {
- var url = document.location.href;
- var n1 =document.getElementById("nav1");
- var n2 =document.getElementById("nav2");
- var n3 =document.getElementById("nav3");
- var n4 =document.getElementById("nav4");
- var n5 =document.getElementById("nav5");
- var n6 =document.getElementById("nav6");
- var n7 =document.getElementById("nav7");
- if ( url.indexOf("?cd=10")== 34){n2.className = "on";}
- else {
- if ( url.indexOf("?cd=11")== 34){n3.className = "on";}
- else{
- if ( url.indexOf("?cd=12")== 34 ){n4.className = "on";}
- else{
- if ( url.indexOf("?cd=13")== 34 ){n5.className = "on";}
- else{
- if ( url.indexOf("/card/")== 20){n6.className = "on";}
- else{
- if ( url.indexOf("/coupon/")== 20 ){n7.className = "on";}
- else{
- if ( url.indexOf("?shop")== 34 ){n1.className = "";}
- else{
- n1.className = "on"
- }
- }
- }
- }
- }
- }
- }
- }
这段JS的大致意思呢就是抓取地址栏中的特定字符,判定网页处于哪个部分中。
这样写有一个不好的地方,就是在商铺的单独页的时候无法抓到地址栏的特定字符,无法判断属于哪个分类。
有谁想到更好的办法麻烦透露一下吧~让小弟我也好学习学习。注册登陆
这部分直接使用官方提供的代码就OK了,当然你对样式不满意可以调整CSS,你可以在css_main.css里找到mainmenu下面的一系列CSS,针对性的进行编辑就好。搜索框
同注册登录方法一样,同样是在css_main.css里找到.search下的CSS进行修改。网站统计
在官方模板里,这部分是不属于header区的,而是在modoer_index.htm的101行开始到104行。具体的内容查看一下源代码你就能明白了。只是放到你想要的地方就OK发布功能
依旧是同样的代码代用与CSS修改。不做多说了。预知modoer_footer如何编辑,且听下回分解。
本来想的是说下modoer_footer.htm的作用,不过细看,其实footer部分没有什么可说的。那么还是直接进入大头部分,modoer_index.htm吧。
依旧是用株洲点评网的例子来说。
让我们从上到下,从做到右,一步一步的来。
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/xzuKSR5-sgpYxFmcnIhAIQ==/3123527816558960075.jpg)
当然,这只是一种展示方式。假如你比较喜欢flash或者XML+CSS+XHTML类型的切换也一样可以放上去。
我这么做的原因是不想有一个地方来回动,分散用户的注意力。
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/5XSgWCvW1KskVO-lHeDoYw==/3123527816558960076.jpg)
这部分借鉴的是口碑网的模式,本来我设计之初不是这个样子的。是SNAKE同学指出了我设计稿的部分不妥之处,加以思考之后改成了现在这个样子。
本意是点击之后提交搜索,然后转入页面。但是在实现过程中遇到了一些困难,现在都没有考虑明白怎么解决。
我的想法是这样的
JS部分代码
- function query(keyword)
- {
- var obj=document.getElementById("searchform");
- obj.keyword.value=keyword;
- obj.submit();
- }
HTML部分代码
- <a href="#" on
click="javas cript:query(this.innerHTML);">家庭聚会</a>
简单的说,就是把文字部分传入搜索框内,然后提交。
有谁知道怎么结局的,麻烦指导下小弟我哦~
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/mwx8biTF0RI5yTeJkgbwDQ==/3123527816558960077.jpg)
这个部分是展示商铺的。
在代码部分的调用类似这样的
那么这个是什么意思呢?
你可以在后台>系统工具看到,对应的8号的说明就是”首页_热门商铺”而后面对应的模板就是index_item_li。那么这个index_item_li在哪里呢?templates目录下的datacall文件夹下。
举一反三,所有类似datacall:8这样的调用,都可以用这种办法来修改模板来实现你想要的效果。
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/EJvKREyFznv2G700ybiptA==/3123527816558960078.jpg)
这部分是用来显示网站动态的,我使用了网站的文章模块。同样的是datacall调用。
下面加了一个天气预报,我用的是[url=http://weather.china.com.cn/]http://weather.china.com.cn/[/url]的调用。具体使用哪里,你可以自己来决定。
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/Ldw2XCfgh6QApfApbZy0HQ==/3123527816558960079.jpg)
具体的分类,调用部分的代码如下
- <!--{loop $_panels $key $val}-->
- <h3>$val</h3>
- <!--{loop $classlist[$key] $p_val}-->
- <a href="{$_modules[shop][url]}cate.php?cd=$p_val[cd]" class="showlist">$p_val[name]</a>
- <!--{/loop}-->
- <!--{/loop}-->
官方的调用我记得是h4,但是因为跟我的模板书写有冲突,所以我写了h3,并相应的修改了CSS。这部分没有什么特别需要说明的,总体来说就是找到相对应的CSS,修改成为你自己想要的样式。注意字间距与颜色就好。
[url=http://hiphotos.baidu.com/cnhackcity/pic/item/1e2bfbaf4f44d7ee7cd92abd.jpg]
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/Ud3OhRaoc33eF9R6xzvWTw==/3123527816558960080.jpg)
会员排行,SNAKE同学说这部分没有必要,但是我还是选择了放上来。一来占位,二来满足会员的虚荣心。毕竟排在前面看起来比较有面子。当然,你还是可以根据自己的网站设计来决定放什么东西。我只是就我的网站来举例子而已。
![modoer模板之路 - luiweiping-002 - 〖下里巴人〗 modoer模板之路 - luiweiping-002 - 〖下里巴人〗](http://img.blog.163.com/photo/vFuAsU2GGX5JNCRkqZqJnw==/3123527816558960081.jpg)
首页比较重要的评论部分。同样是datacall调用模式。找到对应的模板,调整CSS以及加上部分美化。
在首页显示的时候,原本官方给出的是“我要回应”,但是有几个“笨”MM,以为是评论。所以,我做了一点点修改,点击之后成为评论这家店铺。还有就是最下面的友情链接了,其实那个不是必须的东西。我也在考虑是否去掉它。所以不对它做过多的说明了。
大概说一下它的调用是
- <!--{if $_modules[links]}-->
- {template modoer_part_plugin_links}
- <!--{/if}-->
这一类型的模板调用就是直接在模板文件夹下找到modoer_part_plugin_links.htm就OK了。
首页基本就分析到这里了。我只是说了一个皮毛,具体大家如何设计,如何制作还是要靠自己了~