宁皓网 Drupal 8：视图（上）

先去修改一下视图里面的字段的顺序 .. 找到 字段 这个区域 .. 点击 新增 后面的向下的三角形 .. 然后选择 Rearrange .. 重新排列 ..

这里会列出视图里的所有的字段 .. 用鼠标拖放的方式可以重新排列一下它们 .. 先是 海报 .. 然后是 标题 .. 电影名 ... 发行日期 .. 接着是 导演 .. 演员 .. 电影的类型 .. 最后是内容的正文 ..

完成以后，再应用一下 .. 你会看到，现在列表项目里的字段就会按照我们自己定义的顺序来显示了 ..

现在我想让电影的标题，电影名，还有发行日期这几个字段的内容组合到一块儿去显示 .. 我们可以覆盖输出这几个字段其中的一个 ... 这里应该是去覆盖输出 发行日期 这个字段 .. 因为在覆盖输出的时候，只能看到这个字段之前的字段 .. 标题，电影名 .. 还有发行日期 ，这几个字段里面，发行日期是排在最后的，所以可以在这个字段里看到它前面的标题，还有电影名这两个字段 ..

点开发行日期这个字段 .. 打开 重写结果 .. 勾选一下 使用自定义文本覆盖字段输出的内容 .. 然后在这个文本框里，可以自定义一下这个字段输出的内容 .. 打开下面的 替换匹配模式 ..

这里会出现一些使用字符串表示的字段 .. 比如这个 title ，field_name .. field_release_date .. 这些就是在视图里添加的字段 ..

先复制一下 标题 ... 注意要包含 title 周围的这两组大括号 .. 粘贴到上面的文本框里 .. 再复制一下 field_name .. 粘贴到 title 的后面 .. 中间加上一个空格 .. 最后是这个 field_relase_date .. 发行日期字段的内容 ..

复制一下 .. 再粘贴到上面的文本框里 .. 中间用一个空格分隔一下 .. 然后再用一组括号包装一下这个发行日期字段的内容 ..

应用 .. 再找到视图的预览 ... 你会发现 .. 原来显示 发行日期 字段的地方，现在会用我们自定义的输出 .. 也就是它里面会有 电影的标题，电影名 ..还有一个用括号包装的发行日期 ..

现在我们就可以上面多余的电影的标题，还有电影名这两个字段的内容隐藏起来 .. 找到 标题 .. 勾选一下排除显示 .. 应用 .. 再打开 电影名 .. 勾选一下排除显示 .. 再应用一下 ..

这样在视图输出的电影列表项目里面 .. 就不会出现标题还有电影名这两个字段的内容了 .. 只会显示一个标题，电影名，还有发行日期这几个字段的组合 ..

最后我们再保存一下视图 ..

你可以定义在视图里面的每个字段使用的 HTML 标签 .. 先去看一下 ... 查看页面 .. 然后打开浏览器的开发者工具 ... 选择 Elements .. 选中页面上的视图输出的内容 ..

这里每一排内容的周围都会用一个 div 包装一下，上面有一个默认的 css 类，名字是 views-row .. 这里其实是视图的格式控制输出的 .. 在后面我们会介绍到 ..

每行内容里面的东西就是一些字段 .. 这些字段都会有一个 div 包装 .. 上面有一个共同的 css 类，名字是 views-field .. 然后还会有一个字段特别的类 .. 前缀是 views-field 后面加上字段的机器名 ..

再打开一个字段看一下 .. 比如这个导演字段 .. 这个字段里面包含一个标签 .. 标签内容的周围有一个 span 标签 .. 上面有 views-label 还有一个 views-label 前缀，加上字段机器名的 css 类 ..

字段的内容用的是一个 div 包装 .. 上面会有 field-content 这个类　.. 里面是字段的具体的内容 ... 这些东西我们可以通过视图字段里的 样式设定 来定制 ... 包括字段使用标签，字段标签使用的标签，还有上面用的 css 类等等 ..

现在包装这个组合以后的电影标题内容用的还是一个 div 标签 .. 我想在它们周围使用一个标题标签 .. 回到这个电影页面视图 .. 找到 发行日期 这个字段 ... 我们就是在这个字段里组合了刚才你看到的电影标题 ..

定制字段的样式 .. 可以打开 样式设定 .. 这里有几个选项 .. 可以让我们定制字段的 HTML，也就是字段内容的 HTML 标签 .. .. 这里可以定制字段标签的 HTML .. 还有一个可以定制包装字段和标签的 HTML ..

选择哪一个取决于你想要的样式 .. 你用的主题可能需要字段使用特定的 HTML 结构 .. 在某些标签上，应用指定的 CSS 类 .. 你可以在这里去自定义一下 ..

这里我们勾选一下 定制包装字段和标签的 HTML .. 也就是字段内容的最外面那层包装 .. 然后再选择一种元素 .. 这里可以使用一个 H2 .. 如果你想在这个标签上面添加一些自定义的 css 类 .. 可以再勾选一下 生成一个 css 类 .. 然后再去添加自己需要的 css 类 .. 在介绍 Drupal 主题的课程里我们再回到这里看一下 ..

应用 ... 然后再保存 ..

回到这个视图页面 .. 再查看一下电影标题组合字段上的 HTML .. 现在，你会看到，用的是一个 H2 标签包装了整个字段的内容 ..

字段的内容又用了一个包装 .. 如果你不需要这个包装的话，也可以去设置一下 .. 回到视图的管理界面 .. 再打开 发行日期 .. 样式设定 .. 这次勾选一下 定制字段的 HTML .. 然后选择 无 .. 应用 .. 再保存 ..

回到前台页面 .. 刷新 ... 你会发现，现在这个字段会只用一个 h2 标签包装 .. 里面直接是字段的内容.. 没有添加多余的包装元素 .. 在这个 h2 上面用了一些默认的 css 类　.. 不需要的话也可以去掉它们 .. 回到视图 .. 打开这个字段 ..样式设定 .. 取消勾选这个 添加默认的 css 类 ..

再回到前台 .. 刷新 .. 这回这个 h2 元素上面，没有添加任何的 css 类 ..

现在我想让 导演 .. 演员 .. 还有 类型 这几个字段里面的标签跟字段内容在同一排显示 .. 这里之所以在两行显示 .. 是因为在字段内容的周围用了一个块级元素包装了一下 .. 去掉这个包装 .. 内容跟标签就会在同一排显示了 ..

回到视图 .. 先点开 导演 .. 样式设定 .. 勾选一下定制字段的 HTML .. 然后选择 无 .. 应用一下 ..

再打开 演员 .. 样式设定 .. 同样勾选一下 定制字段的 HTML .. 元素选择无 .. 应用 .. 最后再打开 类型 这个字段 .. 样式设定 .. 定制字段的 HTML .. 元素同样选择无 .. 应用 .. 再保存一下 ..

回到前台 .. 刷新 .. 现在，导演 .. 演员 .. 还有类型这几个字段的标签还有字段内容就会显示在同一行了 .. 因为我们去掉了字段内容的块级元素的包装 ..

视图的格式其实就是视图的模板 .. 它决定了视图怎么样去组织显示列表里的每一行的内容 .. 现在电影页面这个视图显示里用的是 没有格式化的列表 .. 这种格式的视图会在每行内容的周围用一个 div 包装一下 .. 上面有一个 views-row 这个 css 类 ..

找到 格式 这个区域 .. 这里会显示这个视图显示正在使用的格式 .. 点击后面的设置 .. 可以配置一下这种格式 ..

这里我们可以取消 添加视图的行类 .. 然后在上面的行里面，添加一个自定义的 css 类 .. 比如用一个 item .. 如果还有其它的要添加的类，你可以使用空格分隔一下 ..

应用 .. 再到预览那里看一下 .. 现在你会看到，每行内容的包装的上面，就会使用我们自己定义的 item 这个类了 .. 有些模板可能会让你在这些列表内容的包装上添加一些特定的 css 类 ..

我们再去看一下其它的格式 .. 打开格式 .. 选择 HTML 列表 .. 应用 .. 这种格式就是使用一个无序或者有序的列表去组织显示内容 .. 列表类型 选择默认的 无序列表 .. 应用 ..

这种格式的视图输出的就是一个无序列表 .. 最外面是一个 ul 无序列表标签 .. 每行内容的会用一个 li 列表标签包装一下 ..

再去修改一下 .. 点击 配置 .. 这次选择 有序列表 .. 这种格式的跟刚才的区别就是 .. 最外面会用一个 ol 有序列表标签 .. 里面的每行内容仍然是用的 li 标签 ...

这次我们再看一下表格 .. 点开格式 .. 选择 表格 .. 应用 .. 现在这里会显示一个表格 .. 最外面是一个 table 标签 .. 里面是 thead 表头 .. 还有 tbody 主体 .. 主体部分每行内容用的是 tr 标签 .. 每个单元格用的是 td 标签 ..

再去修改一下 .. 这回选择格子 .. 应用 .. 输入列数 .. 也就是每一行内容分成几列去显示 .. 输入 3 .. 再应用一下 ..

再到预览这里看一下 .. 现在每一行内容会分成三栏显示 .. 再查看一下这种格式输出的 HTMl 结构 .. 这里你会发现 .. 每行内容会用一组 div 包装一下 .. 里面会有三个项目 ... 在这些 html 标签上面都会使用一些特定的 css 类 ..

有些模板可能需要你使用这种形式的代码结构来输出内容 .. 在以后我们可能还会回来去设置视图的格式 ..

最后我们还是把这个视图的格式换成默认的没有格式化的列表 ...