{"id":496,"date":"2021-05-19T16:28:53","date_gmt":"2021-05-19T08:28:53","guid":{"rendered":"http:\/\/zhuxinyong.com\/?p=496"},"modified":"2021-07-19T16:29:58","modified_gmt":"2021-07-19T08:29:58","slug":"%e6%96%b0%e6%89%8b%e5%bc%95%e5%af%bc%e7%bb%84%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=496","title":{"rendered":"\u65b0\u624b\u5f15\u5bfc\u7ec4\u4ef6"},"content":{"rendered":"\n<p>\u65b0\u4ea7\u54c1\u6216\u65b0\u529f\u80fd\u4e0a\u7ebf\uff0c\u4e3a\u4e86\u5e2e\u52a9\u7528\u6237\u5feb\u901f\u660e\u767d\u4ea7\u54c1\u7684\u610f\u56fe\u548c\u4f7f\u7528\u65b9\u6cd5\uff0c\u6240\u4ee5\u65b0\u624b\u5f15\u5bfc\u5fc5\u4e0d\u53ef\u5c11\uff0c\u4e0b\u9762\u6765\u4ecb\u7ecd\u51e0\u4e2a\uff1a<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/usablica\/intro.js\" target=\"_blank\">Intro.js<\/a><\/h2>\n\n\n\n<p>\u8fd9\u4e2a\u4e4b\u524d\u5c31\u7528\u8fc7\uff0c\u73b0\u5728\u5b98\u7f51\u4e5f\u8be5\u4e86\u66f4\u6e05\u6670\u4e86<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/raw.githubusercontent.com\/usablica\/intro.js\/gh-pages\/img\/introjs-demo.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u4f7f\u7528\u65b9\u6cd5\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Include the JavaScript and CSS<\/li><\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">JS : https:\/\/unpkg.com\/intro.js\/minified\/intro.min.js\nCSS: https:\/\/unpkg.com\/intro.js\/minified\/introjs.min.css<\/pre>\n\n\n\n<p>2. Call the&nbsp;<code>introJs.start()<\/code>&nbsp;method<\/p>\n\n\n\n<p>The&nbsp;<code>start()<\/code>&nbsp;method configures the library and starts the product tour.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">introJs().setOptions({\n  steps: [{\n    intro: \"Hello world!\"\n  }, {\n    element: document.querySelector('#login'),\n    intro: \"Click here to login!\"\n  }]\n}).start();<\/pre>\n\n\n\n<p>\u8be6\u7ec6\u7684\u770b\u6587\u6863\uff1a <a href=\"https:\/\/github.com\/usablica\/intro.js\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/usablica\/intro.js<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/kamranahmedse\/driver.js\" target=\"_blank\">Driver.js<\/a> <\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"544\" height=\"478\" src=\"http:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/07\/image-11.png\" alt=\"\" class=\"wp-image-500\" srcset=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/07\/image-11.png 544w, https:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/07\/image-11-300x264.png 300w\" sizes=\"auto, (max-width: 544px) 100vw, 544px\" \/><\/figure>\n\n\n\n<p>\u4f7f\u7528\u65b9\u6cd5\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Install <\/li><\/ol>\n\n\n\n<p>yarn or npm<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">yarn add driver.js&lt;br>npm install driver.js<\/pre>\n\n\n\n<p>cdn<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script src=\"https:\/\/unpkg.com\/driver.js\/dist\/driver.min.js\">&lt;\/script>\n&lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/driver.js\/dist\/driver.min.css\"><\/pre>\n\n\n\n<p>grab the code from&nbsp;<code>dist<\/code>&nbsp;directory and include it directly.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" href=\"\/dist\/driver.min.css\">\n&lt;script src=\"\/dist\/driver.min.js\">&lt;\/script><\/pre>\n\n\n\n<p>2. usage<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import Driver from &lt;a href=\"https:\/\/github.com\/kamranahmedse\/driver.js\">'driver.js'&lt;\/a>;\nimport &lt;a href=\"https:\/\/github.com\/kamranahmedse\/driver.js\">'driver.js\/dist\/driver.min.css'&lt;\/a>;<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const driver = new Driver();\ndriver.highlight('#create-post');<\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u65b0\u4ea7\u54c1\u6216\u65b0\u529f\u80fd\u4e0a\u7ebf\uff0c\u4e3a\u4e86\u5e2e\u52a9\u7528\u6237\u5feb\u901f\u660e\u767d\u4ea7\u54c1\u7684\u610f\u56fe\u548c\u4f7f\u7528\u65b9\u6cd5\uff0c\u6240\u4ee5\u65b0\u624b\u5f15\u5bfc\u5fc5\u4e0d\u53ef\u5c11\uff0c\u4e0b\u9762\u6765\u4ecb\u7ecd\u51e0\u4e2a\uff1a&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,27],"tags":[],"class_list":["post-496","post","type-post","status-publish","format-standard","hentry","category-all","category-tool"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=496"}],"version-history":[{"count":4,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/496\/revisions"}],"predecessor-version":[{"id":502,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/496\/revisions\/502"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}