如何使用 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;
 }

我希望你喜歡這個教程。 謝謝閱讀！