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

一些函数的实现。

本系列将会分成四大章节，

第一节是对Zen的一个入门认识，主要讲解Zen的一些基本概念，文件，结构：Drupal Zen 基模板菜鸟终结者 1 ---- 认识Zen；

第二节是对Zen的一个简单应用，让读者能对Zen的开发有个初步的了解：Drupal Zen 基模板菜鸟终结者 2 ---- 增加对Nice Menus 的支持；

第三节是Zen的一些子模板案例：Drupal Zen 基模板菜鸟终结者 3 ---- 一些基于Zen的子模板；

第四节是Zen的案例讲解：Drupal Zen 基模板菜鸟终结者 4 ---- drupalla.com案例讲解。

zen下载地址：http://drupal.org/project/zen

zen 使用英文手册：http://drupal.org/node/193318

为什么用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文档比较简洁。只有下面几句：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

系列文章：

• Drupal Zen 基模板菜鸟终结者 1 ---- 认识Zen
• Drupal Zen 基模板菜鸟终结者 2 ---- 增加对Nice Menus 的支持
• Drupal Zen 基模板菜鸟终结者 3 ---- 一些基于Zen的子模板
• Drupal Zen 基模板菜鸟终结者 4 ---- drupalla.com案例讲解

Nice Menus是一个非常有好的菜单模块。用它可以轻松实现菜单下拉与折叠。

Zen 默认是直接通过blocks调用菜单，而Nice Menus 能够非常轻易的配置成一个block，默认的zen子模板只需要一些小修改，就能很好的应用Nice Menus。
第一步，复制Zen 的templates文件夹到你的zen子模板下方。
第二步，打开page.tpl.php搜索id 为 navigation  的div，找到如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php if ($page['navigation'] || $main_menu): ?>
      <div id="navigation"><div class="section clearfix">
 
        <?php print theme('links__system_main_menu', array(
          'links' => $main_menu,
          'attributes' => array(
            'id' => 'main-menu',
            'class' => array('links', 'inline', 'clearfix'),
          ),
          'heading' => array(
            'text' => t('Main menu'),
            'level' => 'h2',
            'class' => array('element-invisible'),
          ),
        )); ?>

我们把它替换成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?php if ($page['navigation'] || $main_menu): ?>
      <div id="navigation"><div class="section clearfix">
 
        <?php
        if (module_exists('nice_menus')) {
          print theme_nice_menus_main_menu( array(
            'direction' => 'down',
            'depth' => -1,
          ) );
        }
        else{
      
          print theme('links__system_main_menu', array(
            'links' => $main_menu,
            'attributes' => array(
              'id' => 'main-menu',
              'class' => array('links', 'inline', 'clearfix'),
            ),
            'heading' => array(
              'text' => t('Main menu'),
              'level' => 'h2',
              'class' => array('element-invisible'),
            ),
          ));
        } ?>

当改完代码后，如果Nice Menus模块开启了，模板就会应用Nice Menus，而如果没启动Nice Menus，系统会用回Zen默认的菜单。
可以查看theme_nice_menus_main_menu()函数，这是生成nice menu 的函数。有两个参数，一个是控制方向的(direction)，默认是Down（向下）；一个是控制层级的(depth)，-1 表示不限制。

第三步，修改Zen的默认css，必须确保样式中有“overflow: hidden”；这样当内容超出div区域时候，就能做隐藏，而不至于导致变形。

• Drupal Zen 基模板菜鸟终结者 1 ---- 认识Zen
• Drupal Zen 基模板菜鸟终结者 2 ---- 增加对Nice Menus 的支持
• Drupal Zen 基模板菜鸟终结者 3 ---- 一些基于Zen的子模板
• Drupal Zen 基模板菜鸟终结者 4 ---- drupalla.com案例讲解

很多设计师已经有开始在drupal.org贡献基于Zen的子模板，我们在此列举一些Zen作品供大家学习。

官方的贡献的Zen 子模板：

• Airy Blue
• Austin
• Cleanstate
• Contented7
• CTI Flex
• Easy Breeze
• GBIF
• Gulmohar
• Interactive Media
• Internet Services
• Multiflex-3
• Nista
• Simpla
• Social Networking Dream
• Splender
• Spooner
• Strix
• The Morning After
• Zen Midnight
• Zen NineSixty
• Zen Twilight

民间的 Zen 子模板：

• http://www.drupalla.com
• http://www.9idz.com
• http://www.openico.com
• http://www.topstriving.com

• Drupal Zen 基模板菜鸟终结者 1 ---- 认识Zen
• Drupal Zen 基模板菜鸟终结者 2 ---- 增加对Nice Menus 的支持
• Drupal Zen 基模板菜鸟终结者 3 ---- 一些基于Zen的子模板
• Drupal Zen 基模板菜鸟终结者 4 ---- drupalla.com案例讲解

Drupalla风格是一个基于Zen的子模板，作者是：分头诗人，大家感觉Drupalla 好看吗？Ok，猪跑啦，好不好看不是重点，本文重心在，如何通过一个真实案例，讲解Zen的应用。

首先我们用photoshop做好界面的风格。

未完待续。。。

• Drupal Zen 基模板菜鸟终结者 1 ---- 认识Zen
• Drupal Zen 基模板菜鸟终结者 2 ---- 增加对Nice Menus 的支持
• Drupal Zen 基模板菜鸟终结者 3 ---- 一些基于Zen的子模板
• Drupal Zen 基模板菜鸟终结者 4 ---- drupalla.com案例讲解