Views 主题化：修改 view.tpl.php 模板（字段、行、区块、页面），并集成 jQuery 插件 EasySlider

在本文中，我们将了解 Drupal 的查询构建器 —— 模块 Views (http://drupal.org/project/views)。Views 允许以可视化方式输出各种内容类型的字段、评论、分类术语、用户信息以及其他来自数据库的数据。该模块配备了图形化界面，可通过鼠标轻松创建数据库查询。

注意！ 如果您希望在一小时内立即使用 EasySlider，我强烈建议直接使用对应模块。本文主要用于讲解 Views 模板结构及其主题化（theming）原理。稍后若要自定义 EasySlider 的外观，还需修改 CSS。

当我们配置好所需字段后，需要按照自己的要求排版。这可以通过模板文件实现。默认情况下，这些模板位于 theme 文件夹中。

接下来我们将为 Views 输出的数据配置 jQuery 插件 EasySlider。当然，已有与 Views 集成的 EasySlider 模块，您可以在此下载：http://drupal.org/project/easySlider

如果只需显示图像滑块，直接安装该模块即可。而本文将教您如何手动操作 Views 模板（template）。

开始前请安装以下模块：Views、CCK、Imagecache，并下载 EasySlider 插件文件（可在 此处 或其他网站下载）。稍后我们会讲解如何将插件集成到 Drupal 主题中。

步骤 1. 创建一个新的内容类型（Content Type）。

为该内容类型添加一个用于上传图片的新字段，然后保存。您还可以调整该字段在表单中的顺序。

在字段设置中，允许上传不限数量的图片，并为每张图片添加描述字段。

步骤 2. 创建一个内容节点（node），类型为“横幅（Banner）”，并上传几张图片以供展示。

步骤 3. 创建一个图片预设（preset），例如 200x200 像素，当然您也可以根据需要设置其他尺寸。

为该预设添加 “Scale and crop（缩放并裁剪）” 处理动作：

步骤 4. 现在通过 Views 模块以列表形式输出这些图片，并创建一个区块（Block）。

添加一个新的 View：

添加字段 “图片（Image）”。

设置如下：关闭字段分组和标题，选择刚创建的图片预设尺寸。

过滤条件：
内容：已发布（是）
内容类型：横幅（Banner）

基本设置（Basic settings）：
样式（Style）：HTML List

添加一个 “Block” 显示。

您将获得如下视图：

预览中应显示您上传的横幅图片。

步骤 5. 将该区块添加到某个区域并查看页面效果。

嗯…… 还不像幻灯片。接下来我们将安装 EasySlider。

步骤 6. 解压 EasySlider 文件。插件包中包含多个示例文件，我们选择 2.html 示例。将其中的 CSS 复制到主题的 style.css，并将插件 images 文件夹中的图片复制到主题的 images 文件夹中。

步骤 7. 将 js/easySlider1.5.js 文件复制到当前主题的 js 文件夹中，并在主题的 .info 文件中添加：

scripts[] = js/easySlider1.5.js

清理缓存后，EasySlider 应已加载：

打开该文件可以看到对 HTML 结构的要求。接下来我们使用 Firebug、Dragonfly 或 Chrome 的 DOM Inspector 查看我们的区块结构。

我们发现 Views 自动生成了大量 div 标签，它们在此处并不必要，我们需要将其去除。

步骤 8. 在 View 编辑界面中点击 “Theme: information”，系统会显示可重写的模板列表。

粗体表示默认使用的模板，这些文件位于 Views 模块的 theme 文件夹中。要重写模板，请在主题中创建相同名称的文件，例如 views-view-fields--view-banner.tpl.php。

查看默认模板 views-view-fields.tpl.php 内容：

文件顶部是注释，主体部分通过 foreach 循环输出每条记录。我们可以去掉不需要的 $field->separator、$field->label、$field->inline_html 等元素，以生成更干净的代码。保存模板后清除缓存并重新查看页面。

现在 li 标签已紧贴图片输出，只需再去除 span 标签即可。

最终简化模板如下：

保存并刷新后，输出结构将更加整洁：

接下来，为了去除多余的 <div class="view-content"><div class="item-list">，我们创建模板 views-view--view-banner.tpl.php，并复制自 views-view.tpl.php。

保留必要部分后效果如下：

同理，我们创建 views-view-list--view-banner.tpl.php 替换默认的 views-view-list.tpl.php 以去除 <div class="item-list"></div>。

最后，在 block.tpl.php 中添加自定义条件以输出 id="slider" 的包裹容器：

变量 $block->delta 根据模块不同而变化，可通过查看调试信息确定对应块。

清理缓存后，页面结构应为：

结构：div#slider → ul → li。

现在只需添加一段 JavaScript 初始化 EasySlider：

可以直接在 page.tpl.php 中编写，或放入独立文件（如 js/custom.js）。

EasySlider 启动后，别忘了通过 CSS 微调显示效果：

当然，使用现成模块来实现幻灯片或轮播更简单。但当没有对应模块而只有 jQuery 插件时，我们完全可以通过这种方式手动集成。