투어 모듈 - Drupal 9에서 사용자 정의 테마에 대한 나만의 투어 만들기

게시 됨: 2021-09-28

낯선 곳에서 가이드 투어보다 더 좋은 것이 어디 있겠습니까?

사용자 경험은 서서히 모든 비즈니스의 초점으로 바뀌고 있습니다. 사용자 인터페이스 상호 작용을 통해 사용자를 올바른 방향으로 안내하는 데 도움이 되는 경험을 제공하는 것은 모든 비즈니스의 판도를 바꿀 수 있습니다. 이 기사에서 우리는 Drupal 9의 Tour 모듈을 탐색할 것입니다. Tour 모듈을 사용하면 기존 보기에 대한 사전 구축된 가이드 둘러보기를 할 수 있을 뿐만 아니라 사용자 정의 테마에 Tour 모듈을 통합할 수도 있습니다. 나중에 자세히 설명하겠습니다).

Drupal 9 투어 모듈

사용자가 쉽게 눈에 띄지 않는 사이트의 특정 구성 요소에 더 집중하기를 원할 때 Drupal 9 Tour 모듈을 구현하고 싶을 것입니다. 또한 가이드 워크플로를 통해 사용자를 안내하려는 경우에도 유용합니다. Tour 모듈은 Drupal 8부터 Drupal 코어에 포함되어 있습니다.

모듈을 활성화하면 툴팁을 통해 웹사이트 인터페이스에 대한 가이드 투어를 제공합니다. 둘러보기를 수행하려면 다음에서 기존 보기를 편집할 수 있습니다.

 /admin/structure/views

관리 도구 모음의 오른쪽 상단에 있는 "? 둘러보기" 링크를 클릭합니다. 당신은 또한 방문 할 수 있습니다

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

보기 둘러보기를 자동으로 시작합니다.

Drupal 8에서 Tour 모듈은 Joyride jQuery 플러그인을 기반으로 하며 Drupal 9.2에서 Shepherd.js와 함께 더 이상 사용되지 않습니다.

YML 파일을 통해 모듈 및 관리자 인터페이스에 대한 둘러보기를 추가하는 또 다른 방법이 있습니다. 여기에 사용자 정의 테마에 둘러보기를 추가하고 있습니다.

Shepherd.js는 무엇입니까?

Shepherd는 앱이나 웹사이트의 가이드 투어를 쉽게 만들 수 있는 JavaScript 라이브러리입니다. 또 다른 오픈 소스 라이브러리인 Popper.js를 활용하여 각 둘러보기 "단계"에 대한 대화 상자를 렌더링합니다.

사용자 정의 테마에 둘러보기 모듈 통합

Drupal 9에는 통합할 여러 유형의 콘텐츠 페이지가 있습니다.

페이지 투어
노드 투어
투어 등 보기

아래 표시된 이미지와 같이 모든 그래프와 값을 표시할 여러 카드가 있는 대시보드 페이지가 있다고 가정해 보겠습니다. 여기에서 둘러보기를 통해 카드를 통해 사용자를 쉽게 안내하고 몇 가지 세부 정보를 보여줍니다.

이미지 크레딧 : 대시보드 디자인

대시보드 둘러보기 라이브러리 만들기

투어 요구 사항:

아래 항목/카드에 필요한 가이드 투어

피트니스 활동
새로운 코스
새로 만들기
오늘의 이득
활성 회원
월간 리뷰
포인트들
지금 지불(액션 버튼)

이제 총 8개의 단계가 있습니다. 이 예에서는 시작할 몇 가지 단계를 만들고 나머지 카드에 대해 동일한 패턴을 계속할 것입니다.

시작하자.

1단계: THEME.libraries.yml에 둘러보기 라이브러리 만들기

대시보드 페이지/템플릿에 포함할 수 있도록 대시보드 둘러보기를 위한 사용자 지정 라이브러리를 만들고 있습니다. 즉, Dashboard.html.twig

테마.libraries.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' } ] });

둘러보기 다양한 방법을 제공합니다. 몇 가지 기본 단계 옵션 에서 조금 더 나아가 보겠습니다.

id: 단계의 id 로 사용할 문자열입니다. ID가 전달되지 않으면 ID가 생성됩니다.
text: 단계 본문의 텍스트입니다. 다음 세 가지 유형 중 하나일 수 있습니다.

◦ HTML 문자열
◦ HTMLElement 객체
◦ 단계가 빌드될 때 실행할 함수 입니다. 위의 두 옵션 중 하나를 반환해야 합니다.

제목: 단계의 제목입니다. 단의 상단에서 h3 가 됩니다.
attachTo: 단계가 페이지에 첨부되어야 하는 요소입니다. 속성 요소 및 켜짐이 있는 개체입니다.

◦ 요소: 요소 선택자 문자열 또는 DOM 요소.
◦ 켜기: 요소를 기준으로 Popper 도구 설명을 배치할 선택적 방향입니다.

가능한 문자열 값: 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end ', '오른쪽', '오른쪽 시작', '오른쪽 끝', '왼쪽', '왼쪽 시작', '왼쪽 끝'

attachTo 를 지정하지 않으면 요소가 화면 중앙에 나타납니다.

취소 아이콘에 대한 cancelIcon 옵션

◦ 활성화 됨 단계 헤더에 취소 "✕"가 표시되어야 합니까?
◦ label aria-label 에 추가할 레이블

classes: 단계의 콘텐츠 요소에 추가할 추가 클래스 문자열입니다.
버튼: 단계에 추가할 버튼 배열입니다. 이들은 본문 텍스트 아래 바닥글에 렌더링됩니다. 배열의 각 버튼은 다음 형식의 개체입니다.

◦ 텍스트: 버튼의 HTML 텍스트
◦ 클래스: <a> 에 적용할 추가 클래스
◦ action: 버튼을 클릭했을 때 실행되는 기능. 단계가 연결된 둘러보기 에 자동으로 바인딩되므로 this.next 와 같은 작업이 작업 내에서 작동합니다.

세 번째 단계 생성: 신규 코스

이 기사를 짧게 유지하기 위해 여기에 추가 단계를 추가하지 않습니다. 위의 단계에 따라 여기에서 필요한 만큼의 단계를 생성할 수 있습니다. 모든 단계를 만든 후 드디어 둘러보기를 시작합니다.

둘러보기를 시작하려면 Tour 인스턴스에서 start 를 호출하면 됩니다.

 tour.start();

건배!! 이제 대시보드에 대한 둘러보기를 추가했습니다.

참고: 사용 가능한 모든 방법, 이벤트 및 옵션 을 살펴보고 따라가면 더 대화식 셰퍼드 투어를 이용할 수 있습니다.