我个人认为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 如何制作模板的更多相关文章

  1. Magento修改邮件模板内容

    Magento 默认邮件模板 都是带着官方的标志和一些官方的基本信息.为了建立品牌形象我们需要把邮件模板中的所有官方信息换成自己的信息.修改步骤如下: 1.找到Magento的邮件模板文件(这里以 e ...

  2. Vue2.0 【第二季】第5节 Template制作模板

    目录 Vue2.0 [第二季]第5节 Template制作模板 第5节 Template制作模板 一.直接写在选项里的模板 二.写在template标签里的模板 三.写在script标签里的模板 Vu ...

  3. iOS Xcode制作模板类-b

    为什么要定义模板类 遵守代码规范可以提高代码可读性, 降低后期维护成本. 当我们定下了一个团队都认同的代码规范, 如我们要求所有的viewController的代码都得按照下面来组织: #pragma ...

  4. Magento 2 Block模板终极指南

    /view/frontend/page_layout/2columns-left.xml <layout xmlns:xsi="http://www.w3.org/2001/XMLSc ...

  5. AD 文档信息设置和制作模板

    原理图文档模板制作方法一.在DXP2004/AD6.0/AD6.3原理图设计环境下,新建一个自由原理图文档.单击:文件→新建→原理图,或者使用快捷键Ctrl+N打开Files资源面板,在“新建”项目下 ...

  6. iOS Xcode制作模板类

    转载请注明出处http://blog.csdn.net/uxyheaven/article/details/48419963 为什么要定义模板类 遵守代码规范可以提高代码可读性, 降低后期维护成本. ...

  7. 织梦dedecms模板调用标签大全-提高制作模板速度

    关键描述调用标签: ——————————————————————————–模板路径调用标签: {dede:field name=’templeturl’/}—————————————————————— ...

  8. vue - 制作模板

    1. 选项模板 2. template模板 3. script标签模板 <!-- 选项模板 --> <!DOCTYPE html> <html lang="en ...

  9. magento优化之模板静态化

    最近首页很慢,运行magento profile检查的时候,发现首页某个templat运行时间占了一半,大概6s. 用magento自带的缓存,尝试把代码中的collection缓存起来,但不知道为啥 ...

随机推荐

  1. python 打包成tar包

    def make_targz(output_filename, source_dir): with tarfile.open(output_filename, "w:gz") as ...

  2. 安装 mysql5.7.2 (Ubuntu 16.04 desktop amd64)

    1.下载mysql deb https://dev.mysql.com/downloads/mysql/ #移动到/usr/local/src/目录,解压 sudo mv mysql-server_5 ...

  3. S4 对象系统

    上一节中,我们介绍了 S3 系统.与大多数其他编程语言的面向对象系统不同,与那些类被定义为固定结构,且随着程序编译有确定的方法分派的系统相比,S3 系统显得非常不严谨.当我们定义一个 S3 类时,几乎 ...

  4. Codeforces 847C - Sum of Nestings

    847C - Sum of Nestings 思路:简单的递归. 代码: #include<bits/stdc++.h> using namespace std; #define ll l ...

  5. 关于angular5的惰性加载报错问题

    之前为了测试一个模块优化问题,于是用angular-cli快速搭建了个ng5的脚手架demo,在应用惰性加载功能的时候发现浏览器报错如下: ERROR Error: Uncaught (in prom ...

  6. Vue.js Cookbook: 添加实例属性; 👍 axios(4万➕✨)访问API; filters过滤器;

    add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...

  7. android--------Retrofit+RxJava的使用

    Retrofit是Square公司开发的一款针对Android网络请求的一个当前很流行的网络请求库. http://square.github.io/retrofit/ https://github. ...

  8. svn拒绝连接

    svn 服务开启: svnserve -d -r /home/svn

  9. Oracle 声明常量 (转)

    原文地址 Oracle 声明常量 常量在声明时赋予初值,并且在运行时不允许重新赋值.使用CONSTANT关键字声明常量. 声明常量 DECLARE pi CONSTANT number :=3.14; ...

  10. 利用padding-top/padding-bottom百分比,进行占位和高度自适应

    在css里面,padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候,参照的是父元素的宽度. 比如:父元素宽度是100px, 子元素p ...