Magento 模板制作(2)概念认识及模板的初步创建

完成前期的准备工作,现在可以开始Magento模板的制作了。
首先,需要了解几个相关的概念:

Magento的界面(Interface)是一些主题(Themes)的集合,主题是确定网店的外观和前台页面结构的。一个界面可以在Magento后台为网站级别和/或Store View级别指定。

website

Magento中的一个主题(Theme)是由布局(Layout),模板(Template)和皮肤文件(skin文件是控制网店的显示效果的)组成。Magento被设计成一次可以加载多个主题的功能。


一些主题的组件:

布局(Layout) (在app/design/frontend/your_interface/your_theme/layout/)
布局是XML文件,它的作用是定义不同页面的区块(Block)结构,以及控制页面的META信息和网页的编码。布局文件是基于每个模块分布的,每一个模块拥有它自己的布局文件。要深入了解Layout,请阅读布局的介绍。

模板(Templates) (在app/design/frontend/your_interface/your_theme/template/)
模板是PHTML文件,它包含(X)HTML标签和一些用来实现信息和功能显示的逻辑的PHP代码。

本地(Locale) (在app/design/frontend/your_interface/your_theme/locale/)
这些都是在每个语言基础上组织的简单的文本文件,包含商店的翻译副本。

皮肤(Skins) (在skin/frontend/your_interface/your_theme/)
皮肤是具体区块(Blocks)中的JavaScript、CSS和图片文件。

区块(Block)是Magento用来区分系统中一系列功能,并创建一个可见的、操作方式统一的模块化方式来管理这些功能的方式。有两种类型的Block,并且它们相互工作来创建输出的内容:

结构区块(Structural Blocks)
这些Blocks是设计成来创建网店页面的可视结构的。例如:头部(Header)、左边栏(Left Column)、主体内容(Main Column)和页眉(Footer),见下图:

blocks

内容区块(Content Blocks)
这些Blocks是在Structural Block中生成实际的内容的。它们是具体的每个功能的表现块,它们会部署Template Files到Structural Block中生成(X)HTML内容。例如:分类列表(Category List),小购物车(Mini Cart),产品标签(Product Tags)和产品列表(Product Listing)等等就是它们自己的内容区块,见下图:

blocks-content


以上概念作大概了解即可,后期的模板制作过程自然会加深概念的理解。

看完理论,当然最关心的是如何着手,其实模板的制作可以简单的理解为主题(Theme)的创建、修改,今后的工作也基本围绕 主题(Theme) 的相关文件进行操作。

接下来就要介绍主题相关的文件目录了,在magento系统目录下,主题文件主要分开存放在以下两个目录里,当创建主题时,这两个目录就是文件的工作目录:
目录1: app/design/frontend/default/default/ — 此目录包含布局(layout),翻译(本地)和模板文件。
目录2: skin/frontend/default/default/ — 此目录包含图片、CSS和Javascript文件。

在这两种情况下, 第一个default表示界面(Interface)的名称,而第二个default表示主题(Theme)的名称。也就是说,如果你在建立一个界面“my_interface”下的主题“my_theme”,你的工作目录将是‘app/design/frontend/my_interface/my_theme/’、‘ skin /frontend/my_interface/my_theme/’(这里切记app和skin目录里的界面、主题的名称要一致!)。


创建一个新的默认主题(Creating a new default theme)

为了创建一个新的默认主题,首先您必须复制一个现有的默认主题作为新主题修改的基础。创建一个app/design/frontend/default/default/目录的副本,并重命名(界面interface和主题theme的名称应当是一个以小写字母开头的数字英文字母组合的字符串。比如‘My New Theme’ 和‘02123_my_theme’就不好,‘my_new_theme’就比较好)。程序是通过主题目录的名称来确认主题的。skin/frontend/default/default也是同样操作。就这样,您现在已经成功地创建了一个新的默认主题。

创建一个新的非默认主题(Creating a new non-default theme)
当创建一个新的非默认主题,则不需要复制任何现有的默认主题目录。最有可能的是你只要改变一些特定的文件,因此只需要复制一些需要修改的文件作为起点。有一个规则你一定要切记并遵循,你必须保持Magento的主题文件目录结构。当你打开一个默认Magento主题目录(下图),可以看到目录结构—请确保新的主题有同样的结构:

mulu

为商店指定界面和主题(Assigning interface and theme to the store)
现在,您已经创建了自己的主题(无论是默认还是非默认),您需要将分配给您的Websit/Store,以使之得以生效。转到Magento管理后台(127.0.0.1/pcmeal/index.php/admin),然后选择Design 配置标签(System -> Configuration -> Design)。

相关文章

发表评论

Free WordPress Themes