• 主頁
  • 文章
  • SEO
  • 導覽模塊 - 在 Drupal 9 中為自定義主題創建自己的導覽

導覽模塊 - 在 Drupal 9 中為自定義主題創建自己的導覽

已發表: 2021-09-28

當您在一個陌生的地方時，有什麼比導遊更好的呢？

用戶體驗正慢慢變成每個企業的焦點。 提供一種通過用戶界面交互為用戶指明正確方向的體驗，可以改變任何企業的遊戲規則。 在本文中，我們將探索 Drupal 9 的 Tour 模塊。使用 Tour 模塊，您不僅可以對現有視圖進行預先構建的引導式導覽，還可以將 Tour 模塊集成到您的自定義主題中（我們後面會詳細解釋）。

旅遊模塊

Drupal 9 旅遊模塊

當您希望您的用戶更多地關注您網站上某些容易被忽視的組件時，您可能希望實施 Drupal 9 Tour 模塊。 當您想引導用戶完成引導式工作流程時，這也很棒。 從 Drupal 8 開始，Tour 模塊就包含在 Drupal 核心中。

當您啟用該模塊時，它會在工具提示的幫助下提供網站界面的導覽。 要進行遊覽，您可以在以下位置編輯現有視圖

/admin/structure/views

並單擊管理工具欄右上角的“? Tour”鏈接。 您還可以訪問

/admin/structure/views/view/frontpage?tour=1

自動啟動 Views 之旅。

查看設置

在 Drupal 8 中，Tour 模塊建立在 Joyride jQuery 插件之上，該插件在 Drupal 9.2 中的 Shepherd.js 中已被棄用。

我們還有另一種方法可以通過 YML 文件添加模塊和管理界面的導覽。 在這裡，我在自定義主題中添加了一個遊覽。

什麼是 Shepherd.js？

Shepherd 是一個 JavaScript 庫，可讓您輕鬆創建應用程序或網站的導覽。 它利用另一個開源庫 Popper.js 為每個遊覽“步驟”呈現對話框。

在自定義主題中集成 Tour 模塊

在 Drupal 9 中，我們有多種類型的內容頁面需要集成：

  1. 頁遊
  2. 節點之旅
  3. 查看旅遊等

讓我們假設有一個儀表板頁面，它有多個卡片來顯示其中的所有圖表和值，如下圖所示。 在這裡，遊覽將很容易引導用戶瀏覽卡片並顯示一些細節。

儀表板設計

圖片來源：儀表板設計

創建儀表板遊覽庫

參觀要求：

以下物品/卡片需要導遊

  1. 健身活動
  2. 新課程
  3. 創建新的
  4. 今日收穫
  5. 活躍的成員
  6. 每月回顧
  7. 積分
  8. 立即付款（操作按鈕）

現在，我們總共有 8 個步驟。 在此示例中，我將創建一些步驟開始，其餘卡片將繼續使用相同的模式。

開始吧。

第 1 步：在 THEME.libraries.yml 上創建一個遊覽庫

我正在為儀表板遊覽創建一個自定義庫，以便我們可以將其包含在儀表板頁面/模板中。 即dashboard.html.twig

主題庫

主題庫.yml

第 2 步：在自定義儀表板頁面或節點模板中包含儀表板遊覽庫

 {# In a Twig template we attach the library. #}
 {{ attach_library('THEME/dashboard-tour') }}​

現在，我們已經在主題中包含了遊覽依賴項。

第 3 步：開始使用 Shepherd.js

為了快速開始，您可以在此處獲取示例代碼 https://shepherdjs.dev/

初始化牧羊人

在dashboard.js中，添加如下初始化代碼

const tour = new Shepherd.Tour({ defaultStepOptions: { cancelIcon: { enabled: true }, classes: 'shadow-md bg-purple-dark', scrollTo: { behavior: 'smooth', block: 'center' } }, useModalOverlay: true, });

儀表板.js

defaultStepOptions選項允許您指定默認情況下應應用於所有此遊覽步驟的任何選項。

useModalOverlay是您可以添加的另一個選項。 您可以在此處查看更多遊覽選項。

創建介紹步驟

tour.addStep({ id: 'introduction', text: 'Welcome to Our Dashboard', classes: 'example-step-extra-class', buttons: [ { classes: 'btn btn-primary', text: 'Next', action: tour.next } ] });​

儀表板.js

這是一個歡迎遊覽彈出窗口，因此我們沒有分配任何元素目標（如類或 id）。 這將顯示為頁面中心的歡迎消息彈出窗口。

我們有更多的遊覽方法，將在下一步深入研究。

創建第二步——健身活動

tour.addStep( { id: 'activity', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.', attachTo: { element: '.class-activity', on: 'bottom' }, classes: 'example-step-extra-class', buttons: [ { action() { return this.back(); }, classes: 'btn btn-primary', text: 'Back' }, { action() { return this.next(); }, classes: 'btn btn-primary', text: 'Next' } ] });

Tour 提供了很多方法。 讓我們進一步了解一些基本的STEP OPTIONS

  • id：用作步驟id的字符串。 如果未傳遞 id，則會生成一個。
  • text：步驟正文中的文本。 它可以是以下三種類型之一：

◦ HTML 字符串
◦ HTMLElement對象
◦ 構建步驟時要執行的函數。 它必須返回上述兩個選項之一。

  • 標題：步驟的標題。 它在步驟的頂部變成了一個h3 。
  • attachTo：步驟應附加到頁面上的元素。 一個帶有屬性元素的對象。

◦ element：元素選擇器字符串或 DOM 元素。
◦ on：相對於元素放置 Popper 工具提示的可選方向。

  • 可能的字符串值： 'auto'、'auto-start'、'auto-end'、'top'、'top-start'、'top-end'、'bottom'、'bottom-start'、'bottom-end ', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'
附加到

如果您不指定attachTo ，該元素將出現在屏幕中間。

  • cancelIcon取消圖標的選項

◦ enabled是否應在步驟標題中顯示取消“✕”？
◦ label要為aria-label添加的標籤

  • classes：要添加到步驟內容元素的一串額外類。
  • 按鈕：要添加到步驟的按鈕數組。 這些將呈現在主體文本下方的頁腳中。 數組中的每個按鈕都是以下格式的對象：

◦ text：按鈕的 HTML 文本
◦類：應用於<a>的額外類
◦ action：單擊按鈕時執行的功能。 它會自動綁定到與該步驟關聯的遊覽，因此諸如this.next之類的內容將在動作中起作用。

這下一個

創建第三步：新課程

為了使本文簡短，我不會在此處添加進一步的步驟。 我們可以按照上述步驟，在此處創建所需的盡可能多的步驟。 創建完所有步驟後，我們將最終開始遊覽。

要開始遊覽，只需在您的 Tour 實例上調用start ：

 tour.start();

乾杯！！ 我們現在為儀表板添加了一個遊覽。

注意：瀏覽並遵循所有可用的方法、事件和選項，以獲得更具互動性的牧羊人之旅。