Magento 主题如何工作

<!—->

在这章我们将详细讲述Magento如何使用主题,如果创建和管理自己的主题:

Magento的主题和其他系统有什么区别

术语‘主题theme’可能听起来是一个熟悉的名字,对于主题使用者和创建者,可能有过设置web应用主题的经历。主题有两大类用户:使用者和创建者。使用者就是那些从审美和可用性角度来看主题的人,而创建者就是是那些从参与创建的角度看待主题的人。

对于第一种用户,店铺应该有能力提供他们灵活设置让他们满意的设计的要求。对于第二种用户(主题创建者),他们必须能够容易地完成满足店铺要求的店铺设计开发任务。我们认为满足两种用户的需要才是觉得店铺的最终收益,因此两类用户的体验都不能忽略。

因为我们知道作为设计者,你已经制作好了所有的图形化页面素材,Magento接下来将帮助你构建 超乎想象的主题管理,最大化你的工作效率并把你的创造力带到一个全新的境界。 赶快来体验吧:

  1. 最大化定制能力
    用Magento你能在分类、产品级更新店铺的外观,可以带来无穷无尽的个性化设计,实施任何你想要得促销、市场策划的能力。你设想过定制每个产品的能力吗?那我告诉你,Magento可以为每个产品,每个分类定制样式。
  2. 多主题
    Magento可以同时装载多个主题,允许你在默认店铺设计和临时(季节性销售等)设计间切换 — 所有的操作都是非常简单。
  3. 不间断工作
    Magento完全面向对象编程,所有模块经由模板文件的标签必须立即存取。并且因为特性丰富,你不必依赖程序员来完成简单的工作。 Magento也依靠社区的成员(包括Magento官方)成长壮大,积累知识库, 所以你不必重复发明轮子。
  4. 最小化调试时间
    通过校验工具设计者能减少浪费在标签检查等上面的宝贵时间。校验工具可能告诉你什么是错的,但是他从来不告诉你错误发生在哪里。Magento的模块化的机制使用模块化的模板机制最小化(X)HTML的数量,这样你就可以把精力更多放在真正最重要的地方。

真正地,Magento最好的部分是它提供了真正的灵活性。在这里,你可以不受到限制的发挥你的聪明才智而不会受到应用程序的限制。

怎样创建一个主题

首先让我们打开Magento目录下的两个子目录:

  • 目录1: app/design/frontend/default/default/ — 这个目录包含布局(layout), 翻译文件(locale) 和模板.
  • 目录2: skin/frontend/default/default/ — 这个目录包含图片,CSS和基于块的Javascripts.

这两个目录作为开发主题的起点。
你可能注意到,我们把主题文件分成了两部分。通过这样的分离我们可以看出Magento为你的店铺在每一个角落都考虑到了安全问题。

让我继续检查这两个目录.乍看你会注意到在前面目录的子目录“default/default ”:

  • 目录1: app/design/frontend/default /default /
  • 目录2: skin/frontend/default /default /

在两种情况下,* 表示接口(interface) 名字, * 表示主题(theme) 名. 所以,如果你正在一个叫“my_interface ”的接口里写一个叫“my_theme ” 的主题, 你应该工作在‘app/design/frontend/my_interface/my_theme/ ’目录下.

你可以在接口目录下放任意多的主题,但是在写这篇文章的时候,你的店铺仅仅能调用名字叫’default’的主题并且一个额外选到你店铺的主题 (注意: 在将来的版本中Magento将具备分配无限数量主题的功能。 ) 为了学习Magento怎么一次性装载多个主体,阅读主题的结构层次 ) 有两个主题,你可以使用默认的主题作为淡季时的设计,而额外的主题则用于旺季时和为了某个营销事件而应用(要知道多主题怎么工作和它有什么好处,请阅读多主题应用入门 ).

创建默认主题

为了创建一个新的默认主题,首先你必须复制存在的默认主题做为工作的基础。复制 app/design/frontend/default/default/ 到新的目录,更改为你想要得名字(接口和主题的名字应该是字母数字的组合并且用字母开头。例如:‘My New Theme’ 和 ‘02123_my_theme’就不好,而 ‘my_new_theme’不错). 你的应用程序就是靠主题目录的名字识别主题。现在按照同样的方法复制skin/frontend/default/default . 这样,你就成功地创建了一个新的默认的主题。为了学习怎样把主题指派给店铺,请阅读下面章节指派一个新的主题 .

创建非默认主题

图1

当创建一个新的非默认的主题时,你不必复制存在的默认主题目录。你只要复制那些你想要修改的文件就可以了。记住一个规则,你必须保持Magento的主题文件目录结构。例如,如果所有非默认主题在catalogo模块下都有一个文件名字叫‘home.phtml’,在app/design/frontend/your_interface/your_non_default_theme/ 目录你将需要创建一个子目录叫‘template/catalog ’存放该文件。当你打开默认Magento主题目录(图1),可以看到目录结构——确保新的主题有同样的结构。

给店铺指派接口(interface)和主题(theme)

现在你已经创建了你自己的主题(不管是默认还是非默认的), 接下来要把它指派给你的站点/店铺使之生效。进入Magento后台管理界面(如www.mydomain.com/admin ), 然后进入Design配置页(System -> Configuration -> Design页).

image
image

在图2左上角,可以看到一个下拉框标签为‘Current Configuration Scope’.

  • 为了管理站点级别的设计 , 从下拉框中选择站点的名字,然后操作下面的步骤。
  • 为了管理店铺级别的设置 , 从下拉框中选择店铺的名字,然后操作下面的步骤。

步骤 1
从设计(Design)页, 在Current package name , 输入接口(interface)名. 如果什么都不填,Magento将自动装载名字叫‘default’的接口。

步骤 2
Default (在标题Themes处), 输入你想装载到站点/店铺的主题名字。如果你什么都不填写, Magento将自动装载名字叫‘default’的主题(记住:不管你怎么配置Design页,Magento都将自动装载名字叫‘default’的主题.如果你在后台指派一个主题,那么它将优先被装载,但是名字叫‘default’的主题仍然被一同装载。在将来版本中这个策略可能被改变, 不管怎样,目标都是让你能完全控制装载到店铺的主题). 你可以单独装载主题的某部分,这完全依赖于文件类型( (布局layout, 模板templates, 皮肤skin 或者translation文件), 相应处输入主题的名字就可以可以使他们生效。

步骤 3
当你做完这些, 点击按钮“Save config ” 然后重新装装载你的店铺– 怎么样! 是不是在前端看到了新的主题。

现在我们已经知道如何创建和管理主题,接下来我们要学习Magento是怎么处理这些主题的。

多主题应用入门

注意: 不限数目的主题的功能在未来的版本中将被支持。尽管现在仅仅能装载两个主题,实际在Magento内部工作机制是一样的。

假日常常给网上商店提供更广阔的机会 — 客户排队为他们的家人和朋友购买圣诞礼物,妈妈排队为他们的孩子买万圣节服装。为了鼓励顾客光顾你的店铺,你必须仔细调整店铺设计以适应季节性要求。像图3所示的店铺没有在圣诞节装饰 – 其实这时的店铺可能就需要一点点红色的喜气,一点雪花和圣诞老人的形象 – 如图4做的就比较好!

3. 未经过裁减的

图4: 裁减过的设计

用Magento, 我们已经为店铺创建多个主题便于在需要的时候应用。通过装载多个主题到你的店铺,你可以保留非季节性的店铺设计,而在圣诞节等节日增强店铺设计。

在考察一下上面的例子,你会发现两个设计的相似性。仅仅的差别是一点CSS、几个图片和模板文件文字的改变。因为这个改变不大,所以你不必改变整个默认的主题来适应圣诞节的需要。你需要做的就是几个文件的替换,就使你的店铺变得有趣。

Magento通过分配一个叫hierarchy 的概念装载多主题,通过它可以装层次(hierarchy)里最优先的主题。这个层次在后台Design配置页设置。

主题的层次

当你使用多主题到你的店铺时, 实际上你已经用到了这个层次的好处。创建主题是为了生成令人喜爱的图形接口,那么Magento 的目标就是确保应用能够定位和正确无误地装载要求的主题。

例如,如果你的种类列表页调用一个叫’view.phtml’的模板(这样该模板文件就是一个必要的文件), 但是应用在是不能在最高的主题层次中找到这个文件的。(注意: 在写这篇文档的时候,主题最优先层次是通过后台分配的,并且层次中优先级最低的主题叫’default’,Magento会自动把它装载到店铺。在未来的版本中,Magento将提供给你完全控制主体层次的能力。 ), 它将去下一个主题最高层次中查找该文件。如果失败,它将继续在主题层次结构中查找指导定位‘view.phtml’, 一旦找到,它将把它装载到店铺然后中止查找。这种构造设计的方法被叫做回退(fallbacks) , 因为应用‘回退(falls back)’到下一个可能的地方去检索和装载它。

假设你有三个主题分配到店铺并且每一个包含下面的文件:

Table 1
default my_theme_1 my_theme_2

All required files
templates/3-col-layout.phtml
templates/3-col-ayout.phtml

templates/header.phtml
css/base.css

images/logo.gif

css/base.css

css/boxes.css

让我们也假设这三个主题按照如下层次被指派:

Table 2
HIGHEST   LOWEST

my_theme_2

my_theme_1

default

仔细观察,在表1有几个冗余的文件如templates/3-col-layout.phtmlcss/base.css . 现在让我们重新排表格让这些冗余文件在主题之间平信排列。

表3
default my_theme_1 my_theme_2

所有要求的文件

templates/3-col-layout.phtml
templates/3-col-layout.phtml

templates/header.phtml

images/logo.gif

css/base.css
css/base.css

css/boxes.css

‘Ok, 太好了.但是这意味着什么?’ 你可能会问.
好, 让我提醒你,表3的那些文件是你怎么看这些文件,而不是Magento 怎么看它.

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

Table 4
default my_theme_1 my_theme_2

All required files

templates/3-col-layout.phtml

templates/header.phtml

images/logo.gif

css/base.css

css/boxes.css

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

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

Magento 设计术语

创建你自己的主题

<!—->

<!—->

<script type=”text/javascript”><!—-></script> <script src=”http://www.google-analytics.com/ga.js” type=”text/javascript”></script> <script src=”working-with-magento-themes_files/ga.js” type=”text/javascript”></script> <script type=”text/javascript”><!—-></script> <script type=”text/javascript”><!—-></script>

相关推荐

暂无评论

发表评论

微信扫一扫,分享到朋友圈

Magento 主题如何工作