public/blog/lib/pace/README.html

<h1 align="center"> <a href="https://github.com/HubSpot/pace" target="_blank" rel="noopener">Progress bar</a> for <a href="https://github.com/theme-next" target="_blank" rel="noopener">NexT</a></h1><h1 align="center"> Installation</h1><h2> If you want to use the CDN instead of clone this repo, please jump to the Step 3.</h2><h2 align="center"> Step 1 → Go to NexT dir</h2><p>Change dir to <strong>NexT</strong> directory. There must be <code>layout</code>, <code>source</code>, <code>languages</code> and other directories:</p><pre class="sourceCode sh" id="cb1"><code class="sourceCode bash"><div class="sourceLine" id="cb1-1" data-line-number="1">$ <span class="bu">cd</span> themes/next</div>
<div class="sourceLine" id="cb1-2" data-line-number="2">$ <span class="fu">ls</span></div>
<div class="sourceLine" id="cb1-3" data-line-number="3"><span class="ex">_config.yml</span>  crowdin.yml  docs  gulpfile.js  languages  layout  LICENSE.md  package.json  README.md  scripts  source</div></code></pre><h2 align="center"> Step 2 → Get module</h2><p>Install module to <code>source/lib</code> directory:</p><pre class="sourceCode sh" id="cb2"><code class="sourceCode bash"><div class="sourceLine" id="cb2-1" data-line-number="1">$ <span class="fu">git</span> clone https://github.com/theme-next/theme-next-pace source/lib/pace</div></code></pre><h2 align="center"> Step 3 → Set it up</h2><p>Enable module in <strong>NexT</strong> <code>_config.yml</code> file and select your theme:</p><pre class="sourceCode yml" id="cb3"><code class="sourceCode yaml"><div class="sourceLine" id="cb3-1" data-line-number="1"><span class="fu">pace:</span></div>
<div class="sourceLine" id="cb3-2" data-line-number="2">  <span class="fu">enable:</span><span class="at"> true</span></div>
<div class="sourceLine" id="cb3-3" data-line-number="3">  <span class="co"># Themes list:</span></div>
<div class="sourceLine" id="cb3-4" data-line-number="4">  <span class="co"># big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple</span></div>
<div class="sourceLine" id="cb3-5" data-line-number="5">  <span class="co"># corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal</span></div>
<div class="sourceLine" id="cb3-6" data-line-number="6">  <span class="fu">theme:</span><span class="at"> minimal</span></div></code></pre><p><strong>And, if you wants to use the CDN, then need to set:</strong> (you also need to find your corresponding theme css link in <a href="https://www.jsdelivr.com/package/npm/pace-js?path=themes" target="_blank" rel="noopener">jsdelivr</a>)</p><pre class="sourceCode yml" id="cb4"><code class="sourceCode yaml"><div class="sourceLine" id="cb4-1" data-line-number="1"><span class="fu">vendors:</span></div>
<div class="sourceLine" id="cb4-2" data-line-number="2">  ...</div>
<div class="sourceLine" id="cb4-3" data-line-number="3">  <span class="fu">pace:</span><span class="at"> //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js</span></div>
<div class="sourceLine" id="cb4-4" data-line-number="4">  <span class="fu">pace_css:</span><span class="at"> //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css</span></div></code></pre><h1 align="center"> Update</h1><pre class="sourceCode sh" id="cb5"><code class="sourceCode bash"><div class="sourceLine" id="cb5-1" data-line-number="1">$ <span class="bu">cd</span> themes/next/source/lib/pace</div>
<div class="sourceLine" id="cb5-2" data-line-number="2">$ <span class="fu">git</span> pull</div></code></pre>