• 主页
  • 文章
  • 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();

干杯！！ 我们现在为仪表板添加了一个游览。

注意：浏览并遵循所有可用的方法、事件和选项，以获得更具互动性的牧羊人之旅。