Drupal 7 : 字段 视图 关系（上） 宁皓网视频 有大用

03-01)

Views 模块，也就是视图模块，是在 Drupal 社区里最受欢迎的模块之一，你可以使用它来创建内容的列表页面，区块，还有很多其它的东西。

下面我们来看一下，在 views 模块的页面里，复制一下 views 模块的下载链接 … 回到我们的 Drupal 网站 … 点击 模块，安装新模块 …

想要使用 views ，我们还要安装一个 ctools 模块 … 打开 ctools 模块的页面 … 复制下载的链接 …

然后在模块的列表页面里… 勾选一下 views 还有 views ui ，点击 保存设置，继续 …

下面我们可以导入视图模块的中文翻译… 点击配置… 翻译…. 导入 … 在课程资料包的 03-01 里面，找到 视图模块的中文翻译文件…

下面我们打开视力的配置界面去看一下… 点击 结构，视图...

我们来创建一个新的视图，点击 添加视图 ，输入 视图名称，我们可以先输入一个视图的机读名称，movie ，点击 机读名称 后面的 编辑，然后再重新定义一下视图的名称，输入 电影 。

勾选下面的 描述，可以输入一小段文字来描述一下想要创建的这个视图。

在下面我们要选择这个视图要显示的东西，点击 显示 后面的 下拉菜单，你可以选择 内容，评论，用户等等，我们要创建一个显示文章内容的视图，所以这里选择 内容。

在 类型 这里，会列出所有的内容类型，我们选择 电影 这个内容类型。

后面还可以选择排序的标准…

在下面，默认勾选了 生成一个页面，使用这个选项，我们可以快速的设置并生成一个与内容相关的页面。

最后，还有一个 生成一个区块 的选项，勾选之后，可以快速的设置并生成一个内容的区块。

这些设置我们可以通过视图的详细设置界面去修改，这里我们先去掉 生成一个页面 这个选项，然后到视图的详细设置界面去看一下。

点击 继续编辑

视图的详细设置

现在你会看到视图的详细界面设置界面，在这里，你可以修改视图的显示，也可以创建新的显示，在一个视图里可以包含多个显示。

视图的显示有不同的类型，比如，页面，区块等等，我们还可以安装模块来扩展视图的显示类型。

下面我们来创建一个页面类型的视图显示，先找找感觉。

当前我们正在修改的是视图的 主 显示，它相当于是当前这个视图里面包含的所有显示的默认设置。你可以先修改它的设置，然后我们可以再去创建新的显示，在新的显示里，会继承 主 显示里的设置，也可以覆盖 主 显示里的设置。

点击 添加，选择想要添加的视图显示的类型，这里我们选择 添加页面，注意当我们添加了自己的显示以后，视图的主显示就会自动隐藏起来，新添加的这个页面显示会使用我们在主显示里的设置。

我们先来修改一个新创建的这个显示的名称，点击 显示名称 后面的链接，在 名称 的下面，输入显示的名称，电影页面，在 描述 这里，我们再具体的描述一下这个显示的作用， 显示所有电影内容的页面。

点击 应用

在 字段 这里，我们可以决定在这个内容列表页面都显示内容的哪一些字段。

目前这里只有一个标题字段，也就是在这我们创建的这个视图页面里，只会显示出内容的标题。

下面我们可以给这个页面一个路径，然后去预览一下这个页面。

在 页面设置 这里，点击 路径 后面的链接，输入这个页面的路径，这个路径就是访问这个电影内容列表页面的地址。

输入 movie，点击 应用

我们可以再把这个页面添加到一个菜单里，这样网站的用户可以通过这个菜单项，方便的浏览这个页面。

还是在 页面设置 这里，点击 菜单 后面的链接。这里有几种类型可以选择，我们先看一下 普通菜单条目， 输入菜单的 标题。

一小段描述 显示电影列表的页面。

往下浏览，在 菜单 这里，为这个即将创建的菜单项指定一个菜单，我们选择 主菜单。点击 应用 。然后再修改下这个菜单项的重量，默认是 0，这里我们输入 1，目前主菜单里只有一个 首页 菜单项，这个菜单项的重量是 0 ，设置 电影 这个菜单项的重量为 1 ，可以让 电影 这个菜单项在 首页 的右边显示。

注意 电影页面 这个显示的旁边有一个星号，表示，我们对它进行了修改，但是还没有保存，点击页面右上角的 保存 按钮。

然后点击 查看电影页面 这个按钮… Mac 上按住 command ，Windows 上按住 Ctrl 键，然后再去点击链接，这样可以在新的标签里面打开链接的内容。

这里你会看到，主菜单上多了一个电影菜单项，点击打开 … 这里显示的，就是我们使用视图模块创建的一个简单的电影内容列表的页面，目前在这个页面上只显示出电影内容的标题。

在下面视频里，我们一起来改造一下这个页面的显示。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
03-02)

这个视频我们来改选一下之前创建的电影内容页面。我们可以先修改一下主菜单上面的菜单项的顺序 …. 点击结构，菜单，打开主菜单，我们把电影这个菜单项，放在首页菜单项的下面 … 然后点击保存。

下面我们再去修改视频 … 点击 结构，视图，找到之前创建的电影这个视图 ...

点击 字段 右边的 添加 按钮，在这里我们可以选择想要添加的字段类型，除了内容的标题以外，我们想在这个电影列表里显示电影的年代，投票，还有电影的海报。

选中 内容：年代，在这个字段下面的描述里，你会看到这个字段是在 movie 内容类型里定义的。再选中 内容：投票，另外再找到 内容：海报。

然后点击 应用 按钮，注意这个按钮的括号里提示我们，这会应用到所有显示，目前我们这个电影视图里，只有 电影页面 这个显示，如果我们添加了其它的显示，那么，点击 应用 按钮也会影响到其它的显示，也就是把刚才我们选中的字段也会添加到其它的显示里面。

我们可以单独为这个显示添加这些字段，点击这个设置界面最上面的下拉菜单，目前选择的是 所有显示，你可以选择下面的 当前 page ，这样我们在这里所做的设置只会影响到当前的 电影页面 这个显示。

点击 应用 按钮。

这里我们需要分别设置一下刚才添加的三个字段。

设置界面最上面会显示出设置的字段的名称，现在我们设置的是 内容：年代 这个字段。

在这里，勾选了 生成标签，标签的内容是 年代 这两个字，也就是 年代 这两个字，会显示在 内容：年代 这个字段的值的旁边。

这里我们不想在 内容：年代 字段里显示任何的标签，所以，去掉 生成标签 这个选项。

然后点击 应用。

现在我们要设置的是 内容：投票 这个字段。

不同的字段类型的设置界面可能不一样，去掉 生成标签，然后在 格式化器 这里，选择 投票，这个形式来显示投票这个字段。

点击 应用

最后我们还要设置一下 内容：海报 这个字段，先去掉 生成标签 选项。

然后 格式化器 这里，选择 图像，图像样式 我们选择之前创建的 poster 这个样式。图像链接到，选择 内容，这样用户点击电影海报可以打开海报所属的电影内容。

点击 应用 ... 然后点击 保存 ... 我们再预览一下... 点击 查看电影页面

现在我们的电影列表页面里不但显示电影的内容的标题，还有电影的海报，年代和投票。

我们可以再调整一下字段显示的顺序，回到视图编辑页面。

点击字段右边的 添加 按钮右边的向下的小三角形。然后点击 重新整理。这样会打开为字段的排序的界面。

我们可以用鼠标拖拽的方式来改变这些字段的显示顺序。

把 海报 放在最上面，然后是 标题，年代 和 投票。

点击 应用 。然后 保存 刚才的修改… 再回到这个电影列表页面… 刷新… 你会看到内容的字段会按照我们设计的顺序显示。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
03-03)

前面我们创建了一个显示电影内容的列表页面，这个视频我们来看一下如何控制视图的样式。

要想控制视图的样式，我们需要知道视图都输出了哪一些 HTML 标签，还有在这些标签上都定义了哪一些 CSS 类。通过这些类，我们就可以在主题的样式表里添加一些CSS 样式来改变视图的样式。

这里我们需要用到一些 CSS 的知识，如果你不知道什么是 CSS，可以先看一下宁皓网的 CSS 基础教程。

下面我们可以查看一下在这个视图页面上输出的元素，把鼠标放在视图输出的某个字段上，点击右键，选择 审查元素，这里我们用的是 Chrome 浏览器内置的开发者工具。

你会发现，视图在包装内容的元素上定义了很多个类…

在第一行内容的包装元素上定义了一个 .views-row-1 ，第二行内容里会有一个 .views-row-2，第三行里是 .views-row-3，视图会为每一行内容添加一个特别的类，使用这些特别的类我们可以让每一行内容都拥有不同的样式。

另外在奇数行的内容上会定义一个 .views-row-odd ，在偶数行的内容上会定义一个 .views-row-even。

.views-row-odd 这个类可以让我们统一为所有在奇数行的内容定义样式。.views-row-even 这个类可以为所有在偶数行的内容定义样式。

视图还会在第一个内容上添加一个 .views-row-first 类，在最后一个内容上添加一个 .views-row-last 类。你可以使用它们分别针对第一个内容和最后一个内容去定义一些样式。

样式

其实很多时候我们并不需要这么复杂的设计，为了保持输出的代码的整洁，如果你不到这些 CSS 类，可以去掉它们。你也可以为包装行内容的元素定义自己的类。

回到视图的编辑界面，确定我们编辑的是 电影 视图里的 电影页面 这个视图显示。

然后点击 格式 后面的 设置。

这里勾选了 添加视图的行类，就是前面我们看到的 .views-row-1 ，.views-row-2 这些类。

还勾选了 添加条纹，就是 odd 或 even 类，还有 first 或 last 这些类的选项。

我们先取消这两个选项。

然后在上面的 行类 这个文本框里，定义自己的类名，输入 movie-page-list，这样会在包装行内容的元素上统一添加这个类。

再调整一下这个设置的应用范围… 目前是应用到所有显示上… 我们选择 当前 page，这样我们做的设置只会影响这个 电影页面 显示。

点击应用… 保存...

回到前台页面，刷新…

再查看一下行内容的元素…

你会发现元素上的 .views-row，还有 .views-row-odd ， .views-row-eve 这些类已经不见了。这里只会使用我们自己定义的 .movie-page-list 这个类。

下面我们可以打开主题使用的样式表，然后为 .movie-page-list 这个类添加点样式。

Drupal 默认的主题是 Bartik ，我们不要直接修改这个主题，因为在以后升级 Drupal 的时候，会覆盖掉我们的修改。

所以，我复制了一下这个主题，修改了主题的名称，然后放在了 sites/all/themes 这个目录下 … 具体的方法你可以看一下宁皓网的 Drupal 7 的主题课程。

打开 movietalk ，在根目录下的 themes ，就是默认的主题所在的位置 。找到 sites ， all ，打开 themes ，这里的 ninghaobartik 就是我复制并修改的主题。

打开 css 这个文件夹，打开 styls.css 这个样式表…

浏览到这个样式表的最下方，先添加一小段注释… 电影内容列表页面…

然后输入 .movie-page-list{width:150px;float:left;margin-right:20px;margin-bottom:20px}

先设置下每行内容的宽度，设置为 150 像素，然后让行内容向左边浮动显示，float:left，再添加点外边距，先添加一个右边的外边距 margin-right:20px，再添加一个下边的外边距 margin-bottom:20px。

保存一下这个样式表。

回到前台页面，刷新…

现在这个电影内容列表， 就会按照我们预期的显示了。