logo

额外区块类型 (EBT) - 全新的布局构建器体验❗

额外区块类型 (EBT) - 样式化、可定制的区块类型:幻灯片、标签页、卡片、手风琴等更多类型。内置背景、DOM Box、JavaScript 插件的设置。立即体验布局构建的未来。

演示 EBT 模块 下载 EBT 模块

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

额外段落类型 (EPT) - 类似的基于 Paragraph 的模块集合。

演示 EPT 模块 滚动

滚动

Drupal CCK + Views:内容类型。通过 Views 输出页面。创建员工图库

15/10/2025, by Ivan

在上一课中,我向您讲解了什么是 node(节点),在 Drupal 中节点是所有内容单元,例如博客记录(Blog entry)、页面(Page)、故事(Story)等。在本课中,我们将创建一个新的内容类型(Content type)——“员工”,该类型将用于生成带照片和简介的员工列表。

首先,让我们看看实现这一功能所需的模块:

Drupal CCK 模块

1. CCKContent Construction Kit)——该模块允许我们创建新的内容类型,并为它们添加各种数据输入字段。

Drupal CCK Views

CCK 模块功能庞大,被拆分为多个子模块,我们需要以下几个:

  1. Content — 用于创建新的内容类型。
  2. Content Permissions — 设置查看和编辑内容类型的权限。
  3. Number — 添加数字字段,例如员工编号。
  4. Option Widgets — 添加选择型字段(checkbox、select、radio button)。
  5. Text — 添加文本输入字段。

其他子模块的功能如下:

  • Content copy — 复制现有内容类型及其字段。
  • FieldGroup — 对输入字段进行分组。由于字段较少,本例不需要。
  • NodeReference — 添加一个引用字段,用于关联到其他节点。例如,如果我们为员工创建了单独的 Page 页面,就可以在此处添加该页面的链接。
  • UserReference — 添加用户引用字段,用于关联到某个注册用户(如该员工在网站上有账户)。

保存模块配置后,Admin Menu 的“内容”部分中应出现 内容类型(Content types) 链接:

drupal admin menu

稍后我们将添加内容类型,现在继续安装接下来的两个模块。

FileField 和 ImageField 模块

2. FileFieldImageField。FileField 添加文件上传字段;ImageField 类似,但仅允许上传图像文件(jpg、gif、png)。我们将使用它们来上传员工照片。

Drupal FileField

保存模块配置,然后安装下一组模块。

ImageCache 模块

3. ImageCacheImageAPI。ImageAPI 是一个用于图像处理的接口库,替代标准的 image.inc。ImageCache 模块可用于为员工照片创建图像预设(preset),从而使不同尺寸的图片在前端显示为统一大小。

Drupal ImageCache

您还可以使用 Lightbox2 模块,使图片点击后在弹窗中放大显示。这在员工较多、缩略图较小时非常有用。安装 Lightbox2 后,ImageCache 会自动为预设添加带 lightbox 效果的版本。

4. Views 模块。该模块是数据库查询构建器,可在无需编写 SQL 的情况下输出数据列表。我们将用它来显示员工列表。

Drupal Views

保存配置。现在一切准备就绪,我们可以创建带照片的员工列表了。

在 Drupal 中创建员工列表

首先创建内容类型“员工”。进入管理菜单:内容 → 内容类型 → 添加内容类型。

Drupal CCK

请注意,“名称”字段用于后台显示,可用俄文填写;而“类型”字段由系统使用,必须用拉丁字母(可含下划线)填写,不可有空格。

Drupal views

现在我们有了“员工”类型。点击“管理字段(Manage fields)”添加输入字段。

在“新字段(New field)”一行填写:

标题:可用中文或俄文填写;
字段名(field name):使用拉丁字母和下划线;
数据类型(Type of data to store):选择 file;
输入控件(widget):选择 image。

Drupal добавить поля

点击保存,然后在字段设置页面直接保存默认设置。

Drupal CCK

此时“员工”类型已有用于上传照片的字段。接着添加两个字段:“姓名(ФИО)”和“关于员工”。

“姓名”字段选择数据类型为 text,控件选择 Text field,并将长度设为 100。

Drupal fields

“关于员工”字段同样选择 text 类型,但控件选择 textarea(多行文本)。在“文本处理”部分选择“过滤文本(用户可选择输入格式)”。

Форматы ввода

关于输入格式的更多内容将在后续课程中讲解。

最终应有以下字段:

Drupal cck

现在我们可以创建第一个员工节点。进入菜单:内容 → 创建内容 → 员工。

Drupal галерея сотрудников

填写员工信息,与创建博客或页面类似,只是现在多了“员工照片”、“姓名”、“关于员工”字段:

сотрудник

您可能会问:“标题”和“内容”字段填什么?实际上“姓名”重复了“标题”,而“关于员工”重复了“内容”,可以灵活使用。我们添加这些字段是为了展示 CCK 的功能,也可继续扩展员工类型,如添加职位、工号、办公时间、办公地点等字段。

保存员工节点后,可以看到每个员工都是一个节点,例如某员工的地址为 node/9。即使启用了 pathauto 模块(生成拉丁或西里尔字母路径),在编辑页面时仍会看到系统路径 node/编号/edit。

现在我们可以创建员工节点,接下来要以漂亮的方式显示他们。首先使用 ImageCache 创建一个预设。进入菜单:结构 → ImageCache → 添加新预设(Add new preset)。

drupal cck

为预设命名时建议包含尺寸(如 100x100)。可选择的操作包括:

  • Add Crop — 裁剪图像。
  • Add Desaturate — 转为灰度。
  • Add Resize — 调整图像为固定尺寸,不保持比例。
  • Add Rotate — 旋转图像。
  • Add Scale — 按比例缩放图像。
  • Add Scale and Crop — 缩放后再裁剪至指定尺寸。
  • Add Sharpen — 锐化图像。

我们选择 Add Scale and Crop,将尺寸设为 100x100 像素,点击保存。

drupal cck

现在使用 Views 模块从数据库提取所有员工节点,并使用刚才的预设显示照片。确保已启用 Views 和 Views UI 模块。

Drupal Views

进入:结构 → Views。系统已预置一些视图(如存档、最新评论、主页等),但默认禁用。

点击“添加(Add)”,创建一个名为 view_sotrudniki 的员工图库视图。

Drupal Views

在 View type 选择“节点(Node)”,因为员工是节点。

点击 Next 进入视图界面。

Drupal CCK

我们主要关注四个部分:Arguments、Sort criteria、Filters、Fields。

  • Arguments(参数) — 允许根据 URL 参数过滤数据,例如 node/17 参数为 17。
  • Fields(字段) — 选择要从数据库中输出的字段。
  • Sort criteria(排序) — 设置结果排序方式。
  • Filters(过滤) — 根据条件筛选结果。

开始配置视图,添加字段:

Поля Views

选择字段:内容:姓名(ФИО)、内容:关于员工、内容:员工照片。

Drupal add fields

编辑字段设置时,“关于员工”字段保持默认,“姓名”字段取消标题显示:

Views title

“员工照片”字段同样取消标题,并选择我们创建的 100x100 预设:

Drupal format

图片显示格式:

  • 100x100 - image:纯图片。
  • 100x100 - image linked to node:图片链接到员工节点。
  • 100x100 - image linked to image:图片链接到原图。

如果启用了 Lightbox2,可选择带 lightbox 效果的预设:

lightbox2

点击“应用(Apply)”后,可在预览区看到页面效果:

drupal сотрудник

接下来添加过滤条件:

Drupal фильтры

选择内容类型 = 员工,并仅显示已发布内容:

Drupal CCK

修改字段显示顺序:

Drupal cck imagecache

右侧点击“字段”按钮调整顺序,多余字段可删除。保存设置。

再添加几个员工节点,观察视图显示效果。选择“页面(Page)”显示类型并点击“添加显示(Add display)”:

Views add display

为视图设置访问路径:

Drupal cck views

保存视图。现在该视图可通过网址 имя_сайта/sotrudniki 访问。

在下一课中,我们将继续学习 Views 模块,将员工列表显示在块中并进行进一步优化。