網頁導引神器Shepherd.js

我們在玩手機遊戲時，應該多少都有看過第一次遊玩時，一步一步教我們要點哪裡的那種導引功能吧！這次要來介紹的套件就是讓網頁能夠快速、簡易的加上這個功能的Shepherd.js套件！

Demo專案(登入後查看效果)
官方Demo

安裝

NPM

1
npm install shepherd.js --save

CDN

1
<script src="https://cdn.jsdelivr.net/npm/shepherd.js@5.0.1/dist/js/shepherd.js"></script>

使用

載入套件

1
import Shepherd from 'shepherd.js';

先實體化Shepherd套件

1
2
3
4
5
6
7
8
const tour = new Shepherd.Tour({
  useModalOverlay: true, // 背景黑幕
  // 預設步驟設定
  defaultStepOptions: {
    classes: 'shadow-md bg-purple-dark', // 使用的主題或加入自訂的class
    scrollTo: true, // 自動滾動到指定位置
  }
});

開始建立導引步驟

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
tour.addSteps([
  // 步驟1
  {
    id: 'step-1', // 步驟id
    text: '這是你持有的日記幣，透過寫日記或記帳可以獲得日記幣喔！', // 步驟標題
    attachTo: {
      element: '.status', // 目標元素設定，使用css選擇器的方式填寫
      on: 'auto', // 位置安排，支援這些值 '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'
    },
    canClickTarget: false, // 是否可以點擊目標元素
    classes: 'custom-step', // 為該步驟加入額外的class
    // 按鈕可以設定多組
    buttons: [
      {
        text: '下一步',
        action: tour.next, // 執行下一個動作
      },
    ],
  },
  // 步驟2
  {
    id: 'step-2',
    text: '點擊+號開始寫日記或記帳吧！',
    canClickTarget: false,
    attachTo: {
      element: '#addBtn',
      on: 'top',
    },
    classes: 'custom-step',
    buttons: [
      {
        text: '完成',
        action: tour.complete, // 結束時記得完成
      },
    ],
  },
]);

執行安排好的步驟

1
tour.start();

移除指定步驟

1
tour.removeStep('步驟id');

註冊事件

1
2
3
4
5
6
7
// 這些為支援的事件complete、cancel、hide、show、start、active、inactive

// 在安排的步驟完成之後，執行一些事件
tour.on('complete', () => {
  // 設定值進入localstorage中，用來辨別使用者已經閱讀過導引
  localStorage.setItem('isGuide', '1');
});

以上為Shepherd.js的簡易介紹，希望可以幫助到一些需要做網頁導引的人！