如何在多页Intro.js教程中保持「Previous」按钮始终可见？

1. 强制显示「Previous」按钮（单步页面也可见） #

Intro.js默认会在当前步骤为第1步（索引0）时隐藏「Previous」按钮，要强制显示并实现回退上一页功能，可通过以下方式处理：

function startTutorial() {
  const intro = introJs().setOptions({
    steps: [
      {
        title: '单步教程',
        intro: '这是单步页面的教程内容',
        position: 'center'
      }
    ],
    exitOnOverlayClick: true,
    showBullets: false,
    nextLabel: 'Next',
    prevLabel: 'Previous',
    doneLabel: 'Finish'
  });

  // 启动后强制显示Previous按钮并绑定回退事件
  intro.onstart(function() {
    const prevBtn = document.querySelector('.introjs-prevbutton');
    if (prevBtn) {
      prevBtn.style.display = 'inline-block';
      prevBtn.onclick = function(e) {
        e.preventDefault();
        window.location.href = '{{ path("app_prev_page", {"tutorial": true}) }}';
      };
    }
  }).oncomplete(function() {
    window.location.href = '{{ path("app_next_page", {"tutorial": true}) }}';
  }).start();
}

多步页面无需额外修改，Intro.js会正常处理Prev按钮的原生逻辑。

2. 显示全教程总步数 #

要显示全局总步数而非单页步数，需在各页面传递总步数参数（比如URL的totalSteps参数），再覆盖Intro.js默认的步骤计数显示：

// 工具函数：获取URL参数
function getUrlParam(name) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(name);
}

function startTutorial() {
  const totalSteps = parseInt(getUrlParam('totalSteps')) || 0;
  const currentPageSteps = [
    {
      title: 'Welcome',
      intro: "Intro text",
      position: 'center'
    },
    {
      element: document.querySelector('[data-step="1"]'),
      intro: "Step 1"
    }
  ];
  // 当前页面步骤在全局中的起始索引（需根据实际页面配置调整）
  const startIndex = parseInt(getUrlParam('stepStart')) || 0;

  const intro = introJs().setOptions({
    steps: currentPageSteps,
    exitOnOverlayClick: true,
    showBullets: false,
    nextLabel: 'Next',
    prevLabel: 'Previous',
    doneLabel: 'Next'
  });

  // 修改步骤计数为全局进度
  intro.onbeforechange(function() {
    const stepCountEl = document.querySelector('.introjs-helperNumberLayer');
    if (stepCountEl && totalSteps > 0) {
      const currentGlobalStep = startIndex + this._currentStep;
      stepCountEl.textContent = `${currentGlobalStep + 1} / ${totalSteps}`;
    }
  }).oncomplete(function() {
    // 跳转时传递全局进度参数
    window.location.href = '{{ path("app_next_page", {"tutorial": true, "totalSteps": totalSteps, "stepStart": startIndex + currentPageSteps.length}) }}';
  }).start();
}

这样步骤提示框右上角会显示全局进度，比如3 / 5而非单页的1 / 1。

3. 单个函数管理所有页面教程步骤 #

可以将所有教程步骤统一配置在全局对象中，单个函数负责加载当前页面步骤、处理跳转和按钮逻辑：

第一步：定义全局步骤配置 #

可放在单独JS文件或后端注入全局变量：

window.globalTutorialSteps = [
  // 第1页步骤
  {
    title: 'Welcome',
    intro: "Intro text",
    position: 'center',
    page: 'page1'
  },
  {
    element: '[data-step="1"]',
    intro: "Step 1",
    page: 'page1'
  },
  // 第2页步骤
  {
    title: '单步教程',
    intro: '这是第2页的内容',
    position: 'center',
    page: 'page2'
  },
  // 更多页面步骤...
];

第二步：统一管理函数 #

function startGlobalTutorial() {
  // 获取当前页面标识（URL参数或页面data属性）
  const currentPage = getUrlParam('page') || document.body.dataset.page;
  // 筛选当前页面的步骤
  const currentSteps = window.globalTutorialSteps.filter(step => step.page === currentPage);
  // 计算当前页面步骤在全局中的起始索引
  const startIndex = window.globalTutorialSteps.findIndex(step => step.page === currentPage);
  const totalSteps = window.globalTutorialSteps.length;

  const intro = introJs().setOptions({
    steps: currentSteps,
    exitOnOverlayClick: true,
    showBullets: false,
    nextLabel: 'Next',
    prevLabel: 'Previous',
    doneLabel: 'Finish'
  });

  // 单步页面强制显示Prev按钮并跳转上一页
  intro.onstart(function() {
    const prevBtn = document.querySelector('.introjs-prevbutton');
    if (prevBtn && currentSteps.length === 1) {
      prevBtn.style.display = 'inline-block';
      prevBtn.onclick = function(e) {
        e.preventDefault();
        const prevPageStep = window.globalTutorialSteps[startIndex - 1];
        if (prevPageStep) {
          window.location.href = `/${prevPageStep.page}?tutorial=true`;
        }
      };
    }
  });

  // 显示全局步数进度
  intro.onbeforechange(function() {
    const stepCountEl = document.querySelector('.introjs-helperNumberLayer');
    if (stepCountEl) {
      const currentGlobalStep = startIndex + this._currentStep;
      stepCountEl.textContent = `${currentGlobalStep + 1} / ${totalSteps}`;
    }
  });

  // 完成当前页面步骤后自动跳转到下一页
  intro.oncomplete(function() {
    const nextGlobalStepIndex = startIndex + currentSteps.length;
    if (nextGlobalStepIndex < totalSteps) {
      const nextPage = window.globalTutorialSteps[nextGlobalStepIndex].page;
      window.location.href = `/${nextPage}?tutorial=true`;
    } else {
      // 教程全部完成，跳转到指定页面
      window.location.href = '/';
    }
  }).start();
}

每个页面只需调用startGlobalTutorial()，即可统一管理所有步骤的跳转和显示逻辑。

内容的提问来源于stack exchange，提问作者Niek