认识Zen产生子模板的方法

zen 主题是 Drupal 主题开发中用得最多的基主题(Base Theme)之一，通过使用 zen，创建 zen 的子主题做为网站的主题，可以节省大量主题开发工作，让主题开发人员将主要注意力集中的主题的结构和布局上，而较少关注一些函数的实现。

 

为什么用Zen？

----------------------------------------------------

----------------------------------------------------

不知道大家有没有留意到，drupal zen主題，在drupal主题中是人气最高的，Zen主题是Drupal主题中较为成熟和优秀的，在2009年最佳开源CMS评选中，Zen被评为最佳主题，而当你安装并启用后，你可能会破口大骂？什么烂主题，丑的不能再丑了，凭什么会排到第一？等等，兄弟先冷静一下。Zen 之所以能有如此高人气，一定是有它的过人之处的。那么，Zen的魅力究竟是什么呢？为什么这么丑的一个主题，会有这么多的粉丝呢？带着各种疑问。本系列将会为你破解所有疑团，全面介绍Zen主题的应用。

 

我想大家有没有这个经历，初学Drupal的时候，很多是选择直接在官方下载一个模板套用就算了，久而久之，发现官方的模板都不怎么漂亮，当想做一个自己风格的网站时候，却无从下手。

你可能会说，那我可以直接选择一个比较接近自己风格的官方theme进行加工修改。

没错，这是绝对可以的（当初我也是这么做的）。后来发现，这样改别人的theme，总有一些不自在，特别是别人的css已经写好了，而你改版后，可能会增加或者修改默认的css，会造成有些css是用不到，但又不知道哪些用不到。从而css文件变得很大。

Zen正是因此而生，它跟大多数的官方theme不同，它只是一个模板的框架，帮你搭建好一个基础的平台，然后内容得自己加上去。

 

如何安装Zen？

----------------------------------------------------

----------------------------------------------------

1，下载Zen ：http://drupal.org/project/zen

2，解压缩，复制到drupal themes下面，drupal 模板可以放在三个地方：

sites/all/themes — 当安装了多站点的时候，所有站点都能看到这个目录下的模板并且应用。

sites/default/themes — 当安装了多站点的时候，只有默认的站点（如drupalla.com）能看到这个目录下的模板并且应用。

sites/drupalla.com/themes — 当安装了多站点的时候，只有drupalla.com 这个站点才能看到这个目录下的模板并且应用。

 

3，登陆管理员，并且打开 admin/appearance (Drupal 7) 或者是admin/build/themes (Drupal 6) 查看是否能找到Zen。

 

通过Zen创建一个子模板

----------------------------------------------------

----------------------------------------------------

 

什么是基模板？什么是子模板？什么是STARTERKIT？

----------------------------------------------------

通常我们学一个系统，最好的方法是找到一些已存在的例子并且修改它，从而看看它是如何运作的。这种方法最大的弊端是，如果改坏了一些地方，而又没马上发现的话，到真的发现的时候，别人是很难去帮你解决的。

Drupal 的模板系统很好的处理了这个问题。Drupal引入了 父模板 子模板 机制。子模板能继承父模板的所有HTML，CSS，JS，还有php代码（我们通常叫父模板为基模板）。作为一个drupal 模板，子模板能很方便的去重写父模板的所有。

当我们解压缩zen后，里面有个STARTERKIT，STARTERKIT是一个基于Zen的一个子模板样板，开发者可以通过复制一份STARTERKIT并修改代码，来快速的建立基于zen 的子模板。

 

如何创建一个基于zen的子模板？

----------------------------------------------------

上面有提及，为了不会造成莫名其妙的错误，我们通常是不会修改基模板的数据的，而通常是创建子模板来设计模板。

1，到sites/default/themes/下面新建模板文件夹“drupalla”,拷贝STARTERKIT到sites/default/themes/drupalla下面 

zen 文件夹里面有一个子模板叫STARTERKIT，拷贝STARTERKIT到sites/default/themes/下面并且重命名为你的模板名称，这里我们命名为drupalla.路径是：sites/default/themes/drupalla（注意，模板文件夹名称必须是小写字母）。

当然，也可在zen 目录下建子模板文件夹，但不建议这么做，主要是为了更新zen 方便。

2，配置子模板的基本信息。 

打开子模板文件夹drupalla，重命名STARTERKIT.info.txt 为drupalla.info（注，文件名得与文件夹名一致），打开drupalla.info 文件，将 "name = Zen Sub-theme Starter Kit"改为 "name = 我的第一个模板"，"description = Read..." 改为 "description = 我的第一个基于Zen的子模板." 。

3，选择布局方式。 

zen子模板默认布局是固定宽度布局方式，如果你想自适应宽度布局方式，可以将drupalla.info 文件中“stylesheets[all][]        = css/layout-fixed.css”改为“stylesheets[all][]        = css/layout-liquid.css”（注：info文件中stylesheets 是模板调用的css文件），当然，如果你习惯了一些不同的css框架，如Blueprint或者 大家熟识的960网格，你也可以把“stylesheets[all][]        = css/layout-fixed.css”替换成你所选的布局样式（注：info文件的修改，需要后台清空缓存才能生效）。

4，修改子模板里面的特有函数名称。 

在子模板里面有template.php,theme-settings.php 两个文件，把里面的函数名中带有“STARTERKIT”的全部替换为你的模板名称“drupalla”，这两个文件一般是用来对系统函数的重写。如重写模板名命名规则，重写面包屑的显示规则等。

5，设为默认模板。 

打开 网站后台地址admin/appearance，选择 drupalla并且设置为默认模板。

可选步骤：

6，修改zen 的核心 tpl文件 

如果需要修改zen 的核心文件，可以拷贝zen下的templates文件夹到sites/default/themes/drupalla 下面进行对tpl的修改。

7，修改drupal 核心的tpl模板 

有时候，我们导入一个block后，发现block会加入了多层的div 嵌套，甚为雍炯，如果想简化，可以拷贝modules/block/block.tpl.php文件到sites/default/themes/drupalla/template 下面并修改里面代码为你的样式。同

样的，假使你想修改搜索框的样式，也可以拷贝modules/search/search-block-form.tpl.php 到sites/default/themes/drupalla/template下面并进行修改代码。

下面地址有所有drupal 核心的tpl 模板文件，这些文件都能进行如上操作。

http://drupal.org/node/190815

 

Zen样式风格

----------------------------------------------------

----------------------------------------------------

打开zen的子模板下方css文件夹，你一定会感觉恐怖。足足有26个css文件。天啊。。。

别恐慌，其实这跟一个css差不多的，只不过zen为了更好管理，它将各类的样式分类到不同的css文件下面。

drupal7-reference.css 只是一个用作参考的css文件，是没在子模板中使用的。

有7个“*-rtl.css”文件，rtl 是Right-to-Left（从右到左）的意思，因为drupal是支持多语言的，而有些语言是从右写往左的，当你要建的网站是rtl的时候，就得应用这7个css替换默认的css。

如果你不想要线框的效果，可以删掉 wireframes.css 或者在 drupalla.info 文件去掉 wireframes.css。

 

各个Css样式的用途。

----------------------------------------------------

html-reset.css: 

html 层面的样式。包括一些css 基元素的重写，如body{},a{},th{},h1, h2, h3, h4, h5, h6....等等。

layout-fixed.css:

layout-liquid.css: 

Zen 的布局样式。基于zen的列布局。如果你习惯了一些不同的css框架，如Blueprint或者 大家熟识的960网格，你也可以把“stylesheets[all][]        = css/layout-fixed.css”替换成你所选的布局样式（注：info文件

的修改，需要后台清空缓存才能生效）。

page-backgrounds.css:

分别对网站的外层div增加背景类的样式操作。默认这个css文档比较简洁。只有下面几句：

 

                    body{} 

                    #page-wrapper {} 

                    #page {}                

 #header {} 

                    #header .section {} 

                    #main-wrapper {} 

                    #main {} 

                    .region-footer {}                                    

tabs.css: 

对tabs类进行了基础的样式。

pages.css: 

页面page.tpl.php 的样式，zen的主要样式。

blocks.css: 

区块的样式，控制 block.tpl.php的样式。

navigation.css： 

导航条样式，如菜单，通过分组，对菜单样式进行管理，增加阅读性。

views-styles.css: 

views在drupal的应用非常广泛，Zen也有针对Views提供了专门的样式文件，要来存放views 模板的风格。

nodes.css: 

节点的样式。主要针对模板 node.tpl.php。

comments.css: 

留言样式，主要针对模板comment-wrapper.tpl.php 跟 comments.tpl.php。

forms.css: 

表单样式

fields.css: 

字段样式

print.css: 

当需要打印时候，可以通过打印样式控制打印效果。

ie.css:

ie6.css: 

做ie，ie6的兼容性样式。举例，当有些样式，在ie6需要修改才能正常显示，那么可以在ie6.css 改写这个样式。

Zen布局方式

----------------------------------------------------

----------------------------------------------------

Zen 布局默认采用“Zen列”布局样式，设计师可以选择固定宽度或者不固定宽度。

默认将页面分成以下几大块：

1，Header

2，Content

3，Navbar

4，Left sidebar

5，Right sidebar

6，Footer