Drupal 7 开发内部培训资料, 分头诗人

Drupal Zen 基模板菜鸟终结者 1 ---- 认识Zen

猪跑啦独家原创专稿,欢迎您转载本文,转载请注明来源。

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

 

系列文章:

 

评论

hui2011的头像

在drupal 7中,zen主题已经演变为两大系列,分别是7.x-3.x和7.x-5.x,后者是基于html5的最新版本!

大漠的头像

是一个不错的主题

tomming的头像

照做了,显示语法错误,基模板包含很多函数在zen的文件夹下的,而不是在子包里。