Site updated: 2023-07-01 13:57:48
This commit is contained in:
1 parent
3d7c209700
commit
6920aad390
169 files changed
+175
-173
No files matched your search
@@ -32,7 +32,8 @@
|
||||
<category term="jsdelivr" scheme="https://hitoli.com/tags/jsdelivr/" />
|
||||
<pubDate>Sat, 01 Jul 2023 01:15:00 +0800</pubDate>
|
||||
<description><![CDATA[ <h4 id="前言"><a class="anchor" href="#前言">#</a> 前言</h4>
|
||||
<div class="note primary该篇文章介绍了如何对shoka主题进行jsdelivr聚合拆分,以便使用国内镜像源和异步加载,从而优化网站速度。具体操作包括更改模板、注册helper和更改配置。其中,推荐使用advVendors配置,可自定义加载源和js文件名,同时支持异步加载、pjax刷新和integrity防XXS等特性。">
|
||||
<div class="note primary">
|
||||
<p>该篇文章介绍了如何对 shoka 主题进行 jsdelivr 聚合拆分,以便使用国内镜像源和异步加载,从而优化网站速度。具体操作包括更改模板、注册 helper 和更改配置。其中,推荐使用 advVendors 配置,可自定义加载源和 js 文件名,同时支持异步加载、pjax 刷新和 integrity 防 XXS 等特性。</p>
|
||||
</div>
|
||||
<p>众所周知,jsdelivr 在国内的速度可以用慢的一批来形容<br />
|
||||
而 shoka 主题使用了 jsdelivr 的 combine 功能加载第三方 js, 而 combine 在国内没有镜像源<br />
|
||||
@@ -45,7 +46,7 @@
|
||||
<li>更改模板</li>
|
||||
</ol>
|
||||
<p>打开 <span class="red">shoka\layout_partials\layout.njk</span>,找到第 144 行左右:</p>
|
||||
<figure class="highlight html"><figcaption data-lang="HTML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.polyfill.io/v3/polyfill.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="2"></td><td><pre>&#123;&#123; _vendor_js<span class="token entity" title="&#40;">&amp;#40;</span><span class="token entity" title="&#41;">&amp;#41;</span> &#125;&#125;</pre></td></tr><tr><td data-num="3"></td><td><pre>&#123;&#123; _js<span class="token entity" title="&#40;">&amp;#40;</span>'app.js'<span class="token entity" title="&#41;">&amp;#41;</span> &#125;&#125;</pre></td></tr><tr><td data-num="4"></td><td><pre>&#123;&#123; partial<span class="token entity" title="&#40;">&amp;#40;</span>'_partials/third-party/baidu-analytics.njk', &#123;&#125;, &#123;cache: true&#125;<span class="token entity" title="&#41;">&amp;#41;</span> &#125;&#125;</pre></td></tr></table></figure><p>更改为如下内容:</p>
|
||||
<figure class="highlight html"><figcaption data-lang="HTML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.polyfill.io/v3/polyfill.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="2"></td><td><pre>&#123;&#123; _vendor_js() &#125;&#125;</pre></td></tr><tr><td data-num="3"></td><td><pre>&#123;&#123; _js('app.js') &#125;&#125;</pre></td></tr><tr><td data-num="4"></td><td><pre>&#123;&#123; partial('_partials/third-party/baidu-analytics.njk', &#123;&#125;, &#123;cache: true&#125;) &#125;&#125;</pre></td></tr></table></figure><p>更改为如下内容:</p>
|
||||
<figure class="highlight html"><figcaption data-lang="HTML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.polyfill.io/v3/polyfill.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token comment"></span></pre></td></tr><tr><td data-num="5"></td><td><pre>&#123;&#123; _vendor_js() &#125;&#125;</pre></td></tr><tr><td data-num="6"></td><td><pre><span class="token comment"></span></pre></td></tr><tr><td data-num="7"></td><td><pre>&#123;&#123; _js('app.js')&#125;&#125;</pre></td></tr><tr><td data-num="8"></td><td><pre>&#123;&#123; partial('_partials/third-party/baidu-analytics.njk', &#123;&#125;, &#123;cache: true&#125;) &#125;&#125;</pre></td></tr></table></figure><ol start="2">
|
||||
<li>注册 helper</li>
|
||||
</ol>
|
||||
@@ -57,7 +58,7 @@
|
||||
<div class="note info">
|
||||
<p>推荐内容,可根据自己情况更改</p>
|
||||
</div>
|
||||
<figure class="highlight yaml"><figcaption data-lang="YAML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token key atrule">advVendors</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="2"></td><td><pre> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span></pre></td></tr><tr><td data-num="3"></td><td><pre> <span class="token key atrule">github</span><span class="token punctuation">:</span> <span class="token string">"https://cdn.jsdelivr.net/gh/"</span></pre></td></tr><tr><td data-num="4"></td><td><pre> <span class="token key atrule">combine</span><span class="token punctuation">:</span> <span class="token string">"https://cdn.jsdelivr.net/"</span></pre></td></tr><tr><td data-num="5"></td><td><pre> <span class="token key atrule">npm</span><span class="token punctuation">:</span> <span class="token string">"https://unpkg.com/"</span></pre></td></tr><tr><td data-num="6"></td><td><pre> <span class="token key atrule">js</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="7"></td><td><pre> <span class="token key atrule">pace</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="8"></td><td><pre> <span class="token key atrule">src</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//lf9<span class="token punctuation">-</span>cdn<span class="token punctuation">-</span>tos.bytecdntp.com/cdn/expire<span class="token punctuation">-</span>1<span class="token punctuation">-</span>M/pace/1.0.2/pace.min.js</pre></td></tr><tr><td data-num="9"></td><td><pre> <span class="token key atrule">pjax</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="10"></td><td><pre> <span class="token key atrule">src</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//lib.baomitu.com/pjax/0.2.8/pjax.min.js</pre></td></tr><tr><td data-num="11"></td><td><pre> <span class="token key atrule">fetch</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="12"></td><td><pre> <span class="token key atrule">src</span><span class="token punctuation">:</span> npm/whatwg<span class="token punctuation">-</span>fetch@3.4.0/dist/fetch.umd.js</pre></td></tr><tr><td data-num="13"></td><td><pre> <span class="token key atrule">anime</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="14"></td><td><pre> <span class="token key atrule">src</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//lf9<span class="token punctuation">-</span>cdn<span class="token punctuation">-</span>tos.bytecdntp.com/cdn/expire<span class="token punctuation">-</span>1<span class="token punctuation">-</span>M/animejs/3.2.0/anime.min.js</pre></td></tr><tr><td data-num="15"></td><td><pre> <span class="token key atrule">algolia</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="16"></td><td><pre> <span clasLine truncated
|
||||
<figure class="highlight yaml"><figcaption data-lang="YAML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token key atrule">advVendors</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="2"></td><td><pre> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span></pre></td></tr><tr><td data-num="3"></td><td><pre> <span class="token key atrule">github</span><span class="token punctuation">:</span> <span class="token string">"https://cdn.jsdelivr.net/gh/"</span></pre></td></tr><tr><td data-num="4"></td><td><pre> <span class="token key atrule">combine</span><span class="token punctuation">:</span> <span class="token string">"https://cdn.jsdelivr.net/"</span></pre></td></tr><tr><td data-num="5"></td><td><pre> <span class="token key atrule">npm</span><span class="token punctuation">:</span> <span class="token string">"https://unpkg.com/"</span></pre></td></tr><tr><td data-num="6"></td><td><pre> <span class="token key atrule">js</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="7"></td><td><pre> <span class="token key atrule">pace</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="8"></td><td><pre> <span class="token key atrule">src</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//lf9<span class="token punctuation">-</span>cdn<span class="token punctuation">-</span>tos.bytecdntp.com/cdn/expire<span class="token punctuation">-</span>1<span class="token punctuation">-</span>M/pace/1.0.2/pace.min.js</pre></td></tr><tr><td data-num="9"></td><td><pre> <span class="token key atrule">pjax</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="10"></td><td><pre> <span class="token key atrule">src</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//lib.baomitu.com/pjax/0.2.8/pjax.min.js</pre></td></tr><tr><td data-num="11"></td><td><pre> <span class="token key atrule">fetch</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="12"></td><td><pre> <span class="token key atrule">src</span><span class="token punctuation">:</span> npm/whatwg<span class="token punctuation">-</span>fetch@3.4.0/dist/fetch.umd.js</pre></td></tr><tr><td data-num="13"></td><td><pre> <span class="token key atrule">anime</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="14"></td><td><pre> <span class="token key atrule">src</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//lf9<span class="token punctuation">-</span>cdn<span class="token punctuation">-</span>tos.bytecdntp.com/cdn/expire<span class="token punctuation">-</span>1<span class="token punctuation">-</span>M/animejs/3.2.0/anime.min.js</pre></td></tr><tr><td data-num="15"></td><td><pre> <span class="token key atrule">algolia</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="16"></td><td><pre> <span clasLine truncated
|
||||
<figure class="highlight yaml"><figcaption data-lang="YAML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token key atrule">advVendors</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="2"></td><td><pre> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token comment">#是否开启,关闭使用主题默认加载</span></pre></td></tr><tr><td data-num="3"></td><td><pre> <span class="token key atrule">github</span><span class="token punctuation">:</span> <span class="token comment">#github 使用的加载源,需要协议头和末尾斜杠</span></pre></td></tr><tr><td data-num="4"></td><td><pre> <span class="token key atrule">combine</span><span class="token punctuation">:</span> <span class="token comment">#聚合 js 使用的加载源 (不建议使用)</span></pre></td></tr><tr><td data-num="5"></td><td><pre> <span class="token key atrule">npm</span><span class="token punctuation">:</span> <span class="token comment">#npm 的加载源</span></pre></td></tr><tr><td data-num="6"></td><td><pre> <span class="token key atrule">js</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="7"></td><td><pre> <span class="token key atrule">jspackage</span><span class="token punctuation">:</span> <span class="token comment">#js 名,可以与文件名不一致</span></pre></td></tr><tr><td data-num="8"></td><td><pre> <span class="token key atrule">src</span><span class="token punctuation">:</span> <span class="token string">"资源地址,详情见后面"</span></pre></td></tr><tr><td data-num="9"></td><td><pre> <span class="token comment"># async: true 异步加载此 js</span></pre></td></tr><tr><td data-num="10"></td><td><pre> <span class="token comment"># data-pjax: true 在 pjax 加载时刷新此 js</span></pre></td></tr><tr><td data-num="11"></td><td><pre> <span class="token comment"># hash-value: 这个资源的 integrity 值,用于防 XXS</span></pre></td></tr><tr><td data-num="12"></td><td><pre> <span class="token comment"># deferLoad: true 使用动态 DOM 节点添加延迟 js 加载 (实验性)</span></pre></td></tr><tr><td data-num="13"></td><td><pre></pre></td></tr><tr><td data-num="14"></td><td><pre><span class="token key atrule">vendorsList</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="15"></td><td><pre> <span class="token key atrule">js</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="16"></td><td><pre> <span class="token punctuation">-</span> jspackage <span class="token comment">#与上方 jspackage 一致即可</span></pre></td></tr></table></figure><p>资源地址格式如下:</p>
|
||||
<p><span class="red"><span class="exturl" data-url="aHR0cHM6Ly9leGFtcGxlLmNvbS94eHguanM=">https://example.com/xxx.js</span></span> 使用 http (s) 地址加载 js<br />
|
||||
<span class="red">combine/xxx.js,xxx.js</span> 使用 jsdelivr 的 combine 功能加载 (不推荐)<br />
|
||||
|
||||
Reference in new issue
Block a user