Drupal Zen 基模板菜鸟终结者.doc

Drupal Zen 基模板菜鸟终结者 1 - 认识Zenzen 主题是 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 - 案例讲解。zen下载地址：/project/zenzen 使用英文手册：/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 ：/project/zen2，解压缩，复制到drupal themes下面，drupal 模板可以放在三个地方： sites/all/themes 当安装了多站点的时候，所有站点都能看到这个目录下的模板并且应用。 sites/default/themes 当安装了多站点的时候，只有默认的站点（如）能看到这个目录下的模板并且应用。 sites//themes 当安装了多站点的时候，只有 这个站点才能看到这个目录下的模板并且应用。 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 为（注，文件名得与文件夹名一致），打开 文件，将 name = Zen Sub-theme Starter Kit改为 name = 我的第一个模板，description = Read. 改为 description = 我的第一个基于Zen的子模板. 。3，选择布局方式。zen子模板默认布局是固定宽度布局方式，如果你想自适应宽度布局方式，可以将 文件中“stylesheetsall = css/layout-fixed.css”改为“stylesheetsall = css/layout-liquid.css”（注：info文件中stylesheets 是模板调用的css文件），当然，如果你习惯了一些不同的css框架，如Blueprint或者 大家熟识的960网格，你也可以把“stylesheetsall = 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 模板文件，这些文件都能进行如上操作。/node/190815Zen样式风格-打开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 或者在 文件去掉 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网格，你也可以把“stylesheetsall = css/layout-fixed.css”替换成你所选的布局样式（注：info文件的修改，需要后台清空缓存才能生效）。page-backgrounds.css:分别对网站的外层div增加背景类的样式操作。默认这个css文档比较简洁。只有下面几句：1234567891011121314151617181920212223body #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:节点的样式。主要针对模板 ments.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，Header2，Content3，Navbar4，Left sidebar5，Right sidebar6，FooterDrupal Zen 基模板菜鸟终结者 2 - 增加对Nice Menus 的支持Nice Menus是一个非常有好的菜单模块。用它可以轻松实现菜单下拉与折叠。Zen 默认是直接通过blocks调用菜单，而Nice Menus 能够非常轻易的配置成一个block，默认的zen子模板只需要一些小修改，就能很好的应用Nice Menus。第一步，复制Zen 的templates文件夹到你的zen子模板下方。第二步，打开page.tpl.php搜索id 为 navigation 的div，找到如下代码：123456789101112131415 $main_menu, attributes = array( id = main-menu, class = array(links, inline, clearfix), ), heading = array( text = t(Main menu), level = h2, class = array(element-invisible), ), ); ?我们把它替换成：12345678910111213141516171819202122232425 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区域时候，就能做隐藏，而不至于导致变