Skip to content

Commit

Permalink
perf: optimize comment plugin load logic
Browse files Browse the repository at this point in the history
  • Loading branch information
XPoet committed Nov 3, 2023
1 parent dfe304a commit 83711e9
Show file tree
Hide file tree
Showing 15 changed files with 371 additions and 273 deletions.
8 changes: 6 additions & 2 deletions languages/en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ categories: Categories
tag: Tag
tags: Tags
tagcloud: Tag Cloud
comment: Comment
comments: Comments
home: Home
archive: Archive
archives: Archives
Expand Down Expand Up @@ -92,3 +90,9 @@ post:
weibo: "Share to WeiBo"
wechat_scan: "Scan by WeChat"
reward: Reward Author
comment:
comments: Comments
fail_tip: Comment plugin failed to load
reload: Click to reload
loading: Loading comment plugin
config_error: "Please fill in the required configuration items for %s comment plugin"
8 changes: 6 additions & 2 deletions languages/zh-CN.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ categories: 分类
tag: 标签
tags: 标签
tagcloud: 标签云
comment: 评论
comments: 评论
home: 首页
archive: 归档
archives: 归档
Expand Down Expand Up @@ -92,3 +90,9 @@ post:
weibo: "分享到微博"
wechat_scan: "微信扫一扫"
reward: 打赏作者
comment:
comments: 评论
fail_tip: 评论插件加载失败
reload: 点击重新加载
loading: 正在加载评论插件
config_error: "请完整填写 %s 评论插件必需的配置项"
8 changes: 6 additions & 2 deletions languages/zh-TW.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ categories: 分類
tag: 標籤
tags: 標籤
tagcloud: 標籤雲
comment: 留言
comments: 留言
home: 首頁
archive: 歸檔
archives: 歸檔
Expand Down Expand Up @@ -92,3 +90,9 @@ post:
weibo: "分享到微博"
wechat_scan: "微信掃壹掃"
reward: 給作者打賞
comment:
comments: 留言
fail_tip: 評論插件加載失敗
reload: 點擊重新加載
loading: 正在加載評論插件
config_error: "請完整填寫 %s 評論插件必需的配置項"
13 changes: 7 additions & 6 deletions layout/_partial/comment/comment.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,19 @@ const {
<% if (theme_comment_enable === true && theme_comment_use) { %>
<div class="comments-container border-box">
<div id="comments-anchor" class="comment-area-title border-box">
<i class="fas fa-comments"></i>&nbsp;<%- __('comments') %>
<i class="fas fa-comments"></i>&nbsp;<%- __('comment.comments') %>
</div>
<%- partial('load-handler') %>
<% if (theme_comment_use === 'valine') { %>
<%- partial('valine') %>
<%- partial('./plugins/valine') %>
<% } else if (theme_comment_use === 'gitalk') { %>
<%- partial('gitalk') %>
<%- partial('./plugins/gitalk') %>
<% } else if (theme_comment_use === 'twikoo') { %>
<%- partial('twikoo') %>
<%- partial('./plugins/twikoo') %>
<% } else if (theme_comment_use === 'waline') { %>
<%- partial('waline') %>
<%- partial('./plugins/waline') %>
<% } else if (theme_comment_use === 'giscus') { %>
<%- partial('giscus') %>
<%- partial('./plugins/giscus') %>
<% } %>
</div>
<% } %>
Expand Down
4 changes: 4 additions & 0 deletions layout/_partial/comment/config-error.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<div class="configuration-items-error-tip border-box">
<i class="fa-solid fa-circle-exclamation"></i>
<%- __('comment.config_error', comment_plugin) %>
</div>
78 changes: 0 additions & 78 deletions layout/_partial/comment/giscus.ejs

This file was deleted.

23 changes: 23 additions & 0 deletions layout/_partial/comment/load-handler.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<div class="comment-plugin-fail border-box">
<span class="fail-tip"><%- __("comment.fail_tip") %></span>
<button class="reload keep-button"><%- __("comment.reload") %></button>
</div>
<div class="comment-plugin-loading flex-center border-box">
<i class="loading-icon fa-solid fa-spinner fa-spin"></i>
<span class="load-tip"><%- __("comment.loading") %></span>
</div>
<script data-pjax>
window.KeepCommentPlugin = {}
window.KeepCommentPlugin.hideLoading = () => {
const cplDom = document.querySelector('.comments-container .comment-plugin-loading')
cplDom.style.display = 'none'
}
window.KeepCommentPlugin.loadFailHandle = () => {
window.KeepCommentPlugin.hideLoading()
const cpfDom = document.querySelector('.comments-container .comment-plugin-fail')
cpfDom.style.display = 'flex'
cpfDom.querySelector('.reload').addEventListener('click', () => {
window.location.reload()
})
}
</script>
80 changes: 80 additions & 0 deletions layout/_partial/comment/plugins/giscus.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<%
const { enable: pjax_enable } = theme?.pjax || {}
const {
repo: giscus_repo,
repo_id: giscus_repo_id,
category: giscus_category,
category_id: giscus_category_id,
reactions_enabled: giscus_reactions_enabled,
} = theme?.comment?.giscus || {}
const giscus_language = config?.language || 'zh-CN'
%>
<% if (giscus_repo && giscus_repo_id && giscus_category && giscus_category_id) { %>
<div class="giscus-comments-container">
<div class="giscus" id="giscus"></div>
<script <%= pjax_enable === true ? 'data-pjax' : '' %>
onerror="window.KeepCommentPlugin.loadFailHandle()"
>
if (!window.KeepCommentPlugin?.getGiscusTheme) {
window.KeepCommentPlugin.getGiscusTheme = () => {
return document.body.classList.contains('dark-mode') ? 'dark_dimmed' : 'light_tritanopia'
}
}
if (!window.KeepCommentPlugin?.changeGiscusTheme) {
window.KeepCommentPlugin.changeGiscusTheme = () => {
const iframe = document.querySelector('iframe.giscus-frame')
iframe && iframe.contentWindow.postMessage({
giscus: {
setConfig: {
theme: window.KeepCommentPlugin.getGiscusTheme()
}
}
}, 'https://giscus.app')
}
}
if (!window.KeepCommentPlugin?.initGiscus) {
window.KeepCommentPlugin.initGiscus = () => {
const script = document.createElement('script')
script.async = true
script.src = 'https://giscus.app/client.js'
script.setAttribute('data-repo', '<%= giscus_repo %>')
script.setAttribute('data-repo-id', '<%= giscus_repo_id %>')
script.setAttribute('data-category', '<%= giscus_category %>')
script.setAttribute('data-category-id', '<%= giscus_category_id %>')
script.setAttribute('data-reactions-enabled', '<%= giscus_reactions_enabled === true ? '1' : '0' %>')
script.setAttribute('data-lang', '<%= giscus_language %>')
script.setAttribute('data-mapping', 'pathname')
script.setAttribute('data-strict', '0')
script.setAttribute('data-emit-metadata', '0')
script.setAttribute('data-input-position', 'top')
script.setAttribute('crossorigin', 'anonymous')
script.setAttribute('loading', 'lazy')
script.setAttribute('data-theme', window.KeepCommentPlugin.getGiscusTheme())
document.querySelector('.giscus-comments-container').appendChild(script)
script.onerror = () => {
window.KeepCommentPlugin.loadFailHandle()
}
script.onload = () => {
window.KeepCommentPlugin.hideLoading()
}
const toggleThemeBtn = document.querySelector('.tool-dark-light-toggle')
toggleThemeBtn && toggleThemeBtn.addEventListener('click', () => {
window.KeepCommentPlugin.changeGiscusTheme()
})
}
}
if ('<%= pjax_enable %>' === "true") {
setTimeout(() => {
window.KeepCommentPlugin.initGiscus()
}, 1000)
} else {
window.addEventListener("DOMContentLoaded", window.KeepCommentPlugin.initGiscus)
}
</script>
</div>
<% } else { %>
<%- partial('../config-error', { comment_plugin: 'Giscus' }) %>
<% } %>
Original file line number Diff line number Diff line change
Expand Up @@ -30,42 +30,51 @@ if (t_cdn_enable === true) {
<div class="gitalk-comment-container">
<div id="gitalk-container"></div>
<link rel="stylesheet" href="<%= cdn_css %>">
<script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></script>
<script <%= pjax_enable === true ? 'data-pjax' : '' %>>
function loadGitalk() {
let __gitalk__pathname = decodeURI(location.pathname);
const __gitalk__pathnameLength = __gitalk__pathname.length;
const __gitalk__pathnameMaxLength = 50;
if (__gitalk__pathnameLength > __gitalk__pathnameMaxLength) {
__gitalk__pathname = __gitalk__pathname.substring(0, __gitalk__pathnameMaxLength - 3) + '...';
<script <%= pjax_enable === true ? 'data-pjax' : '' %>
src="<%= cdn_js %>"
async
onerror="window.KeepCommentPlugin.loadFailHandle()"
></script>
<script <%= pjax_enable === true ? 'data-pjax' : '' %>
async
onerror="window.KeepCommentPlugin.loadFailHandle()"
>
window.KeepCommentPlugin.initGitalk = () => {
let gitalkPathname = decodeURI(location.pathname)
const gitalkPathnameLength = gitalkPathname.length
const gitalkPathnameMaxLength = 50
if (gitalkPathnameLength > gitalkPathnameMaxLength) {
gitalkPathname = gitalkPathname.substring(0, gitalkPathnameMaxLength - 3) + '...'
}
try {
Gitalk && new Gitalk({
if (window?.Gitalk) {
new Gitalk({
clientID: '<%= client_id %>',
clientSecret: '<%= client_secret %>',
repo: '<%= repository %>',
owner: '<%= github_id %>',
admin: '<%= github_admins || [github_id] %>',
id: __gitalk__pathname,
id: gitalkPathname,
proxy: '<%= proxy %>',
language: '<%= config?.language || 'zh-CN' %>'
}).render('gitalk-container');
} catch (e) {
window.Gitalk = null;
}).render('gitalk-container')
window.KeepCommentPlugin.hideLoading()
} else {
setTimeout(() => {
window.KeepCommentPlugin.initGitalk()
}, 1000)
}
}
if ('<%= pjax_enable %>' === 'true') {
const loadGitalkTimeout = setTimeout(() => {
loadGitalk();
clearTimeout(loadGitalkTimeout);
}, 1000);
setTimeout(() => {
window.KeepCommentPlugin.initGitalk()
}, 1200)
} else {
window.addEventListener('DOMContentLoaded', loadGitalk);
window.addEventListener('DOMContentLoaded', window.KeepCommentPlugin.initGitalk)
}
</script>
</div>
<% } else { %>
<div class="error-tips">Please fill in Gitalk complete configuration items.</div>
<%- partial('../config-error', { comment_plugin: 'Gitalk' }) %>
<% } %>
Loading

0 comments on commit 83711e9

Please sign in to comment.