宁皓网 Drupal 8：视图（下）

视图里的过滤标准，也就是过滤内容用的条件，它们可以帮助你筛选出自己想要的内容。 可以使用的过滤条件非常多，比如内容的发布状态，内容的类型，内容的作者，语言，也可以使用我们自己为内容添加的字段作为过滤条件。我们还可以使用与 或者 或操作符把这些过滤条件组织到一块儿去用 ...

在我们之前创建的这个电影页面视图里 .. 找到过滤标准这个区域 .. 这里已经有了两个过滤条件 .. 一个是 发布状态 .. 还有一个是内容的类型 .. 括号里的东西是这个条件的值 .. 也就是这个视图输出的内容必须要满足这两个标准 .. 发布状态必须是是，内容的类型必须是电影 ..

点击 新增 后面的三角形 .. 选择重新调整 .. 这里左边是操作符 .. 现在用的是 和 .. 右边是过滤的条件 .. 也就是这两个过滤条件用的是 和 这个操作符组织到一块儿的，这样内容必须同时满足这两个条件的时候才出被输出 ..

可以使用的操作符 .. 除了这个 和 .. 还有一个 或者 .. 意思就是满足其中的一个条件就可以 ..

我们可以继续去添加其它的过滤条件 .. 点击这个 创建新的过滤群组 .. 又会添加一个过滤群组 .. 在这个群组里面，也可以添加其它的过滤条件 .. 在这个群组里的过滤条件又可以使用 和 或者 或 这些操作符组织到一块儿 .. 这两个过滤群组之间也可以使用一个操作符组织一下 ...

先关掉这个界面重新整理界面 .. 再去新添加一个过滤标准 .. 点击 新增 .. 这里会列出可以使用的过滤标准 .. 比如你想得到一个推荐到首页的电影内容列表 .. 可以选择 推荐到首页 ..

或者你想得到某个类型的电影内容 .. 这里可以找到添加到电影内容上的类型这个字段 .. 应用 .. 选择分类词汇表 .. 应该就是这个 类型 .. 选择类型用的方法 .. 可以选择 下拉 .. 再应用一下 ..

在这里你可以选择操作符 .. 默认是 其中之一 .. 右边会出现在类型这个词汇表里的所有的分类词汇 .. 比如我要得到 犯罪 类型的电影 .. 选中这个犯罪 .. 再应用一下 ..

在视图的预览这里 .. 你会看到，只剩下了 肖申克的救赎 这部电影 .. 因为在我的网站上，只有这部电影内容的类型分类里面 .. 有 犯罪 这个分类 .. 再配置一下这个过滤标准 .. 这里再选择一下分类 .. 比如 剧情 ..按住 command 或者 ctrl 键可以多选 .. 现在这个过滤条件的意思就是，我们要得到的电影内容里面，类型可以是剧情 .. 也可以是 犯罪 ..

因为前面的操作符这里，选择的是 基本之一 .. 这样很可能会出现重复的内容 .. 因为一个电影内容里面，可以同时包含剧情还有犯罪这两个分类 .. 这样这个电影内容就会出现两次.. 去掉重复的内容，可以再勾选一下下面这个 减少重复 ..

应用一下 .. 在预览这里 .. 列出的就是类型是剧情或者犯罪的已经发布了的电影内容 ..

我们再去掉刚才添加的这个过滤标准 .. 重复整理 .. 删除这个类型字段的过滤标准 .. 再应用一下 ..

视图里的排序标准影响了内容列表的排列顺序 .. 比如你可以让最近更新的内容排在列表的最前面 .. 或者按照内容的发布时间去排列 .. 找到 排序标准 这个区域 .. 现在这个视图显示里面已经有了一个排序标准 .. 就是这个发布于 .. 它就是按照内容的发布时间的先后来排列内容 ..

现在它的值是 降序 .. 意思就是最新发布的内容会排在最前面 ... 我们可以先删除掉这个排序标准 .. 打开新增按钮右边的这个下拉菜单 .. 重新整理 .. 然后 删除 掉这个默认的排序标准 .. 再应用一下 ..

下面再去给它添加一个新的排序标准 .. 新增 .. 我想用电影内容上的 发行日期 作为排序的标准 .. 搜索一下这个字段 .. 选中它 .. 再应用一下 ..

排序的标准.. 这个地方应该是个翻译错误，order 在这里不是订单的意思 .. 它指的是 排序 .. 选择下面 降序排列 .. 意思就是最新发行的电影会排在最前面 .. 下面可以选择一下时间单位 .. 这里选择 日 就可以了 .. 应用 ...

在预览一下 .. 现在这个电影列表里面 .. 发行日期最近的电影会排在最前面 .. 这里盗梦空间是 2010 年发行的 .. 然后是机器人总动员 .. 2008 年 .. 接着是海上钢琴师 .. 1998 年 ..

我们可以把指定的过滤标准还有排序标准显示出来 .. 这样用户就可以使用它们得到自己想要的结果了 .. 前面我们添加了一个发行日期的排序标准 .. 打开它 .. 勾选一下 把这个排序显示给用户 .. 标签设置成 发行日期 .. 然后再应用一下 ..

再到预览这里看一下 .. 这里会出现一个 排序依据 的下拉菜单 .. 默认里面只有一个项目，就是这个 发行日期 .. 后面会有一个要使用的顺序 .. 默认是 降序 .. 我们可以换成 升序 .. 点击 应用 ..

现在这个视图输出的内容列表，就会使用 发行日期 ，升序排列 .. 也就是最早发行的电影会排在最前面 ..

我们再去给这个视图添加一个过滤标准 .. 新增 .. 搜索一下类型 .. 选择这个应用在电影内容上的类型字段 .. 应用 ..词汇表是 类型 .. 选择的方法使用 下拉 .. 再应用一下 .. 然后勾选一下 把这个过滤条件显示给用户 .. 标签设置成 类型 ..

再点击 应用 .. 再到预览这里看一下 .. 现在这里又会出现一个 类型 选择列表 .. 点开它 .. 里面会出现在 类型 这个词汇表里的所有的分类词汇 .. 选中一个分类 .. 比如 动画 .. 点击 应用 .. 这样会过滤出类型里面包含动画这个分类的电影内容 .. 再试一下.. 这次选择 战争 .. 应用 ... 这回出现的就是包含 战争 这个分类的电影内容 ..

这个公开显示给用户的表单 .. 叫做公开表单，或者暴露表单 .. 英文是 Expose Form .. 我们可以让这个表单作为一个区块显示出来 .. 这样你就可以去指定这个表单要显示的位置了 .. 打开视图的 高级 区域 .. 在暴露的表单这里 .. 点击 在区块中暴露表单 .. 选择 是 .. 然后再点一下 应用 .. 再保存一下这个视图 ..

打开这个视图页面 .. 再打开 结构 .. 区块 .. 找到一个要显示暴露表单的区域 .. 比如这个 Sidebar first .. 边栏第一这个位置 .. 放置区块 .. 找到这个 暴露的形式 .. 这是个翻译错误，它的意思应该是 暴露的表单 .. 后面是视图的名字，还有视图里的显示的名字 .. 刚才我们配置的显示的机器名就是 page_1 .. 点击后面的 放置区块 ..

机读名称 .. 可以手工去设置一下 .. expose_form_movie_page .. 保存 .. 调整一下 Sidebar first 这个区域上的区块的位置 .. 把这个暴露表单放到最上面 .. 再保存一下 ..

然后回到视图的前台页面 .. 在这个边栏区域上，你会看到一个表单 .. 先看一下顺序 .. 选择 升序 .. 再应用一下 ..

这样会用 发行日期 作为排序的标准 升序排列 .. 再选择一个类型 .. 比如 音乐 .. 现在这个电影列表只会显示类型包含音乐的电影内容 ..

下面我们需要使用评论内容去做一个视图 .. 可以先去给电影这个内容类型添加一个评论的功能 .. 其实就是去添加一个评论字段 ..

打开 结构 .. 内容类型 .. 管理一个电影这个内容类型的字段 .. 给它添加一个新的字段 .. 这里我们可以选择一个已有的字段 .. 打开这个重复使用已有字段 .. 选择 comment .. 保存并继续 ..

再回到电影这个内容类型 .. 打开 管理显示 .. 在这里找一个想要使用评论的显示模式 .. 比如我想在全文模式下可以让用户提交评论 .. 打开 全文 .. 如果看不一这个模式 .. 可以打开下面这个 自定义显示设置 .. 勾选一下 .. 全文 ..

在已禁用这个区域里面，找到 评论 字段 .. 把它放到 body 字段的下面 .. 然后保存一下 ..

回到前台页面 ... 打开之前创建的电影视图页面 .. 地址就是 movie .. 再打开电影内容 ... 在电影内容的全文模式下 .. 会有一个评论用的表单 ..

在这里，可以输入评论的标题 .. 还有评论的正文 .. 如果你不想让用户输入评论的标题 .. 可以再去修改一下 .. 回到电影内容上的评论字段的管理界面 .. 打开字段设置 .. 在这里我们可以选择一种评论的类型.. 这里默认是 Default comments ..

再打开 结构 .. 在这里，你会看到一个 评论类型 .. 现在网站上有一个默认的评论类型 .. 就是这个 Default comments .. 管理字段 ..

你可以在这里为这种评论类型添加新的字段，用户在提交评论的时候可以使用这些字段 .. 再打开 管理表单显示 .. 找到 主题 ... 把它拖放到 已禁用 这个区域里面 .. 保存 ..

再回到电影内容页面 .. 刷新 .. 现在用户在提交评论的时候，就不需要输入评论的标题了 .. 可以直接输入评论的内容 ..

输入点评论 .. 保存 ... 评论会出现在上面 ..

下面你可以自己去找一些电影内容，然后给它们添加点评论 .. 在后面的视频里，我们会去创建一个评论视图 .. 用到这些评论 ..

视图里的上下文过滤器可以动态的去过滤内容 .. 比如现在我想去添加一个新的页面 .. 页面的地址就是电影内容页面的地址后面加上一个 comment .. 打开这个页面会显示这部电影的所有的相关的评论 ..

我们可以去创建一个页面视图 .. 在这个视图里会用到上下文过滤器... 打开 结构 .. 视图 .. 添加一个新的视图 .. 名字是 comment .. 编辑一下 .. 输入视图的中文名 .. 评论 .. 评论相关的内容 ..

显示 这里 .. 选择 评论 .. 后面可以再选择一个评论的类型 .. 保存并编辑 .. 给这个视图添加一个显示 .. 类型选择页面 ..

先去给这个页面视图添加一个路径 .. 这个页面的路径非常关键 .. 先要输入电影内容的页面地址 .. 现在是 node/ 后面是电影内容的 id 号 .. 这里我们用一个 % 来代替具体的某个电影内容的 id .. 这个百分号表示的就是要使用的上下文过滤器 ..

后面加上一个斜线 .. comment .. 应用一下 .. 再去给视图添加一个上下文过滤器 .. 打开 高级 .. 注意这个评论视图默认给我们添加了一个 内容 关联 ..

点击 上下文过滤器 右边的 新增 .. 搜索一下 id .. 然后找到 节点 ID .. 勾选一下 .. 应用 .. 再应用一下 .. 先到预览这里看一下 ..

默认这里会显示所有的评论内容 .. 在这个语境过滤器这里，也就是上下文过滤器 .. 输入一个电影的 id 号 .. 比如机器人总动员这部电影内容的 id 号是 25 ， 输入 25 .. 更新 ..

这样下面只会显示出属性这部电影的评论 .. 再试一下 .. 盗梦空间这部电影的 id 号是 30 .. 输入 30 .. 再更新 .. 现在显示的就是这部电影的评论 ..

我们可以再到前台去看一下 .. 打开一个电影内容 .. 在内容的地址的后面输入一个斜线 comment .. 在这个页面上显示的就是 机器在人总动员 这部电影的所有的评论 .. 因为我们为视图添加了一个节点 id 的上下文过滤器 .. 在访问 node/ 内容 id .. 斜线 comment 这种地址的时候 .. 会使用中间的 内容 id 作为上下文过滤器的值 .. 这样也就会只显示出跟这个内容相关的所有的评论内容了 ..

再试一下 .. 打开盗梦空间这个电影内容的页面 .. 地它的地址的后面输入一个斜线 comment ... 这里显示的就是这部电影相关的评论 ...

现在这个页面显示的是 盗梦空间 这部电影的所有的评论内容 .. 我想在这个页面上可以显示电影的标题 .. 也希望这个标题可以出现在这个页面的页面标题上 ..

回到之前创建的评论这个视图 .. 我们可以先在这个视图的字段里添加一个新的字段 .. 搜索一下 标题 .. 找到分类是内容的这个标题字段 .. 应用 .. 关联这里默认已经选择了 内容 .. 然后勾选一下 排除显示 .. 因为我只想使用这个字段的内容作为页面的标题 .. 不想让它出现在每条评论上 ..

打开 重写结果 .. 覆盖字段的输出 .. 再打开 替换匹配模式 .. 在这里，我们可以找到表示这个字段内容的字符串 .. 这里应该就是这个 title .. 复制一下 ..

取消这个覆盖输出 .. 再点一下应用 .. 然后打开 高级 .. 找到前面给这个视图显示添加的上下文过滤器 .. 打开它 ..

勾选一下这里的 覆盖标题 .. 一组书名号 ... 里面是刚才复制的表示内容标题的字符串 .. 后面再加上点文字 .. 相关的评论 .. 应用 .. 保存 ..

回到之前的评论页面 .. 刷新 .. 现在这个页面上会显示一个自定义的标题 .. 里面有评论所属的内容的标题 .. 注意这个页面的页面标题，也会使用这个标题 .. 这种页面标题对用户还有搜索引擎更友好一些 ..

在以后介绍 Drupal 主题的课程里，我们会详细的介绍怎么样创建主题，为页面上的元素添加样式等等。这里先简单的修改一下这个电影列表视图的样式 ，主要是想让录的视频更好看一点 ... 先打开 配置 .. 性能 .. 去掉合并 CSS 文件这个选项 .. 再保存一下 .. 不然 Drupal 会去压缩 Drupal 主题使用的 CSS 文件，把几个文件合并到一块儿 .. 这样我们对样式表的修改就不能立即看到效果了 ..

然后再打开编辑器 .. 找到桌面上的这个 web-stack .. 下面的 app ，drupal-8 .. 它就是 Drupal 8 这个项目所在的目录 .. 下面我们可以直接去修改核心主题的样式表 .. 这种方法不推荐用在正式的网站上 .. 因为如果你升级了 Drupal 以后，这些核心自带的东西都会被覆盖掉 ..

打开 core .. 找到这里的 themes ... bartik 是我们网站现在用的前台的主题 .. css .. components .. 这里有一些 css 文件 .. 找到 views.css .. 下面我们把需要的样式放到这个文件里面 ..

打开电影页面视图的前台页面 .. 可以使用浏览器的开发者工具查看一下列表项目 .. 我想先去缩小一下海报的显示尺寸 .. 现在它的宽度是 200 .. 缩小一半是 100，这样在高清屏幕上显示的时候，这个图片会很清晰 .. 图像的包装上面有一个 views-field-field-poster 这个类 . 使用它作为这个样式的选择器 ..

粘贴过来 .. 后面再加上一个 img .. 添加一个 width .. 设置成 100px ..

然后我们再让海报靠左边去显示 .. 先使用一个海报字段的包装上的 css 类 .. 里面添加一个 float ，设置成 left .. 再添加一个 margin-right .. 设置成 20px .. 这样海报的右边会有一个 20px 的外边距 ..

列表的项目与项目之间我想也再添加一个间隔 .. 这些项目的大的包装上面都有一个 views-row 这个类 .. 用它作为样式的选择器 .. 添加一个 margin-bottom .. 设置成 30px　　．．　 刷新 ..

这里项目与项目之间的间隔好像没有作用 .. 是因为我们浮动了海报的包装元素 .. 回到这个视图的管理界面 .. 设置一下格式 .. 在行类这里添加一个 clearfix .. 它可以解决刚才遇到的问题 .. 应用 .. 保存 ..

再到视图的前台页面预览一下 .. 现在这个列表就比之间好看一些了 ...

打开一个电影内容 .. 点击相关的演员 .. 可以打开这个人物的页面 .. 在这个人物内容的页面上，可以去显示这个人物的演员作品，还有导演作品 .. 我们可以使用视图去创建一个区块，区块里面就是电影的列表 .. 然后把这个区块放到人物内容的页面上显示出来 ..

打开 结构 .. 视图 .. 再找到我们之前创建的电影这个视图 .. 编辑一下 .. 在它里面，可以再去添加一个新的显示 .. 添加 .. 类型选择 区块 ..

修改一下显示的名字 .. 演员作品 .. 描述 .. 跟演员相关的影视作品 .. 应用 .. 设置一下标题 .. 演员作品 .. 注意这里需要再选择一下应用的范围.. 默认是所有显示 .. 这里选择为这个 block 覆盖 .. 应用 ..

再修改一下区块的名字 .. 打开 区块名 .. 输入 演员作品 .. 再应用一下 .. 区块的类型是 列表视图 .. 在区块管理里面，可以使用分类去查找区块 ..

然后再修改一下这个显示的机器名 .. 也就是在 Drupal 内部使用的名字 .. 在 高级 .. 这个区域里 .. 打开 机读名字 .. 输入一个 block_star .. 应用 ..

再修改一下视图的过滤还有排序 .. 重新整理一下 .. 删除掉 类型 这个过滤 .. 应用的范围选择为这个 block 覆盖 .. 配置一下这个排序 .. 取消 把这个排序显示给用户 .. 为这个 block 覆盖 .. 应用 ..

再保存一下 ..

这样我们就创建了一个视图区块 .. 在 Drupal 的区块管理里面，可以把它放到指定的地方显示出来 .. 打开 结构 .. 区块布局 ..

找到一个区域 .. 比如内容这个区域 .. 放置区块 .. 找到演员作品 .. 保存一下 .. 回到人物内容的页面 .. 刷新 .. 在内容的下面会出现一个电影列表 .. 不过现在显示的是全部的电影内容 .. 我们需要使用上下文过滤器去动态的过滤一下 .

使用上下文过滤器，可以去过滤一下这个在人物内容页面上显示的电影列表 .. 让这个电影列表里面只包含跟这个人物相关的影视作品 ..

在电影内容上，我们添加一个相关演员的字段 .. 名字是 field_star .. 使用这个字段可以作为这个区块视图的上下文过滤器 ..

回到这个区块视图 .. 展开 高级 .. 添加一个上下文过滤器 .. 搜索一下 star .. 找到 演员 这个字段 .. 勾选一下 .. 再点击 应用 ..

再配置一下这个上下文过滤器 .. 我们需要给这个上下文过滤器指定一个默认的值 .. 选择 提供一个默认值 .. 类型选择 URL 上的内容 ID .. 也就是会使用电影内容页面的地址里面的电影的 ID 号，作为我们选择的演员这个上下文过滤器的值 ..

选择一下应用的范围 .. 为这个 block 覆盖 ..

再应用一下 .. 保存 .. 回到人物内容的页面 .. 刷新 .. 现在这个电影列表区块里面 .. 只会显示跟这个人物相关的电影内容了 .. 再看一下其它的人物内容 .. 同样也只会显示跟这个人物相关的电影作品 ..

在电影这个内容页面上， 也可以再去添加一个显示相关人物的区块 .. 使用视图创建这个区块的好处就是，你可以在视图里添加任何你想要的内容字段，比如人物的名字，生日，头像等等 ..

打开 结构 .. 视图 .. 添加一个新的视图 .. 名字是 people .. 编辑 .. 再给它一个中文名 . 人物 .. 人物相关的内容 .. 类型选择 人物 .. 保存并继续 ..

添加一个区块类型的显示 .. 设置一下显示的名称 .. 演员 .. 再修改一下标题 .. 这里也输入演员 . 然后是区块名 .. 相关的演员 .. 再去修改一下它的机器名 .. block_star ..

去掉这个显示里的排序的方法 .. 下面我们还是得去设置一下视图的上下文过滤器 .. 这样才能显示正确的内容列表 ..

在电影内容上有一个要相关人物内容的字段 ... 这里我们需要先给这个视图添加一个关联 .. 展开高级 .. 新增一个关联 .. 搜索一下 star .. 这个 field_star 就是在电影内容上相关演员用的字段 ..

找到了两个结果 .. 上面的 referenced from field_star 表示的就是使用 field_star 相关的那一些人物内容 .. 我们要用的是下面这个 using field_star .. 它指的应该是去相关人物的那个电影内容 .. 勾选一下 .. 应用 . 再应用 ..

再去添加一个上下文过滤器 .. 搜索一下节点 id .. 选中它 .. 再应用一下 .. 然后在关联这里， 选择前面添加的 field_star 这个关联 .. 给这个过滤器指定一个默认的值 .. 选择 URL 上的内容 ID ..

应用 .. 到预览这里看一下 .. 在这个文本框里输入一个过滤器的值 .. 这个值应该就是电影内容的 ID 号 .. 盗梦空间这部电影的 id 号是 30 .. 这里输入 30 。。。 s 更新 .. 下面列出的就是这部电影相关的人物 .. 保存一下这个视图 ..

再打开 结构 .. 区块 .. 找到 内容 这个区域 .. 放置区块 .. 找到相关演员这个区块 .. 放置区块 .. 保存 .. 再保存一下 ..

打开一个电影内容 .. 在这个页面上会显示一个 演员区块 .. 这个区块里的内容就是跟这部电影相关的演员的列表 .. 再打开一个其它的电影内容 ..

显示在这里的演员区块里面，就是跟这部电影相关的所有的演员 ..

视图输出的列表默认都会使用一个分页器 .. 使用它我们可以分页去显示列表内容，每页会显示一定数量的项目 .. 打开 结构，视图 .. 找到前面创建的电影这个视图 .. 再打开电影页面这个显示 ..

再找到分页器这个区域 .. 现在使用的分页器的类型是完整 .. 点一下它后面的这个链接可以去配置一下这种类型的分页器 ..现在每页会显示 10 条项目 . 我们可以把它设置成 2 .. 下面还有一些详细的配置选项 ..

这里修改一下分页器上的链接的文字 .. 修改一下向前翻页的链接上的文字 .. 上一页 .. 下一页的链接这里 .. 输入 下一页 ..

先点一下应用 .. 保存 .. 查看页面 .. 在这个电影页面的下面，会显示一个完整类型的分页器 .. 这个列表里面现在一共有三页内容 .. 每页显示两个内容 .. 点击 页码 .. 可以翻页显示内容 ..

再回到视图的配置界面 .. 打开这个分页器的类型 .. 这里除了完整，还可以选择显示所有的内容 .. 或者指定数量的内容 .. 再看一下这个迷你类型的分页器 .. 应用 .. 再配置一下 ..

应用 .. 保存 ..

回到视图的前台页面 .. 刷新 .. 迷你分页器就是显示一个当前页 .. 还有一个向后翻页的链接 .. 点击这个链接可以向后翻页 ..

点击上一页可以向前翻页 .. 在分页的时候不想刷新整个页面，可以打开视图的 Ajax .. 回到视图管理的界面 .. 展开这个高级 .. 在其它这个区域里面，打开 使用 Ajax .. 选择 是 .. 再应用一下 .. 然后保存 ..

回到前台页面 .. 刷新 .. 点一下这个一下页，向后去翻页 .. 因为用了　Ajax 功能，所以在翻页的时候不会刷新整个页面 .. 在等待新页面内容的时候，会显示一个加载指示 ..