主题化操作:装扮Garland主题
现在,为了练习,我们把本章学习的内容用来自定义一个现有的主题。我们将从一个默认主题开始,然后运用系统提供的各种选项来把一个现成的主题剪裁装扮一番。
对于下面的例子,假定我们有一个假想客户,名叫“Fluid Carbon”,他们想建一个意大利跑车活动的粉丝网站。这是一个爱好者网站,因此这个主人的预算很有限,不打算付钱做设计或者组件开发,预算限制逼迫我们基本上只能把Drupal拿过来就用了,而不做什么修改了。
下面是用户的需求……
外观:
- 不固定的3栏布局
- 配色方案匹配用户现有的个性特征
- 必须在页头使用用户的Logo
- 用户希望一个简洁的外观——不要太杂乱
- 右边栏中垂直放置网站主导航
功能:
- 给网站编辑提供一个博客(只开一个)
- 一个论坛(仅一个)
- 能够显示第三方RSS聚合内容
- 投票
- 联络表单
- 支持评论
- 按钮广告
- 站点搜索
用户的需求正好在默认Drupal的能力范围之内,只有一个例外。要在Drupal之外去处理的唯一事情是添加按钮广告。要处理按钮广告,通常,你可能希望使用Drupal网站提供的众多广告管理扩展中的某一个,但是因为客户没多少预算,我们只好使用最基础的解决方案。
下面是我们需要完成的主要任务:
- 修改主题颜色匹配用户特征
- 配置主题满足用户需求
- 使用客户自己的Logo
- 启用必要的模块
- 指派区块形成3栏布局
- 设置区块可见性
- 创建菜单项
- 设置用户权限
在这个过程中,我们还要看看几个小的调整以帮助站点的可用性,以及添加一些变化。用户将自己完善内容,因此为测试用,我们将只添加些模拟内容。
我们假定给本次练习全新安装了Drupal。开始前,来到主题管理器 (Administer | Site building | Themes),点击Garland主题右边的configure按钮。Garland是个流状设计,支持2栏或3栏,比较干净简单,符合用户的基本愿望。Garland也支持Color(颜色)模块,这使我们修改主题颜色方案来匹配客户现有的Logo变得简单了。
设置配色方案
首先,我们来处理一下配色方案。在配置页面,从Color Set(色集)后面的组合下拉框中选择Custom(自定义),然后根据下面插图输入值:

Color模块让你可以在管理界面设置主题颜色,边修改,预览图也跟着更新
设置页面元素(Toggle Display设置)
接下来,往下滚动配置界面来修改Toggle display(开关显示项)设置以启用Logo选项。我们想使用Primary Links来装载本设计中导航系统中的部分项,因此也把这个选项选上。把其他所有我们不想用来搞乱我们页面的东西都取消掉。

客户需要的页面元素
上传Logo
下一步,主题配置页面继续往下走,我们要利用Logo image setting来上传客户原有的logo。取消Use the default logo,然后点Browse(浏览)按钮来找到你本机上的客户logo(提示:我制作了一个非常简单的logo供我们例子中使用)。
客户的logo上传了,注意logo的路径显示出来了供你参考
客户自己没有快捷图标,他们的预算也不足以创建一个,因此我们将结束主题配置管理。让我们保存前面所做工作,离开这个页面,然后来到全局配置页面(Global Configuration)。
全局站点信息(Global Site Information)
来到 Administer | Site configuration | Site information。在这个页面中,输入站点名称,口号 (尽管你不打算让主题显示口号,但它还能被系统用于多种目的,包括在很多的页面标题中!),以及页脚内容,根据插图输入。注意看页脚里面的信息,我已经指定一个指向联络表的地址,尽管我们还没有设立联络表单。我们可以这么自信的做是因为Drupal默认的联系表单一向都位于/contact。修改完成后,保存然后退出。

设立页脚和页面标题所需要的基本网站信息
启用模块
接下来,我们启用需要用到的模块。来到模块管理器(Administer |Site building | Modules),按照下图设置:
例子中要用的模块
管理区块
启用模块之后,就得处理区块了。来到区块管理页面(Administer | Site building | Blocks),在页面顶部(位于Blocks一词下面)点击Garland链接进入对Garland主题的相应设置。首先,客户要求是三栏布局右边是导航栏,因此我们先来把Navigation(导航)区块从Left Sidebar(左边栏)移到Right Sidebar(右边栏)。
接着,把User login(用户登录)和Syndicate(同步发表)区块放到右边栏中,还有Search form(搜索框)、另外再激活一个Who's online(谁在线)区块,都放到右边栏来(最后这一项没在需求清单中,如果客户不喜欢,我们可以很简单的禁用它)。为了减少杂乱,把下面几个区块的标题隐藏掉:Navigation, User login, Search,和Syndicate。
要隐藏区块的标题,只要到每个区块的配置页面,在页面顶部的区块标题栏中输入<none> 即可。
为平衡我们的3栏布局,我们把下面的区块都放到左边栏来:Most recent poll(最新投票), Recent comments(最新评论), Recent blog posts(最新博客), 及Active forum topics(活跃话题)。
要启用一个区块,只需要把它指派到一个可用的区域就可以了。
要在布局中将位置安排妥当,你可以将每个区域中的区块顺序多调整几次看看。

显示区块是否被启用并指派到一个区域。你可在区域中拖拽区块名称前的十字架来调整区块的顺序。
添加虚拟内容和菜单
在这个阶段,我们该创建一些基本的容器和素材来供我们创建菜单项时使用。对于我们的客户,我们需要提供一个联络表单和一个论坛。
设置全站联络表单,请到 Administer | Site building | Contact form创建一个附带必要信息的联络表单。
下面,创建一个演示用的论坛供开发中使用。来到Administer | Content management | Forums创建一个论坛。
我们接着开始设立导航链接,以便我们能够在站内自由移动。在菜单管理中 (Administer | Site building | Menus),我想同时使用Primary Links(主链接)和Navigation(导航)。
在Primary Links菜单中,点Add item添加一个新的菜单项,将Menu link title(菜单链接名称)设为“Home”,Path(路径)链接至<front>,这个将链接到首页。接着添加另外一个菜单项将路径链接至contact——这将自动链接至我们的联络表单。
在Navigation菜单中,我们将启用并且重命名Forums(论坛)链接。在菜单管理页面,当你点开导航菜单时,你会发现导航菜单管理界面与我们此前看到的主链接菜单管理是不一样的。主链接菜单要求我们自己创建自己要用的任何链接,而导航菜单则预置了不少菜单项。我们在本站将利用这一点,只一个地方例外其他全部用默认设置。点Forums菜单项右边的Edit链接,将其Menu link title修改为“The Forum”,再选中Enabled选择框。点Save保存。我们现在就有链接到论坛了。
下一步,我们来加载一点演示数据方便我们更加容易定稿站点和测试。我将到Create Content | Page来创建一个虚拟首页。我将使用常用的Lorem文本(通常用来做填充文本,一般以“Lorem ipsum dolor.....”开头而因此得名)和一张我手里的法拉利图来让页面变得生动(做演示用,你可以随意填充内容)。在Publishing(发布)选项中选定Promoted to front page(推送到首页)。
现在我们有了一首页,我们来给这个页面填充些几条博客、评论、投票和论坛话题——所有这些都只是为了检验和测试区块的运行。
设置访问权限
现在我们有些演示内容了,我们要让所有有权限的人来看到它。这意味着我们要来核查站点的权限设置。请到Administer | User management | Permissions,给anonymous users(访客)添加下列额外访问权限:
- Access news feeds(访问新闻聚合)
- Access comments(查看评论)
- Post comments(发表评论)
- Access site-wide contact form(访问全站联络表单)
- Create forum topics(论坛发帖)
- Edit own forum topics(编辑自己的论坛帖子)
- Vote on polls(投票)
- Search content(搜索内容)
- Use advanced search(使用高级搜索)
自建区块
至此,网站各项都很齐备已经接近它的最终形式了。客户愿望单上还留下的一个问题是按钮广告。对于这个,由于预算问题,他准备采用技术含量较低的解决方案。我准备创建一个区块,然后将图片和链接网址直接编码到区块中去。
来到区块管理页,选择Add block,输入标题和说明文字,然后使用HTML来指定图片和图片所要链接的地址。我们还要给新建的区块设定可见性。在User specific visibility settings(用户可见性设置)栏下,选择 Users cannot control whether or not they
see this block(用户不能控制自己看还是不看这个区块)。在 Page specific visibility settings(页面可见性设置)中,选择第一项,Show on every page except the listed pages(在除下列页面之外的所有页面显示)。然后在Pages文本输入框中输入两行,分别是:admin和admin/*。第一行命令禁止区块在管理主页显示,第二行禁止在其他管理页面显示。
添加一个新的区块(非常简单)来放置用户的按钮广告图片。注意,这里的输入格式是Full HTML,为的是在区块中更灵活的使用代码。
最后,我们来到区块管理器中,将新添的区块指派到右边栏,因为现有布局中两个边栏看起来还是不平衡。
设置区块可见性
这里剩下的最后一件事就是按照常识性的做法去配置剩下两个区块的可见性。如下:
1、将用户登录区块只在首页显示
2、将最新博客显示于整个论坛
第一个,用户登录区块。来到区块管理器,点用户登录(User Login)区块后面的Configure链接,将页面可见性设置修改为第二个选项: Show on only the listed pages(只在下列页面显示),在页面文本框中输入<front>,这就将这个区块的显示限定于首页了。
为将最新博客的显示贯穿整个论坛而不在别的地方出现,我们需要添加一小段逻辑来帮助区块辨别哪些页面是属于论坛的。在区块配置页面,我们需要选中第三个选项,Show if the following PHP code returns true(如果下列PHP代码返回的值为真的话则显示),然后将下列代码放入页面文本框中:
<?php
if (arg(0) == 'forum') {
return TRUE;
}
if (arg(0) == 'node' && ctype_digit(arg(1))) {
$node = node_load(arg(1));
if ($node->type == 'forum') {
return TRUE;
}
}
return FALSE;
?> 经过前面的这些修改,我们现在生成的站点满足了我们假想客户的基本需求。对比一下新建的Fluid Carbon首页与默认的Garland首页有何不同。





Comments
21 January 2012
15 weeks 4 days
awesome
Post new comment