Drupal 7 最棒的新特性之一是，它现在可以更轻松地自定义您的网站内容。在 Drupal 6 中，您通常需要使用 CCK（内容构建套件）模块来精细控制内容自定义，但这在 Drupal 7 中已整合到核心功能中。Drupal 7 现在是一个真正的内容管理框架 (CMF)。

Drupal 7：一切都与字段有关

在 Drupal 7 中自定义内容时，涉及到创建或修改通常被称为内容类型的东西。Drupal 7 附带两个默认内容类型：“页面”和“文章”。在构建网站时，您通常需要其他内容类型。这些可能包括活动、新闻稿、常见问题解答、员工、照片库等等。是什么使这些内容类型独一无二呢？这一切都与您添加到内容类型的字段有关。

字段是内容类型的属性，这些属性是与您的内容相关联的信息类型。如果您有一个“活动”内容类型，您可能需要添加日期、地点和链接属性。这些都可以通过使用字段来实现。

主题和节点

Drupal 7 节点只是一个单独的页面，其内容使用特定的内容类型呈现，其中包含您的所有字段。字段非常灵活，并且在显示和应用主题方面有许多可能性，具体取决于您想要做什么。关于 Drupal 的主题，是代码和内容的展示层，实现主题的方式有很多种，从 Drupal 管理 UI 中的一些简单更改到更复杂的自定义节点模板（例如，node--custom.tpl.php）。在本教程中，我使用 Display Suite 模块为我们的节点应用主题。它是一个可视化界面，允许自定义布局，而无需真正了解太多代码。还有其他方法可以为节点应用主题，包括自定义节点模板和 Panels 模块。

Drupal 7 附带基本默认字段，例如文本、长文本、文件、图像和列表。还可以通过贡献 (contrib) 模块添加许多其他字段类型。

管理和编辑

要深入了解您网站上现有的内容类型和字段，请导航到 /admin/structure/types，或使用管理工具栏：结构→内容类型。图 1 显示了浏览器中 Drupal 管理 UI 顶部的管理工具栏。您将经常使用它来导航管理区域以执行各种任务。这假设您拥有 Drupal 网站的管理权限，或者至少已被管理员授予查看和使用工具栏的适当权限。

图 1. Drupal 7 管理员工具栏

在内容类型登陆页面上，如图 2 所示，您可以看到现有的类型，您可以在此处添加新的类型。

图 2. 内容类型登陆页面是您可以编辑内容类型并管理其字段和显示的位置。

您还可以从此页面编辑内容类型、添加和编辑字段以及管理其显示。图 3 显示了现有字段和一个选择菜单，用于为内容类型添加新字段。

图 3. 您可以管理单个内容类型的现有字段，并使用选择菜单添加新字段。

所需工具

现在您已经基本了解了内容类型的工作原理，让我向您展示如何构建一个新的内容类型并应用主题。对于此示例，让我们创建并主题化一个“活动”内容类型。您将需要一些来自 drupal.org 的其他贡献模块。理想情况下，为了跟随本教程，您需要全新安装一个 Drupal 7 网站，并下载 Professional Theme 并将其设置为默认主题。

如果您不熟悉如何安装 Drupal，其实并不难，您可以在 LAMP 环境中安装它。如果您已经拥有带有 LAMP 的本地开发机器，那么只需创建一个新的 MySQL 数据库，然后按照 Drupal 的点击式 GUI 安装程序进行操作即可。本文末尾的“资源”部分中提供了一些 Drupal 基本安装信息的链接。请注意，Drupal 有它自己的完整命令行实用程序，称为 drush，您可以使用它来安装核心和下载贡献模块，但为了本教程的目的，我将使用 Drupal 管理 UI。如果您真的决定深入研究 Drupal，drush 可以节省大量时间。

草图

在创建新的内容类型时，我喜欢做一个快速草图，以便更好地了解最终产品的外观。图 4 显示了我为我的“活动”内容类型设计的效果。

图 4. “活动”页面外观效果草图。

必要的模块

草图有助于确定我将使用的模块。您可以在“资源”部分找到这些模块的链接。所需的贡献模块和主题 (contrib) 如下：

• Date
• Get Locations
• Geocoder
• GeoPHP
• Chaos tool suite (ctools)
• Link
• Libraries
• Display Suite
• Professional Theme

核心字段—Drupal 7 自带（无需下载）

• 图像
• 概述（长文本/文本区域）

现在您已经知道要使用哪些模块和主题来构建您的“活动”内容类型，请从 drupal.org 下载最新的稳定推荐版本（在其项目页面上以绿色突出显示）。推荐版本应该足够了，但有时您可能会遇到错误，并且需要使用最新的dev版本。图 5 显示了 drupal.org 上贡献模块的版本信息示例。

图 5. 模块的最新推荐版本以绿色突出显示（在本例中为 7.x-1.5）。Dev 版本为红色，新的 2.x beta 分支为黄色。

下载模块，解压它们，并将生成的文件夹放在 Drupal 根目录下的 /sites/all/modules 文件夹中。虽然您会在根目录中看到一个 Modules 文件夹，但切勿将第三方模块添加到此文件夹中；这是一个核心文件夹，仅在核心 Drupal 版本发布时才会更新或更改。同样，下载 Professional Theme，解压它，并将其放在 /sites/all/themes 中。

您还需要从 Get Locations 项目页面下载一些地图标记。getlocations-markers.tar.gz 文件应该足够了。解压此文件，并将其放在 sites/all/libraries/getlocations/markers 中。很可能您需要在新的 Drupal 安装中创建 Libraries 文件夹，但如果它已经存在，只需在其中创建一个名为 getlocations 的新文件夹，然后将新解压的 Markers 文件夹放在其中。

激活贡献模块和主题

转到 Drupal 模块管理页面，位于 /admin/modules，或从管理工具栏中单击“模块”。选中“Get Locations”、“Getlocations Fields”、“geoPHP”、“Geocoder”、“Libraries”、“Chaos tools”、“Link”、“Date”、“Date API”、“Date popup”和“Display Suite”的复选框，然后单击“保存配置”。

使用管理工具栏，单击“外观”，然后激活“禁用主题”下列出的 Professional Theme。使用“启用并设置为默认”设置，这将启用它并将其置于“已启用主题”的顶部。

获取 Google API v3 密钥

您需要添加一个 Google Maps JavaScript API v3 密钥来显示活动地点的地图。转到 Google API 控制台，并使用您的 Google 帐户登录（或者如果您还没有 Google 帐户，请创建一个）。请参阅“资源”中的链接。登录后，生成一个新的密钥，或使用“API 访问”选项卡中的现有密钥。返回 Drupal，使用管理工具栏转到“配置”，然后在“Web 服务”下，单击“Get Locations”。展开“Google API 密钥”，输入您的密钥，然后保存配置。

设置您的区域设置并创建自定义日期和时间格式

现在是设置您网站的区域设置的好时机。从工具栏中，转到“配置”→“区域和语言”→“区域设置”或 admin/config/regional/settings。您的默认时区很可能已经设置好了，但最好确认或调整它。接受此处的所有其他默认设置并保存。此外，从“区域和语言”中，单击“日期和时间”，位于 admin/config/regional/date-time，然后单击“格式”选项卡。让我们创建一个自定义日期格式。这非常简单，您将使用 PHP 日期手册中的标准代码（请参阅“资源”）。在“日期和时间格式”页面上，单击“添加格式”。在“格式字符串”文本框中，复制并粘贴（或键入）此字符串

l F j, Y-  g:i a T

您会看到它立即呈现为一个格式精美的日期，如下所示

Sunday August 12, 2012- 11:00 am PDT

让我们为这个新格式命名。返回您刚刚所在的“日期和时间”主页面，然后单击“添加日期类型”。让我们将其命名为“带时区的完整日期”作为日期类型。对于“日期格式”，从选择菜单中选择，您刚刚创建的新格式很可能将是菜单中的最后一项。选择该格式，然后保存（“添加日期类型”）。新的日期类型已保存（您稍后将引用它）。

创建图像样式

对于活动图像，您需要一个自定义样式。使用管理工具栏，单击“配置”，然后单击“媒体”→“图像样式”或转到 /admin/config/media/image-styles。单击“添加样式”，键入 event_photo，然后保存。在“效果”下，在“选择新效果”选择列表中选择“缩放”。对于宽度，选择 375，然后保存（“添加效果”）。新效果已保存，您稍后将引用它。

构建

现在，从管理工具栏转到“结构”→“内容类型”，然后单击“添加内容类型”。现在您将看到一个新页面，其中包含选项。您几乎可以接受此处的默认设置，但让我们稍微自定义一下

• 名称：活动。
• 描述：用于显示公司活动的自定义内容类型。
• 发布选项：取消选中“提升到首页”。
• 显示设置：取消选中“显示作者和日期信息”。
• 评论设置：在新内容的“默认评论设置”下设置为“隐藏”。
• 菜单设置：取消选中“主菜单”。

保存内容类型。返回内容类型登陆页面，您现在将看到“活动”（机器名称：event），以及“基本页面”和“文章”，如图 6 所示。

图 6. 新添加的“活动”内容类型

添加字段

现在您已准备好添加/编辑您的自定义活动字段。单击“活动”的“管理字段”。您将看到“正文”字段已经存在。单击“正文”进行编辑，只需将“标签”更改为“活动概述”，然后保存设置。

添加日期字段

1. 在“活动”→“管理字段”下的“添加新字段”中，键入 Event Date。
2. 类型 — 日期 (ISO 格式)。
3. 小部件 — 弹出日历。
4. 单击“保存”。
5. 现在在“字段设置”上，接受默认设置并再次保存。
6. 在下一个屏幕上，选中“必填字段”。
7. 单击“更多设置和值”。
8. 现在对于“日期条目选项”，从选择列表中选择一种格式。理想情况下，选择一种显示日、月、年和时间以及所需时间格式（无论是 24 小时制还是上午/下午）的格式——例如，2012 年 8 月 10 日 - 下午 3:30:13。

添加地点字段

1. 在“活动”→“管理字段”下的“添加新字段”中，键入“活动地点”。
2. 类型 — 地理位置字段。
3. 小部件 — Geocoder。
4. 保存，并在下一个屏幕上的“搜索选项”中，选择“无搜索框”。
5. 保存，并在下一个屏幕上，选中“必填字段”。
6. 接受此处的所有其他默认设置，然后再次保存。

添加链接字段

1. 在“活动”→“管理字段”下的“添加新字段”中，键入 Event Link。
2. 类型 — 链接。
3. 小部件 — 链接。
4. 保存，并在下一个屏幕上，只需再次保存。
5. 在下一个屏幕上，设为必填并选择“必填标题”，然后保存。

添加图像字段

1. 在“活动”→“管理字段”下的“添加新字段”中，键入 Event Image。
2. 类型 — 图像。
3. 小部件 — 图像。
4. 保存，接受默认设置，然后再次保存。
5. 在下一个屏幕上，选中“必填字段”。
6. 选中“Alt”和“Title”字段，然后保存。

图 7 显示了完成的“管理字段”页面。请注意，您可以使用小的 + 图标拖动字段以重新排序它们，但是当您这样做时，您需要再次保存页面。

图 7. “活动”的完成字段页面。您可以通过拖动标签下的小 + 图标来重新排序字段，但在执行此操作后必须保存页面。

正如您在创建所有这些字段时可能已经注意到的那样，还有许多其他自定义选项，并且在大多数情况下，您接受了许多默认设置。但是，随着您更深入地了解 Drupal 网站构建，您将需要探索这些选项并进行实验。

管理您的显示

现在您只需要使用“活动”内容类型的“管理显示”选项卡进行一些主题设置。这将是一个分为两部分的过程。第一部分是为您的显示获取一些合理的默认设置。使用管理工具栏，返回“结构”→“内容类型”→“活动”→“管理显示”。使用“选择列表和拖动”图标，使您的布局看起来像图 8。请注意最右侧的齿轮图标；您可以单击这些图标来微调您的设置，但始终记住在进行任何更改后选择“更新”，然后保存页面。您会注意到，对于“日期”和“活动照片”，您现在拥有先前创建的相应格式和样式。

图 8. 调整标签和设置后的配置布局

让我们添加 Display Suite 布局；这就是所有魔力发生的地方。在“管理显示”的底部，找到名为“事件默认布局”的选项卡。单击，然后使用“选择布局”列表，选择“两列”，然后保存页面。您会注意到您有一个更新的 UI，显示“右”、“左”和“禁用”。所有字段默认为“禁用”，因此请将字段放置在您希望它们在新两列节点布局中的位置。您可以将字段拖到右侧或左侧区域，也可以使用“区域”选择列表进行选择。我发现后者更容易。图 9 显示了重新定位字段并保存页面后的布局。

图 9. 完成的 Display Suite 布局

将 CSS 添加到主题

默认情况下，两列 Display Suite 布局是 50% 分割的，但让我们向主题添加一些 CSS 以镜像线框图。打开 styles.css，位于 sites/all/themes/professional_theme/，并在文件末尾的最后一个右花括号之后添加此代码。您会注意到此 CSS 文件中包含媒体查询，为了本演示的目的，让我们在任何媒体查询之后添加我们的样式，但您也可以按媒体查询主题化此内容

.group-right { 
width: 36%; 
padding-left: 2%; 
float: right; 
}

.group-left { 
width: 62%; 
}

.field-name-field-event-image { 
margin-top: 20px; 
} 
.getlocations_map_canvas { 
max-width: 100%; 
}

从管理工具栏中，单击“内容”，然后选择“添加内容”，然后选择“活动”。您现在将看到一个空白节点创建表单。填写标题，选择您的日期，并填写一些概述文本。接下来，为您的活动选择一个地址，一旦填写完毕，单击“地理编码此地址”按钮，您下方的小地图将以您的地址为中心重新定位。最后，上传图像，选择链接/标题，然后保存您的节点。图 10 显示了最终主题化布局。

图 10. “活动”内容类型的最终主题化布局

您可以使用 Drupal 7 中的自定义内容类型和主题做更多的事情；这只是冰山一角。为了增强内容编辑器的体验，一个不错的补充是在“概述文本”区域添加 WYSIWYG 编辑器。如果您想更深入地了解代码，您可以放弃 Display Suite，并在您的主题文件夹中添加一个 node--event.tpl.php 文件，并单独主题化字段。

资源

Professional Theme（演示中显示的的前端主题）：http://drupal.org/project/professional_theme

Date：http://drupal.org/project/date

Get Locations：http://drupal.org/project/getlocations

Link：http://drupal.org/project/link

Geocoder：http://drupal.org/project/geocoder

geoPHP：http://drupal.org/project/geophp

Display Suite：http://drupal.org/project/ds

Libraries API：http://drupal.org/project/libraries

Get Locations 文档：http://drupalcode.org/project/getlocations.git/blob/refs/heads/7.x-1.x:/README.txt

安装 Drupal 7：http://drupal.org/documentation/install

安装教程视频：http://learnbythedrop.com/drop/173

登录/创建免费 Google 帐户：https://code.google.com/apis/console

Google Maps API 密钥 (v.3.0)：https://developers.google.com/maps/documentation/javascript/tutorial#api_key

Drupal 不是 CMS：http://www.palantir.net/blog/drupal-not-cms