我个人认为Magento模板制作的难点在于不了解Magento的架构,不会调动block。Magento的block调动几乎都是靠xml。在下面的内容会提及如何操作。

制作Magento模板的前提是:你要会Html,div+css。不管你想做什么模板,这个都是基础。如果想要做出个精致的Magento,还必须精通div+css。因为涉及到一个浏览器的兼容问题,当你在Firefox下打开你的Magento商城看着感觉是很完美,但是到了IE6下完全变形,而且中国还有50%左右的人用IE6。

在制作Magento模板之前,首先要选一个比较简单的模板,然后在此基础上做。我个人推荐使用Blank模板,这个模板比较干净,图片除了必须的 几乎没有,而且css也很精简。我刚开始做Magento模板的时候用的是Default的模板,这个模板的css文件很大,而且等模板完成后,会有很多无用图片。曾经做一个项目的时候,客户死死的抓住网站的css文件太大,让我相当的头疼。废话有点多,现在开始正题。

Magento模板最主要的地方是首页,首页完成,Magento模板就完成30%左右了。我个人习惯是先改头部和尾部,这两个地方是所有页面都有的。头部的东西都在app\design\frontend\default\你的主题\template\page\html\header.phtml里面。底部的东西都在app\design\frontend\default\你的主题\template\page\html\footer.phtml里面。这两块的话都是靠css修改的,没什么好说的。我重点讲下中间部分的布局等。

Magento的布局对于新手来说,是比较困难的。如果英语好的话建议去看看官方的介绍http://www.magentocommerce.com/design_guide/articles/intro-to-layouts,现在网上也有很多翻译好的了,想要的可以去找找。我个人认为布局就是把已有的block放到应该的地方,一般都是在xml里面调动。我介绍下catalog.xml,其他的就不说了,原理都一样,而且大部分的布局都可以在catalog里面实现。app\design\frontend\default\你的主题\layout\catalog.xml,进入后你可以看到类似的注释“Default layout, loads most of the pages”,这些注释的意思就是你所改的是什么地方的布局,例如:“Default layout, loads most of the pages”这句说的就是网站默认布局。接着往下看,会看到很多的<reference >标签,这些都是需要在page.xml里定义过后,这里才能用,这里先不详细介绍了。这些“name”有“left”,“right”,“header”等等,从字面上我们就能看出来他们所指的位置,“left”是指左边栏,“right”指右边栏,“header”指头部。各个<reference >标签里会包含多个<block>block就是我要调用的功能模块了。例如经常会有人问怎样把左边的什么移到右边,这个问题很好解决,在“left”里找到对应的block放到右边,这样就成功了。是不是觉得很简单,这篇就先讲到这,没写过这样的教程,可能讲的不详细,如果有不懂的可以留言。

转载请注明:转载自Magento及Web前端开发,谢谢!
原文链接地址:http://www.magentofront-end.com/magentomuban/51

最新文章

  1. BZOJ3209 花神的数论题
  2. 关闭英文拼写检查,关闭xml验证
  3. ssh用户登录
  4. Elasticsearch5.0.1索引压测结果
  5. 你应该知道的25道Javascript面试题
  6. 【xsy1019】小A的树论
  7. Zabbix3.0 自动微信报障
  8. Android GPS 临近触发
  9. zabbix agent 类型自带的key
  10. 打开新窗口(window.open) 用法
  11. LabVIEW设计模式系列——事件结构中值改变事件
  12. 自定义高级QFileDialog文件过滤器
  13. 201521123026《Java程序设》 第10周学习总结
  14. const的用法,特别是用在函数前面与后面的区别!
  15. xcode10下,Build Phases下没有Embed Frameworks
  16. MAC MAMP 中安装配置使用 ThinkPHP
  17. java0426 wen IO2
  18. Java 实现缓存,一个线程存,一个线程取
  19. C#泛型约束where T : class 解释
  20. SQL Server 无法连接数据库

热门文章

  1. 5月23日 JavaScript
  2. 修改weblogic PermGen
  3. CSS从今以后不用发愁
  4. FZU 2032 Log函数问题 模拟小数加法
  5. 解析Json的谷歌官方方法Gson和阿里巴巴的fastJson方法。
  6. Debug的F5~F8用法
  7. 让webapi只接受ajax请求
  8. 使用rosed编辑ROS文件
  9. ubuntu 14.04 安装 foxit pdf阅读器
  10. [转载]Android.mk简介