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的模板构成于作用。
 
 
浅析modoer的模板构成于作用，让我们来肢解modoer
书接上回
话说modoer的模板主要放置在templates文件夹下，包含datacall、item、main、member、space几个文件夹
我们先来说说他们都是干嘛的
datacall 模块模板
item 商家模板
main 主模板
member 用户模板
space 空间模板具体在用的过程中大家会一一接触的，那么我们先从首页这个部分来说起，就以株洲点评网为例子来说下我是怎么做的吧。
整个网页分为3个部分，如下图

首页的结构就是这个样子的了。
那么一步步的来，首先来说头部modoer_header.htm
先看一下我们的头部都有什么东西

看图说话
1.logo
2.主导航栏
3.注册，登录入口
4.搜索框
5.网站统计
6.发布功能
当然你也可以不这么布局，具体怎么来那要看你的设计稿是怎么弄的，我只是针对我的网站来做一个简单的分析。
那么接下来我们一个一个的来说。

logo
这个部分没有什么可说的，基本就是一个图片，一个链接而已，跳过这部分。主导航条
官方的模板中，导航条的显示是这样一段代码

1. <ul> 
2.    <!--{loop $_menus[website] $val}--> 
3.    <li {if SCRIPTNAV==$val[scriptnav]} class="selected"{/if}><a href="$val[url]"><span>$val[title]</span></a></li> 
4.    <!--{/loop}--> 
5. </ul> 

利用了循环，他的编辑是在后台。而判定是否选中，则是利用了语句{if SCRIPTNAV==$val[scriptnav]} class=”selected”{/if}。一般常规的导航条可以套用此方法，简单而且明了。
但是由于之前我没有仔细研究过官方模板的结构，所以在制作过程中无法使用官方的规则来显示。
那么我是如何做的呢？
这个是我的导航条部分的代码

1. <ul> 
2. <li class="n1 noLine"><a id="nav1" href="/">首页</a></li> 
3. <li class="n2"><a id="nav2" href="/shop/cate.php?cd=10">餐饮美食</a></li> 
4. <li class="n3"><a id="nav3" href="/shop/cate.php?cd=11">休闲娱乐</a></li> 
5. <li class="n4"><a id="nav4" href="/shop/cate.php?cd=12">生活服务</a></li> 
6. <li class="n5"><a id="nav5" href="/shop/cate.php?cd=13">逛街购物</a></li> 
7. <li class="n6 blk noLine" ><a id="nav6" href="/card/">会员卡</a></li> 
8. <li class="n7"><a id="nav7" href="/coupon/">优惠券</a></li> 
9. </ul> 

那么这样出来之后，无法做到跳转，没有办法，只能加载了一个JS来控制。而本人的JS又是鸟蛋级的……所以呢……

1. function geturl() 
2. { 
3. var url = document.location.href; 
4. var n1 =document.getElementById("nav1"); 
5. var n2 =document.getElementById("nav2"); 
6. var n3 =document.getElementById("nav3"); 
7. var n4 =document.getElementById("nav4"); 
8. var n5 =document.getElementById("nav5"); 
9. var n6 =document.getElementById("nav6"); 
10. var n7 =document.getElementById("nav7"); 
11. if ( url.indexOf("?cd=10")== 34){n2.className = "on";} 
12. else { 
13. if ( url.indexOf("?cd=11")== 34){n3.className = "on";} 
14. else{ 
15. if ( url.indexOf("?cd=12")== 34 ){n4.className = "on";} 
16. else{ 
17. if ( url.indexOf("?cd=13")== 34 ){n5.className = "on";} 
18. else{ 
19. if ( url.indexOf("/card/")== 20){n6.className = "on";} 
20. else{ 
21. if ( url.indexOf("/coupon/")== 20 ){n7.className = "on";} 
22. else{ 
23. if ( url.indexOf("?shop")== 34 ){n1.className = "";} 
24. else{ 
25. n1.className = "on" 
26. } 
27. } 
28. } 
29. } 
30. } 
31. } 
32. } 
33. } 

这段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吧。
依旧是用株洲点评网的例子来说。
让我们从上到下，从做到右，一步一步的来。

当然，这只是一种展示方式。假如你比较喜欢flash或者XML+CSS+XHTML类型的切换也一样可以放上去。
我这么做的原因是不想有一个地方来回动，分散用户的注意力。

这部分借鉴的是口碑网的模式，本来我设计之初不是这个样子的。是SNAKE同学指出了我设计稿的部分不妥之处，加以思考之后改成了现在这个样子。
本意是点击之后提交搜索，然后转入页面。但是在实现过程中遇到了一些困难，现在都没有考虑明白怎么解决。
我的想法是这样的
JS部分代码

1. function query(keyword) 
2. { 
3. var obj=document.getElementById("searchform"); 
4. obj.keyword.value=keyword; 
5. obj.submit(); 
6. } 

HTML部分代码

1. <a href="#" onclick="javascript:query(this.innerHTML);">家庭聚会</a> 

简单的说，就是把文字部分传入搜索框内，然后提交。
有谁知道怎么结局的，麻烦指导下小弟我哦～

这个部分是展示商铺的。
在代码部分的调用类似这样的

那么这个是什么意思呢？
你可以在后台>系统工具看到，对应的8号的说明就是”首页_热门商铺”而后面对应的模板就是index_item_li。那么这个index_item_li在哪里呢？templates目录下的datacall文件夹下。
举一反三，所有类似datacall:8这样的调用，都可以用这种办法来修改模板来实现你想要的效果。

这部分是用来显示网站动态的，我使用了网站的文章模块。同样的是datacall调用。
下面加了一个天气预报，我用的是[url=http://weather.china.com.cn/]http://weather.china.com.cn/[/url]的调用。具体使用哪里，你可以自己来决定。

具体的分类，调用部分的代码如下

1. <!--{loop $_panels $key $val}--> 
2. <h3>$val</h3> 
3. <!--{loop $classlist[$key] $p_val}--> 
4. <a href="{$_modules[shop][url]}cate.php?cd=$p_val[cd]" class="showlist">$p_val[name]</a> 
5. <!--{/loop}--> 
6. <!--{/loop}--> 

官方的调用我记得是h4，但是因为跟我的模板书写有冲突，所以我写了h3，并相应的修改了CSS。这部分没有什么特别需要说明的，总体来说就是找到相对应的CSS，修改成为你自己想要的样式。注意字间距与颜色就好。

[url=http://hiphotos.baidu.com/cnhackcity/pic/item/1e2bfbaf4f44d7ee7cd92abd.jpg][/url]
会员排行，SNAKE同学说这部分没有必要，但是我还是选择了放上来。一来占位，二来满足会员的虚荣心。毕竟排在前面看起来比较有面子。当然，你还是可以根据自己的网站设计来决定放什么东西。我只是就我的网站来举例子而已。


首页比较重要的评论部分。同样是datacall调用模式。找到对应的模板，调整CSS以及加上部分美化。
在首页显示的时候，原本官方给出的是“我要回应”，但是有几个“笨”MM，以为是评论。所以，我做了一点点修改，点击之后成为评论这家店铺。还有就是最下面的友情链接了，其实那个不是必须的东西。我也在考虑是否去掉它。所以不对它做过多的说明了。
大概说一下它的调用是

1. <!--{if $_modules[links]}--> 
2.    {template modoer_part_plugin_links} 
3. <!--{/if}--> 

这一类型的模板调用就是直接在模板文件夹下找到modoer_part_plugin_links.htm就OK了。
首页基本就分析到这里了。我只是说了一个皮毛，具体大家如何设计，如何制作还是要靠自己了～