찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Shepherd: 새로운 JavaScript 라이브러리로 사용자를 안내하세요

Shepherd: 새로운 JavaScript 라이브러리로 사용자를 안내하세요

PHPz
PHPz원래의
2024-08-21 06:20:021110검색

"양이나 양 떼를 보호하거나 인도하거나 감시하는 사람을 목자라고 합니다". 그런데 개발자들은 어떻게 양치기를 할 수 있나요?? Shepherd Js는 사용자를 안내하고 사용자가 애플리케이션 또는 애플리케이션의 특정 부분을 자세하고 설명적인 방식으로 이해할 수 있도록 하는 최고의 OS 도구 중 하나입니다.
 

셰퍼드란?? ?

Shepherd는 사용자에게 앱 사용을 안내하는 JavaScript 라이브러리입니다. 또 다른 오픈 소스 라이브러리인 플로팅 UI를 사용하여 각 투어 "단계"에 대한 대화 상자를 렌더링합니다.

요컨대 사용자에게 앱 둘러보기를 안내하세요.

맞춤형 사용자 온보딩 투어, 교육, 공지사항을 만들어 사용자 채택을 유도할 수 있습니다.

양치는 어떻게 합니까? ??

Shepherd를 사용하면 앱이나 웹사이트 내에서 맞춤형 투어나 여행을 통해 사용자를 안내할 수 있습니다. 최소한의 스타일로 사용자 정의가 가능한 Shepherd를 사용하면 사용하기 쉬우면서도 강력한 사용자 정의가 가능합니다. React, Ember, Angular, Vue.js, ES 모듈 또는 일반 JavaScript를 포함한 다양한 프레임워크가 지원됩니다.

Shepherd 설치 단계 ?️:

  1. 아래 명령을 사용하면 npm, Yarn, pnpm 및 bun을 사용하여 Shepherd를 직접 설치할 수 있습니다.

    • npm 설치: npm install sheep.js
    • 실 설치: 실 추가 sheep.js
    • pnpm 설치: pnpm은 sheep.js를 추가합니다.
    • bun 설치: bun 추가 sheep.js

  2. jsDelivr CDN을 직접 사용하여 Shepherd를 사용할 수도 있습니다.

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/shepherd.js@13.0.0/dist/esm/shepherd.mjs"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/shepherd.js@13.0.0/dist/css/shepherd.css"
/>

 

단계를 만드는 방법은 무엇입니까? ?

셰퍼드 투어를 만드는 것은 매우 쉽습니다. 아래 코드를 따르세요.

const tour = new Shepherd.Tour({
        defaultStepOptions: {
            cancelIcon: {
                enabled: true
            },
            classes: 'class-1 class-2',
            scrollTo: { behavior: 'smooth', block: 'center' }
        }
    });

    tour.addStep({
        title: 'Creating a Shepherd Tour',
        text: 'Creating a Shepherd tour is easy.
               Just create a "Tour" instance, and add as many
               steps as you want.',
        attachTo: {
            element: '.hero-example',
            on: 'bottom'
        },
        buttons: [
            {
                action() {
                    return this.back();
                },
                classes: 'shepherd-button-secondary',
                text: 'Back'
            },
            {
                action() {
                    return this.next();
                },
                text: 'Next'
            }
        ],
        id: 'creating'
    });

    tour.start(); //starts the tour

 

스타일을 바꾸는 방법은 무엇입니까? ?

ShepherdJS 라이브러리가 페이지에 삽입하는 HTML은 다음과 같습니다.

<div aria-describedby="step1-description" role="dialog" tabindex="0" class="shepherd-element shepherd-enabled" data-shepherd-step-id="step1" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(393px, 302px);" data-popper-placement="bottom">
   <div class="shepherd-arrow" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate(192px);"></div>
   <div class="shepherd-content">
      <div class="shepherd-text" id="step1-description">Users seem to be down by 12.4%. Is that bad?</div>
      <footer class="shepherd-footer"><button class=" shepherd-button " tabindex="0">Next</button></footer>
   </div>
</div>

따라서 아래와 같이 요소(예: 화살표)를 보다 쉽게 ​​타겟팅할 수 있습니다.

.shepherd-arrow {
  /* Some styles here... */
}

그리고 눈치채셨겠지만, 단계를 추가할 때 ID가 사용됩니다. 따라서 이는 특정 단계에 대한 설명을 대상으로 하는 데에도 사용될 수 있습니다.
 
위의 것들은 몇 가지 기본 속성입니다. 누군가 투어의 진행 상황을 보여주고 싶다면 그렇게 해도 됩니다! 아래 코드 줄을 따르세요.

when: {
  show() {
    const currentStep = Shepherd.activeTour?.getCurrentStep();
    const currentStepElement = currentStep?.getElement();
    const header = currentStepElement?.querySelector('.shepherd-header');
    const progress = document.createElement('span');
    progress.style['margin-right'] = '315px';
    progress.innerText = `${Shepherd.activeTour?.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour?.steps.length}`;
    header?.insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'));
  }
}

 
자세한 내용은 Shepherd 공식 문서 페이지, 여기에 제공된 링크: https://docs.shepherdpro.com/
에서 확인할 수 있습니다.  

Shepherd Js를 사용한 멋진 프로젝트 ?‍?

1️⃣ 틱택토 ⭕❌

지루한 강의를 듣거나, 친한 친구와 진지한 대화를 나누거나, 인생의 어느 순간에나 우리는 틱택토 게임을 해왔습니다.
이 게임을 지원하고 다시 살아나게 하기 위한 멋진 프로젝트가 Susheel Thapa에 의해 만들어졌습니다. 프로젝트는 OS입니다. 이 프로젝트는 Shepherd의 가장 좋은 활용 사례 중 하나를 보여줍니다.

라이브 데모: https://tictactoe.susheelthapa.com.np/
Github 링크: https://github.com/SusheelThapa/Tic-Tac-Toe
셰퍼드 구현: https://github.com/SusheelThapa/Tic-Tac-Toe/tree/main/src/comComponents/Shepherd

Shepherd: Guide your users with a new JavaScript library

Shepherd Js를 이용한 게임 가이드 투어

 

2️⃣ 스터디메이트?

StudyMate는 페이지별 PDF 요약을 제공하고 대화형 플래시카드를 생성하여 학습 경험을 향상시키도록 설계된 혁신적인 웹 애플리케이션입니다. Shepherd.js의 통합으로 StudyMate는 사용자가 애플리케이션의 기능을 원활하게 탐색할 수 있도록 가이드 투어 기능을 제공합니다. StudyMate는 사용자가 구조화된 방식으로 주요 개념과 정보를 빠르게 검토할 수 있도록 하여 막바지 수정 세션에 특히 유용합니다.

이 프로젝트는 Subash Lamichhane이 제작했습니다.

Github 링크: https://github.com/Subash-Lamichhane/StudyMate
셰퍼드 구현: https://github.com/Subash-Lamichhane/StudyMate/blob/main/frontend/src/pages/LandingPage.jsx

Shepherd: Guide your users with a new JavaScript library

Shepherd Js를 활용한 애니메이션과 함께하는 Study Mate 가이드 투어

 

3️⃣ 시드링크 ?

SeedLink는 근처 묘목장과 정원에서 볼 수 있는 다양한 식물을 탐색할 수 있는 프런트엔드 웹 애플리케이션입니다. 구매하실 수도 있고, 조사해 보실 수도 있습니다. 그게 다야?? 아니요, 앱을 탐색하여 자세히 알아보세요! ?

이 프로젝트는 Rohan Sharma가 제작했습니다. (예, 제가 바로 그 제작자입니다.)

Github 링크: https://github.com/RS-labhub/SeedLink-Shepherd
Shepherd 구현: https://github.com/RS-labhub/SeedLink-Shepherd/blob/main/src/shepherd.js

Shepherd: Guide your users with a new JavaScript library

Shepherd Js를 사용하여 시각화하고 매력적인 테마를 갖춘 SeedLink 가이드 투어

 

끝까지 이동 중... ?

Shepherd는 모든 기능을 갖춘 오픈 소스 디지털 채택 플랫폼(DAP)이자 사용자 온보딩 서비스입니다.

셰퍼드도 유료 프로 버전으로 진화했습니다. Shepherd-Pro가 제공하는 기능 목록은 다음과 같습니다.

  • 맞춤형 투어 템플릿
  • 분석 통합
  • 다국어 지원
  • 사용자 행동 추적
  • 통합 기능
  • 반응형 디자인
  • 피드백 메커니즘
  • 고급 분기 논리

아직 사용해보지 않으셨다면 꼭 한 번 방문해 보세요! 후회하지 않을 거라고 약속해요 ?

Github의 Star Shepherd ⭐

위 내용은 Shepherd: 새로운 JavaScript 라이브러리로 사용자를 안내하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html npm angular yarn if for while using JS this promise animation github https ui
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jargons.dev 구축 [# 사전 검색 엔진다음 기사：jargons.dev 구축 [# 사전 검색 엔진

관련 기사

더보기