Shepherd一款可在应用中快速集成用户引导功能的JS库。无论我们尝试制作Web应用程序有多么简单，引导新用户的初体验通常都是有帮助的。视觉游览可能是最简单的方法。Shepherd是HubSpot的一项开源产品，HubSpot是一项入站营销服务。为他们提供功能强大的库以及良好的文档知识而感到荣幸。
Shepherd怎样
npm
npminstallshepherd.js--save
yarn
yarnaddshepherd.js
使用
lettour=newShepherd.Tour({
defaultStepOptions:{
classes:'shadow-mdbg-purple-dark',
scrollTo:true
}
});
tour.addStep('example',{
title:'ExampleShepherd',
text:'CreatingaShepherdiseasytoo!Justcreate...',
attachTo:'.hero-examplebottom',
advanceOn:'.docs-linkclick'
});
tour.start();
如果您遵循了我的EnvatoTuts+使用PHP构建启动系列，那么您将熟悉MeetingPlanner。看完用户安排的第一次会议后，我决定最好建立某种指南。
最初，我考虑过自己构建它，但是后来我找到了一个开源选项Shepherd。
在今天的教程中，我将向您介绍如何使用Shepherd构建视觉用户之旅。使用Shepherd相对简单，我将回顾一些我自己的代码，这些代码曾用于简化创作过程。
Shepherd的一个简单场景
将基础导览与Shepherd集成到您的应用程序很简单。首先，选择一个主题文件并像这样集成其JavaScript：
<linkrel="stylesheet"href="shepherd-theme-arrows.css"/>
<scriptsrc="tether.min.js"></script>
<scriptsrc="shepherd.min.js"></script>
总之，您可以从ShepherdGitHub页面下载文件。我正在使用上面的shepherd-theme-arrows.css，但是您可以从以下任何默认值中进行选择并进行自定义。