Magento设计师手册(官方)中文翻译版(1)(3)

表4告诉你Magento 怎样看待这些文件的装载：

表格 4

看到了吗？Magento是怎样忽略层次里那些冗余文件和仅仅识别层次里更高的主题的文件的。这是因为当它发现要求的文件就中止查找层次低的主题中的该文件而继续查找还没有发现的文件。

:: 在这章，你学到了怎么创建和管理主题。下一章，我们将要一步一步学习怎样创建一个主题。你也将学习导布局(layouts),模板(templates)和皮肤(skins) - 在进入下一章之前确保你已经熟知了那些术语-Magento设计术语章节。

创建自己的主题（Building Your Theme）

Posted 星期五, 05/22/2009 - 17:33 by Kevin Von

Magento是建立在完全模块化的模式基础上的，这为你的网店带来无限的可扩展性和灵活性。在建立主题时这种方式就会显现出来。在本章中，我们将探讨这意味着什么，并教会你如何为你的Magento店铺建立你自己的主题。

magento设计师手册中文翻译本

区块及布局介绍（Introducing Blocks and Layout）

Posted 星期五, 05/22/2009 - 17:35 by Kevin Von

在Magento之前你很可能已经使用过其他电子商务程序。可能你在开发网店主题方面有一定的经验了，但是我们希望你抛弃以往经验的来的所有期待，这并不意味者你要学习一个全新的语言，也不意味着你要改变你的工作流程，只是你要学习一些新的技巧来开发Magento的主题。掌握这些工具并且始终注意关注他们，你会喜欢上这种结构的。准备好了吗？下面我们开始介绍：

1.

2.

3. 结构区块（Structural Blocks） 内容区块（Content Blocks） 布局（Layout）

建立心理导向图（Creating the Mental Note）

为了让您清楚地了解什么是块（block）和布局（layout），这里有一个心理图片，您可以借鉴一下：

1.

2.

3.

4.

5. 想象一个长方体的轮廓(如图1 – 不要一次性浏览整个图品，顺着下面想象下去) 想象整个轮廓被填满。 想象现在是两个块，他们的轮廓叠在一起。 想象现在是三个块，他们的轮廓叠在一起。 现在是四个块，他们的轮廓叠在一起。

图

1

6. 现在我们来看一些一个分类页面的缩略图

magento设计师手册中文翻译本

7. 现在看看上面的缩略图被分割的两种情况快照

图

3

magento设计师手册中文翻译本

刚才建立的思维导向图给为你在概念和真实区块之间进行了一个平行的比较，也许你完全糊涂了，让我来解释一下。

从概念角度看，图3中的框架是结构区块。他们是内容区块的父区块，他们帮助定义内容区块在网点页面中的显示位置（如在图4中 ）。这些结构区块通常的存在形式为页眉区，左侧栏区，右侧栏区…等等。这有助于创建网店的视觉结构。

另一方面，内容区块概念上就是装点结构区块的独立颜色的区块。在一个网店内容里，他们才是真正的内容。内容区块代表着页面内的每一个功能特性（比如分类列表，标注和产品标签…等等），并且使用模板文件生成(x)HTML插入到父结构区块里。

布局（Layout）工具可以为每个你创建的结构区块分配内容区块。布局是以XML文本文件的形式存在，可以修改各个页面中各个结构区块的设计和指定显示模板的内容区块。事实上，通过一些布局文件的帮助，你可以修改网店每一个页面的视觉效果。要了解更多阅读介绍布局（Intro to Layouts）一章。

在Magento里你不再需要left_column.ext这个模板文件， 取而代之的是通过管理每个功能性基础元素来管理模板。你可以通过一些布局命令载入或者卸载功能元素来控制网店页面。

建立主题的步骤

Posted 星期五, 05/22/2009 - 17:37 by Kevin Von

下面是提供的建立主题的工具：

1.

2.

3. 模板（Templates） 布局（Layouts） 区块（Blocks）

magento设计师手册中文翻译本

4. 皮肤（Skins） (images, CSS and block-specific Javascript)

要为Magento网店建立一个主题，下面是你要操作的其中一些步骤：

第一步：关闭系统缓存(Disable your system cache)

为了让Magento系统执行一个完整的过程，需要在后台先禁用系统缓存

（/admin）和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并在

app/design/frontend/your_interface/your_theme/template/page/下保存这些骨架模板。一个骨架模板就是包含一个页面的总体结构（除的块），是为每个结块区块定义好了总体结构。

骨架模板例子：

浏览上面的简单骨架模板，你会注意到每个表现的标记中有一个PHP方法

getChildHtml()?>。这就是Magento将结构区块加载到骨架模板中的方法，并且决定了内容区块在商店页面中的显示位置。

每个getChildHtml都会调用一个名称<div

class="header"><?=$this->getChildHtml('header')?></div>，这些名称是在布局中结构区块的唯一标识。骨架模板通过布局应用到商店中。

magento设计师手册中文翻译本

第三步： 根据功能性修剪你的(X)HTML

一旦您建立您的骨架模板，您现在需要创建的模板每个内容块。

Magento喜欢有意义模板

您将需要削减你的页面的(X)HTML标记，并根据每个标记为页面提供功能。举例来说，如果你有mini-cart区的设计，此区域的标记将有用于这个区域的自己的模板文件。同时产品标签，newsletter，注册等...所有这些功能Magento都已经配备了，因此您可以参考现有的模板标记来建立您的标记逻辑。

哪里保存模板

图

5

商店中的每个页面的所有标记（包含一系列的模板）都是表示一个模块的功能。当你想修改一个页面调用的模板，可以他开Template Path提示。要打开这个功能，按下面操作：

1. 进入后台，到System -> Configuration

2. 在右上角的Website/Store选择器中选择你的商店

3. 然后选择左侧栏的Developer标签，并在Template Path Hints中选择Yes

当您完成后，回到商店前台，重新加载您的网页，您将会看到所有模板块的路径。要更改标记的话，根据显示的路径找到并修改响应的模板。

第四步：改变布局以适应你的设计

一旦您修改一些标记，你可能想移动一下这些模板看看这些模板修改的效果是什么样的。 如何找到布局文件

要访问布局文件，可以在app/design/frontend/your_interface/your_theme/layout/找到。就像模板文件一样, 布局文件也是基于每个模块的方式存储的，这样你 …… 此处隐藏：2945字，全部文档内容请下载后查看。喜欢就下载吧 ……