制作你自己的Magento主题

制作你自己的 Magento 主题 Building Your Theme 星期二 08 19 2008 22 19 foolsky 建立你自己的主题 Theme Magento 是建立在完全模块化的模式基础上的 这为你的网店带来无限的可扩展性和灵活性 这章我们介绍如何开发 magento 主题 区块 Blocks 和布局 Layout 在 Magento 之前你很可能已经使用过其他电子商务程序 因此在开始之前 我们希望你抛弃所有按以往经验得来的期待 这并 不意味者你要学习一个全新的语言 也不意味着你要改变所有的工作流程 只是你要学习一些新的技巧来开发 Magento 的主题 掌握这些工具并且始终注意关注他们 你会喜欢上这种结构的 下面我们开始介绍 1 结构区块 结构区块 Structural Blocks 2 内容区块 内容区块 Content Blocks 3 布局 布局 Layout 建立心理导图 为了使你更清楚的理解区块和布局的含义 这里提供一些心理导图工你参考 1 想象一个长方区块的轮廓 就想图例 1 Diagram 1 2 现在想象整个区块的轮廓被填满 3 现在想象两个区块 他们的轮廓叠加在一起 4 现在想象三个区块 轮廓叠加在一起 5 然后想象四个 Diagram 1 6 然后我们来看一下 Magento 网店的首页缩略图 Diagram 2 7 看看上面缩略图可以被分割成几部分 以两种方式分割 Diagram 3 Diagram 4 你刚建立的思维导图给你在概念和真实区块之间一个平行的比较 我知道你也许完全糊涂了 让我来解释一下 从概念角度看 图 2 中的框架是结构区块 他们是内容区块的父区块 他们帮助去定内容区块在一个网店页面中显示的区域位置 如在图 3 中 这些结构块的存在形式为页眉区 左栏地区 右栏 等等有助于创建网店的视觉结构 l 另一方面 内容区块概念上就是装点结构区块的独立颜色的区块 在一个网店内容里 他们才是真正的内容 内容区块代表着页 面内的每一个功能特性 比如分类列表 标注和产品标签等等 并且使用模板文件生成 x HTML 插入到父结构区块里 布局布局 Layout 布局就是用来分配内容区块到结构区块的工具 布局以 XML 文本文件的形式存在 通过修改布局 你可以移动区块和分配模板 到内容区块来产生结构区块的标签 事实上 通过一些布局文件的帮助 你可以修改网店每页的可视布局 更多关于布局的信息 可以参考下面这个连接 介绍布局 Layouts 在 magento 里你不再需要 left column ext 这个模板文件 取而代之的是通过管理每个功能性基础元素来管理模板 你可以 通过一些布局命令载入或者卸载功能元素来控制网店页面 一步一步建立主题 Theme 下面是 Magento 建立主题的全部工具 1 模板模板 Templates 2 布局布局 Layouts 3 区块区块 Blocks 4 皮肤皮肤 Skins images CSS and block specific Javascript 要建立一套网店的模板 你需要按照一下这些步骤完成 第一步 关闭系统缓存 system cache 到管理界面 Administration Panel 然后 System Cache Management 在 All Cache 选择 Disable 然后保存 这样会忠实的展现你对页面的修改 第二步 确定你网店可能使用的所有结构类型 你可以做一个如下的列表 主页使用三栏结构 three column structure 分类列表页使用两栏结构包括右边栏 two column structure that includes a right column 客户页面使用两栏结构包括左边栏 two column structure that includes a left column 骨架模板 Skeleton template 做完了上面的列表 你就可以为每个结构类型创建一个 X HTML 标记并保存为骨架模板 Skeleton template 将它保存在 app design frontend your interface your theme template page skeleton template例子 Upon scanning through the sample skeleton template above you will notice a PHP method called getChildHtml inside each presentational markup This is the way Magento loads structural blocks into skeleton templates and hence is able to position all the contents of the structural blocks within a store page Each getChildHtml calls on a name as in getChildHtml headerheader and these names are ways by which each structural blocks are identified in the layout Skeleton templates are assigned to the store through the layout 第三步 根据功能性修剪你的 X HTML 建立好骨架模板之后 skeleton templates 你需要为每个内容木块创建模板 你需要为每个功能修改 X HTML 标签 比如 设计一个 mini cart 区域 这个区域的标签将成为它自己的模 板文件 其他诸如产品标签 登陆区等等也一样 这些功能 Magento 已经提供了 所以你只要参考已有的 模板标签来创建自己的标记逻辑就可以了 那么模板保存到那里呢 网店任何页面的全文标记是通过一个模板数组完成 数组中每一个都描述一个模块的功能 为了找出在网 页上您想要修改的 模板 您可以打开模板路径的提示 通过 Diagram 5 1 到管理页面 admin 然后 System Configuration 2 选择你的网店 通过 website store selector 3 页面刷新后 选 Developer tab 然后在 Template Path Hints 选 Yes 做完之后回到前台 刷新页面之后你就可以看到所有模板列表的路径了 只要通过路径修改相关的模板就可以了 第四步 改变布局以适应你的设计 那么布局文件在哪 在这里 app design frontend your interface your theme layout 和模板文件一样 布局文件也是按照基于 每个模块的方式存储的 这样你就可以方便的按模板提示修改 首先 激活模板提示 刷新要修改的页面 找寻模板提示的模板 路径 比如你想移动 mini cart 参考模板路径 ex app design frontend default default checkout cart sidebar phtml 用主题文件夹里第一个文件夹名 字体加重的那个 来寻找相关布局文件 所以在这个例子里 我们要寻找 checkout xml 来修改 mini cart 的位置 默认布局 VS 布局更新 Layout Updates 一共有两种布局 默认 default 和更新 updates 默认布局 default layout page xml 是默认应用到自身或者几乎 每个页面的布局 所有其他的布局文件都是更新布局 Layout Updates 也就是基于每个默认布局基础上的布局 让我们举例说明一下骨架模板 skeleton template 在默认布局里 你已经设置为三栏结构 就是说 默认几乎所有的页面都是三栏结构 但是在产品页面并