我个人认为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. poj 1144 Network 无向图求割点

    Network Description A Telephone Line Company (TLC) is establishing a new telephone cable network. Th ...

  2. go 通道

    1. package main import "fmt" func sum(s []int, c chan int) { sum := for _, v := range s { ...

  3. python 同步与异步性能区别

    import gevent def task(pid): """ Some non-deterministic task """ geven ...

  4. js 二进制转换为16进制数

    <!DOCTYPE html> <html> <head> <title>远程监控</title> </head> <bo ...

  5. maven 下载不到jar包时候,更改阿里源

      maven 源 下载太慢,更改国内的阿里源会快一些 <repositories> <repository> <id>alimaven</id> &l ...

  6. A_Pancers团队项目设计完善&编码测试

    1:根据OOD详细设计工作要点,修改完善团队项目系统设计说明书和详细设计说明 我们在项目真正开发与测试的过程当中发现我们的项目开发流程不是很明确,我们对于软件开发流程和功能分布做了补充和完善,并且认为 ...

  7. C#中简单的文件操作实例

    using System; using System.IO; namespace Demo { class Program { static string tmpPath = @"D:/Lg ...

  8. 动态规划3--Help Jimmy

    动态规划3--Help Jimmy 一.心得 二.题目 三.分析 Jimmy跳到一块板上后,可以有两种选择,向左走,或向右走.走到左端和走到右端所需的时间,是很容易算的.如果我们能知道,以左端为起点到 ...

  9. spoj Fast Multiplication

    题意:乘法 要用nlogn的fft乘法. //#pragma comment(linker,"/STACK:1024000000,1024000000") #include< ...

  10. CF938G Shortest Path Queries

    首先只有询问的话就是个WC的题,线性基+生成树搞一搞就行. 进一步,考虑如果修改操作只有加边怎么做. 好像也没有什么变化,只不过需要在线地往线性基里插入东西而已. 删边呢? 注意到线性基这个玩意是不支 ...