如何使用 Drupal 8 的菜单项附加模块

超级菜单不再是一种设计趋势，而是大多数与新闻或电子商务相关的网站的重要组成部分。

Drupal 8 的 Menu Item Extras 模块通过允许站点构建器向菜单项添加字段来改进 Drupal 中的默认菜单系统。 这样，只需几个简单的步骤就可以创建一个大型菜单。

跟随学习如何使用这个模块。 开始吧！

第 1 步：安装所需的模块

除了 Menu Item Extras 模块，您还需要安装 Viewfield。 Viewfield 提供了一个字段，该字段包含对 View 的引用，并在显示包含该字段的实体时呈现它。

• 打开PC 的终端应用程序。
• 类型：
  • 作曲家需要 drupal/viewfield
  • 作曲家需要 drupal/menu_item_extras

下载后启用这两个模块。

• 单击扩展。
• 检查两个模块。
• 单击安装。

步骤 #2：创建分类系统

也许“系统”这个词不太合适，因为我们只会创建一个包含十个相关术语的词汇表。 但是，此示例将解释基础知识，因此您将来可以使用更复杂的分类系统。

• 单击结构 > 分类 > 添加词汇表。
• 输入名称“主题”，然后单击“保存”。
• 单击添加术语，将下面详述的所有术语一一添加。
  • 话题
    • D8
    • Symfony
    • 可湿性粉剂
    • Magento
    • CSS
    • HTML
    • JS
    • PHP
    • Python
    • 开发运维

步骤#3：创建内容类型

出于本教程的目的，我们将使用具有以下字段的 2 种内容类型：

• 服务
  • 服务图像/图像/允许的值数：1
  • 介绍文本/文本（格式化）/允许的值数：1
  • 说明/默认字段

• 博客
  • 类别/分类术语/允许的值数量：无限制
  • 说明/默认字段

确保在创建分类字段时选择参考类型（主题）。

步骤#4：创建内容

我们将创建 3 个 Service 类型的节点：

• 教程
• 视频
• 图书

这些节点中的每一个都将与巨型菜单中的第二级元素相关联。 另一方面，我们将创建大约 10 个博客类型的节点，并与它们相关联的不同术语。 确保包含 2 个术语（例如：D8、WP）的频率高于其他术语。

内容屏幕应该看起来或多或少类似于下图的结束。

步骤#5：创建菜单项

主菜单的第一级将具有以下菜单项：

• 家
• 关于
• 资源
• 接触

每个菜单项都会有一个额外的（额外的）字段。 该字段将设置在菜单的第二级，即超级菜单中的每个卡项。 该字段将允许我们呈现每个视图块。

• 单击结构 > 菜单。
• 单击编辑菜单，以编辑主导航。

• 单击添加链接 3 次以添加缺少的一级菜单项。
• 每次输入菜单项名称时单击保存。

使用特殊标签仅显示链接文本。

创建并重新排列菜单的链接后，

• 单击管理字段 > 添加字段，将字段添加到菜单项。
• 选择Viewfield 类型的字段。
• 给它一个适当的名称和标签。
• 单击保存并继续。

• 将允许的值数量设置为无限制。
• 单击保存字段设置

您可以选择将默认视图链接到此特定字段。 将这些字段留空。

• 向下滚动并单击保存设置
• 单击管理显示。

• 隐藏菜单卡标签。
• 单击保存。

步骤#6：创建视图

• 单击结构 > 视图 > 添加视图
• 显示服务类型的内容。
• 使用未格式化的字段列表创建一个块。
• 选择每个块显示 3 个项目。
• 单击保存并编辑。

• 添加服务图像字段
• 将图像样式设置为缩略图并将图像链接到内容。
• 单击应用

• 也添加Intro 文本字段。
• 重新排列字段。
• 单击保存。

• 单击结构 > 视图 > 添加视图
• 显示博客类型的内容。
• 使用未格式化的字段列表创建一个块。
• 选择每个块显示 1 个项目。
• 单击保存并编辑。

• 添加字段类别。
• 单击添加并配置字段。
• 单击多个字段设置。
• 选择无序列表。
• 将要显示的值的数量设置为 3。
• 单击应用。

• 删除排序条件
• 单击应用。
• 单击保存以保存视图。

步骤#7：将视图块添加到菜单项

• 单击结构 > 菜单
• 编辑主导航。
• 编辑菜单项资源。
• 添加您在第 5 步中创建的 2 个块。
• 单击保存。

第 8 步：CSS 样式

我不打算详细解释这段代码，因为它超出了本教程的范围。 但是，您可以在本文中研究更多有关 Drupal 视图和 CSS 网格的信息。 如果您想更多地练习大型菜单，也可以看看这篇文章。

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

#block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

我希望你喜欢这个教程。 谢谢阅读！