lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf(cdn, comment): optimized CDN resource loading for comment plugins

This commit is contained in:
XPoet 2022-10-20 23:08:07 +08:00
parent 5d3b841fb1
commit c9ba9ed2a2
5 changed files with 139 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
layout/_partial/comment/gitalk.ejs
View File

@ -1,10 +1,27 @@
<% const {
client_id,
<%
const {
client_id,
client_secret,
repository,
github_id,
github_admins
} = theme.comment.gitalk
} = theme.comment?.gitalk
let cdn_css = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css'
let cdn_js = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js'
const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
if (t_cdn_enable === true) {
switch (t_cdn_provider) {
case 'jsdelivr':
cdn_css = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css'
cdn_js = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js'
break
case 'unpkg':
cdn_css = '//unpkg.com/gitalk/dist/gitalk.css'
cdn_js = '//unpkg.com/gitalk/dist/gitalk.min.js'
break
}
}
%>
<% if(
@ -16,9 +33,8 @@
) { %>
<div class="gitalk-comment-container">
<div id="gitalk-container"></div>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>
src="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script>
<link rel="stylesheet" href="<%= cdn_css %>">
<script <%= theme.pjax.enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></script>
<script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
function loadGitalk() {
let __gitalk__pathname = decodeURI(location.pathname);

22
layout/_partial/comment/twikoo.ejs
View File

@ -1,12 +1,26 @@
<%
const {enable: pjax_enable} = theme.pjax
const { enable: pjax_enable } = theme?.pjax
let {
env_id: tk_env_id, region: tk_region, version: tk_version
} = theme.comment.twikoo
env_id: tk_env_id,
region: tk_region,
version: tk_version
} = theme.comment?.twikoo
if (!tk_version) {
tk_version = '1.6.7'
}
const twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
let twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
if (t_cdn_enable === true) {
switch (t_cdn_provider) {
case 'jsdelivr':
twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
break
case 'unpkg':
twikoo_cdn_url = `//unpkg.com/twikoo@${tk_version}/dist/twikoo.all.min.js`
break
}
}
%>
<% if(theme.comment.use === 'twikoo' && tk_env_id) { %>
<div class="twikoo-container">

131
layout/_partial/comment/valine.ejs
View File

@ -1,66 +1,83 @@
<% if(
theme.comment.use === 'valine'
&& theme.comment.valine.appid
&& theme.comment.valine.appkey
) { %>
<%
const { enable: pjax_enable } = theme?.pjax
const {
appid,
appkey,
placeholder
} = theme.comment?.valine
let cdn_url = '//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'
const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
if (t_cdn_enable === true) {
switch (t_cdn_provider) {
case 'jsdelivr':
cdn_url = '//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'
break
case 'unpkg':
cdn_url = '//unpkg.com/valine@latest/dist/Valine.min.js'
break
}
}
%>
<% if(appid && appkey) { %>
<div class="valine-container">
<script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>
src="//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js"></script>
<script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_url %>"></script>
<div id="vcomments"></div>
<script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
function loadValine() {
new Valine({
el: '#vcomments',
appId: '<%= theme.comment.valine.appid %>',
appKey: '<%= theme.comment.valine.appkey %>',
meta: ['nick', 'mail', 'link'],
avatar: 'wavatar',
enableQQ: true,
placeholder: '<%= theme.comment.valine.placeholder %>',
lang: '<%= config.language %>'.toLowerCase()
});
<script <%= pjax_enable === true ? 'data-pjax' : '' %>>
function loadValine() {
new Valine({
el: '#vcomments',
appId: '<%= appid %>',
appKey: '<%= appkey %>',
meta: ['nick', 'mail', 'link'],
avatar: 'wavatar',
enableQQ: true,
placeholder: '<%= placeholder %>',
lang: '<%= config.language %>'.toLowerCase()
});
function getAuthor(language) {
switch (language) {
case 'en':
return 'Author';
case 'zh-CN':
return '博主';
default:
return 'Master';
function getAuthor(language) {
switch (language) {
case 'en':
return 'Author';
case 'zh-CN':
return '博主';
default:
return 'Master';
}
}
// Add "Author" identify
const getValineDomTimer = setInterval(() => {
const vcards = document.querySelectorAll('#vcomments .vcards .vcard');
if (vcards.length > 0) {
let author = '<%= theme.base_info.author || config.author %>';
if (author) {
for (let vcard of vcards) {
const vnick_dom = vcard.querySelector('.vhead .vnick');
const vnick = vnick_dom.innerHTML;
if (vnick === author) {
vnick_dom.innerHTML = `${vnick} <span class="author">${getAuthor(KEEP.hexo_config.language)}</span>`
}
}
}
clearInterval(getValineDomTimer);
} else {
clearInterval(getValineDomTimer);
}
}, 2000);
}
// Add "Author" identify
const getValineDomTimer = setInterval(() => {
const vcards = document.querySelectorAll('#vcomments .vcards .vcard');
if (vcards.length > 0) {
let author = '<%= theme.base_info.author || config.author %>';
if (author) {
for (let vcard of vcards) {
const vnick_dom = vcard.querySelector('.vhead .vnick');
const vnick = vnick_dom.innerHTML;
if (vnick === author) {
vnick_dom.innerHTML = `${vnick} <span class="author">${getAuthor(KEEP.hexo_config.language)}</span>`
}
}
}
clearInterval(getValineDomTimer);
} else {
clearInterval(getValineDomTimer);
}
}, 2000);
}
if ('<%= theme.pjax.enable %>' === 'true') {
const loadValineTimeout = setTimeout(() => {
loadValine();
clearTimeout(loadValineTimeout);
}, 1000);
} else {
window.addEventListener('DOMContentLoaded', loadValine);
}
if ('<%= pjax_enable %>' === 'true') {
const loadValineTimeout = setTimeout(() => {
loadValine();
clearTimeout(loadValineTimeout);
}, 1000);
} else {
window.addEventListener('DOMContentLoaded', loadValine);
}
</script>
</div>
<% } %>

36
layout/_partial/comment/waline.ejs
View File

@ -5,22 +5,32 @@ let {
version: waline_version,
reaction: waline_reaction,
} = theme.comment.waline
if (!waline_version) {
waline_version = '2'
if (!waline_version) { waline_version = '2' }
let cdn_css = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.css`
let cdn_css_meta = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline-meta.css`
let cdn_js = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.js`
const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
if (t_cdn_enable === true) {
switch (t_cdn_provider) {
case 'jsdelivr':
cdn_css = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.css`
cdn_css_meta = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline-meta.css`
cdn_js = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.js`
break
case 'unpkg':
cdn_css = `//unpkg.com/@waline/client@v${waline_version}/dist/waline.css`
cdn_css_meta = `//unpkg.com/@waline/client@v${waline_version}/dist/waline-meta.css`
cdn_js = `//unpkg.com/@waline/client@v${waline_version}/dist/waline.js`
break
}
}
const waline_cdn_url = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.js`
%>
<% if(theme.comment.use === 'waline' && waline_env_server_url) { %>
<% if(waline_env_server_url) { %>
<div class="waline-comment-container">
<script <%= pjax_enable === true ? 'data-pjax' : '' %>
src="<%= waline_cdn_url %>"
></script>
<link rel="stylesheet"
href="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.css"
/>
<link rel="stylesheet"
href="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline-meta.css"
/>
<link rel="stylesheet" href="<%= cdn_css %>"/>
<link rel="stylesheet" href="<%= cdn_css_meta %>"/>
<script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></script>
<div id="waline-comment"></div>
<script <%= pjax_enable === true ? 'data-pjax' : '' %>>
function loadWaline() {

3
scripts/helpers/helper.js
View File

@ -55,7 +55,8 @@ hexo.extend.helper.register('getPostUrl', function (rootUrl, path) {
const getSourceCdnUrl = (tyle, themeConfig, path) => {
const version = require('../../package.json').version
const { provider = 'jsdelivr' } = themeConfig?.cdn
const cdn = themeConfig?.cdn || {}
const { provider = 'jsdelivr' } = cdn
let urlPrefix = ''
switch (provider.toLocaleLowerCase()) {