在上一期杂志文章《导游您通过导游之旅》中，我们探讨了导游之旅（可在Joomla 4.3中使用）并介绍了它们的使用方法。我们在创建导游之旅作为管理员和开发者的点上停止了。
现在我们将完成这次旅程，以便您可以构建自己的导游之旅！

现在您已经了解了导游之旅以及它们的工作原理，您可能想自己创建一个。
无论您是顾问、网页设计师、网页代理还是开发者，您都可以利用导游之旅，为客户或用户提供独特的体验。

创建导游之旅很简单

首先，您需要决定导游之旅的主题以及您希望在何处提供导游之旅。

假设您想创建一个导游之旅，引导新管理员了解Joomla仪表盘，以便这位管理员对Joomla控制台中的操作有一个“感觉”。

规划导游之旅

仅以管理员权限登录管理控制台，以便您了解管理员将在仪表盘上看到什么。

请注意，您可以为初识Joomla的管理员创建一个访问级别，这样只有拥有该访问级别的人才能看到导游之旅。

您的导游之旅需要

• 导游之旅的标题：导航仪表盘。
• 导游之旅的描述：此导游之旅将帮助您导航Joomla仪表盘的所有元素。
• 导游之旅的URL：administrator/index.php

导游之旅将有4个步骤

• 步骤1：突出显示菜单
• 步骤2：突出显示页眉
• 步骤3：突出显示快速图标
• 步骤4：突出显示页面上可能添加的模块

为了突出仪表板上的特定区域，我们需要找出可以针对哪些元素。这时浏览器就会帮上忙：使用“开发者工具检查”来收集有关页面如何“构建”的信息。

例如，对于第一步，我们可以针对具有id 'sidebarmenu' 的元素。

一般来说，最好针对id而不是class。id是页面上唯一的，但class在页面上可以出现多次。

请注意，如果存在同一类的多个实例，引导游览脚本将选择找到的第一个类。

让我们对其他步骤重复同样的过程。

第二步：我们可以使用id 'header'。
第三步：让我们针对所有具有class 'module-wrapper' 的元素中的第一个。
第四步：让我们针对最后一个'module-wrapper'，它总是包含“将模块添加到仪表板”的那个。在这种情况下，我们将使用'.module-wrapper:last-child'。

我们已经有了创建导游所需的内容。让我们用我们的凭证回到Joomla管理员控制台。

创建导游

转到系统 -> 管理 -> 引导游览
创建一个新的导游。

导游现在出现在导游列表中。

为导游创建步骤

让我们选择突出显示导游包含多少步骤的按钮。

让我们添加第一步。

 第一步：菜单

菜单位于用户屏幕的左侧，因此我们将导游弹出窗口定位在其右侧。

目标元素是'#sidebarmenu'。记住，'sidebarmenu'是id，所以它的CSS表示法以'#'开头。
如您所见，步骤使用CSS选择器语法。

步骤类型是'Next'，因为我们不需要用户进行任何操作，只需转到导游的下一步。

第二步：头部

弹出窗口将定位在头部下方，因此我们选择'Bottom'作为位置。

目标是'#header'，因为头部的id是'header'。

同样，步骤类型是'Next'。

第三步：面板快捷图标

弹出窗口将定位在目标元素的右侧。

'module-wrapper'用于定位页面的第一个'module-wrapper'（无需使用像'.module-wrapper:first-child'这样的东西）。

第四步：添加模块到仪表板

弹出窗口将定位在其目标顶部。

我们使用target '.module-wrapper:last-child .card'来定位到最后一个面板，这是允许用户添加模块到仪表板的面板。
额外的'card'类允许我们专门定位面板，而不需要卡片阴影所需的额外边距。

测试导游

现在是我们测试导游的时候了。我们以管理员身份登录，查看刚刚创建的可用导游。

当然，您可以使用页面重定向和用户交互创建更复杂的导游。
您可以在现有的导游中找到很好的例子。

多语言导游

对于多语言网站，在创建导游时，您有两个选项。

• 要么复制您刚刚创建的导游，更改其语言并翻译标题和描述，
• 或者使用语言键代替标题和描述。

复制导游

此选项将复制导游及其关联的步骤（导游和步骤在复制时未发布）。
然后您可以逐个查看导游，选择首选的语言，并翻译导游和步骤。

您最终将得到一个新的未发布的导游及其未发布的步骤。

在游览中使用语言键

如果您是开发者，并且需要为您的扩展覆盖多种语言，这将非常有用。

创建所有标题和描述的语言键，就像创建核心游览一样。
您只需确保在语言键中包含 GUIDEDTOUR，以便将其识别为导览的关键。

为用户提供翻译，就像为您的扩展中的任何其他语言键一样。

如果您不为扩展创建游览但仍然需要多语言游览，只需通过语言覆盖创建语言键。

导出游览

目前还没有用于导出游览的特定工具。

但是，如果您熟悉数据库，打包游览应该很简单。

游览位于2个数据库表中：_guidedtours 和 _guidedtour_steps。

导出您创建的数据（例如，通过 PhpMyAdmin 等工具），并在您的扩展安装中使用它。这必须通过编程方式完成，以便收集游览的特定值。

以下示例代码将导入为“我的扩展”创建的游览。

   $db = Factory::getDbo();
   $date = Factory::getDate()->toSql();
   $user = Factory::getApplication()->getIdentity();
  
   // Insert a tour
   $query = $db->getQuery(true);
  
   $columns = [
       'title',
       'description',
       'extensions',
       'url',
       'created',
       'created_by',
       'modified',
       'modified_by',
       'published',
       'language',
       'ordering',
       'access',
   ];
  
   $values = [
       'COM_MYEXTENSION_GUIDEDTOUR_DASHBOARD',
       'COM_MYEXTENSION_GUIDEDTOUR_DASHBOARD_DESCRIPTION',
       '["com_myextension"]',
       'administrator/index.php?option=com_myextension',
       $date,
       $user->id,
       $date,
       $user->id,
       1,
       '*',
       1,
       1,
   ];
  
   $dataTypes = [
       ParameterType::STRING,
       ParameterType::STRING,
       ParameterType::STRING,
       ParameterType::STRING,
       ParameterType::STRING,
       ParameterType::INTEGER,
       ParameterType::STRING,
       ParameterType::INTEGER,
       ParameterType::INTEGER,
       ParameterType::STRING,
       ParameterType::INTEGER,
       ParameterType::INTEGER,
   ];
  
   $query->insert($db->quoteName('#__guidedtours'), 'id');
   $query->columns($db->quoteName($columns));
   $query->values(implode(',', $query->bindArray($values, $dataTypes)));
  
   $db->setQuery($query);
  
   try {
  
    $result = $db->execute();
    if ($result) {
        $tourId = $db->insertid();
       
        // Insert steps for the tour
       
        $query->clear();
       
        $columns = [
            'tour_id',
            'title',
            'description',
            'position',
            'target',
            'type',
            'interactive_type',
            'url',
            'created',
            'created_by',
            'modified',
            'modified_by',
            'published',
            'language',
            'ordering',
        ];
       
        $step_values = [];
       
        $step_values[] = [
            $tourId,
            'COM_MYEXTENSION_GUIDEDTOUR_DASHBOARD_STEP1',
            'COM_MYEXTENSION_GUIDEDTOUR_DASHBOARD_STEP1_DESCRIPTION',
            'right',
            '#sidebarmenu',
            0,
            1,
            '',
            $date,
            $user->id,
            $date,
            $user->id,
            1,
            '*',
            1,
        ];
       
        // $step_values[] = [ ... ];
        // ...
       
        $dataTypes = [
            ParameterType::INTEGER,
            ParameterType::STRING,
            ParameterType::STRING,
            ParameterType::STRING,
            ParameterType::STRING,
            ParameterType::INTEGER,
            ParameterType::INTEGER,
            ParameterType::STRING,
            ParameterType::STRING,
            ParameterType::INTEGER,
            ParameterType::STRING,
            ParameterType::INTEGER,
            ParameterType::INTEGER,
            ParameterType::STRING,
            ParameterType::INTEGER,
        ];
       
        $query->insert($db->quoteName('#__guidedtour_steps'), 'id');
        $query->columns($db->quoteName($columns));
       
        foreach ($step_values as $values) {
            $query->values(implode(',', $query->bindArray($values, $dataTypes)));
        }
       
        $db->setQuery($query);
       
        $result = $db->execute();
       }
      
   } catch (ExecutionFailureException $e) {
       Factory::getApplication()->enqueueMessage($e->getQuery());
   }
  

接下来是什么？

在接下来的几个月内，将有一些改进，而我们只是刚刚“触及”所有新可能性的一小部分。

• 核心游览将得到改进，将更加“详细”和实用。
• 将添加更多“开箱即用”的游览，例如仪表板游览。
• 游览可以在用户登录时启动。
• 可以为前端创建游览。

您希望游览能够做什么？您希望看到哪些改进？
您的反馈将帮助我们塑造导览的未来，请在评论中留言或发邮件至 @此电子邮件地址已受到反垃圾邮件保护。您需要启用 JavaScript 才能查看。