加载中...
Drupal Zen 基模板菜鸟终结者
发表于:2013-01-20 | 分类: 网络应用 drupal
字数统计: 2.4k | 阅读时长: 9分钟 | 阅读量:

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文档比较简洁。只有下面几句:

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

上一篇:
电脑上模拟Android之Android-x86 - Porting Android to x86
下一篇:
最大僵尸网络横行 百万安卓手机沦为“肉鸡”
本文目录
本文目录