mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-09-03 12:12:39 +00:00
✨ Feat: add lightgallery support for twikoo content (#64)
This commit is contained in:
Cell
Vendored
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -755,8 +755,8 @@ enableEmoji = true
|
||||
# 评论系统设置
|
||||
[params.page.comment]
|
||||
enable = false
|
||||
# Artalk comment config (https://artalk.js.org/) since v0.2.12
|
||||
# Artalk 评论系统设置 (https://artalk.js.org/) since v0.2.12
|
||||
# Artalk comment config (https://artalk.js.org/) since v0.2.13
|
||||
# Artalk 评论系统设置 (https://artalk.js.org/) since v0.2.13
|
||||
[params.page.comment.artalk]
|
||||
enable = false
|
||||
server = "https://yourdomain/api/"
|
||||
@@ -767,8 +767,8 @@ enableEmoji = true
|
||||
editorTravel = true
|
||||
flatMode = 'auto'
|
||||
maxNesting = 3
|
||||
# Tip: It take effect when params.page.lightgallery is enabled.
|
||||
# 提示: 当 params.page.lightgallery 启用时生效
|
||||
# It take effect when `params.page.lightgallery` is enabled
|
||||
# 当 `params.page.lightgallery` 启用时生效
|
||||
lightgallery = false
|
||||
# Disqus comment config (https://disqus.com/)
|
||||
# Disqus 评论系统设置 (https://disqus.com/)
|
||||
@@ -871,6 +871,9 @@ enableEmoji = true
|
||||
path = ""
|
||||
visitor = true
|
||||
commentCount = true
|
||||
# It take effect when `params.page.lightgallery` is enabled
|
||||
# 当 `params.page.lightgallery` 启用时生效
|
||||
lightgallery = false
|
||||
# Third-party library config
|
||||
# 第三方库配置
|
||||
[params.page.library]
|
||||
|
||||
@@ -525,8 +525,7 @@ Please open the code block below to view the complete sample configuration :(far
|
||||
# {{< version 0.2.13 changed >}} Comment config
|
||||
[params.page.comment]
|
||||
enable = false
|
||||
# {{< version 0.2.13 >}}
|
||||
# {{< link "https://artalk.js.org/" Artalk >}} comment config (https://artalk.js.org/)
|
||||
# {{< version 0.2.13 >}} {{< link "https://artalk.js.org/" Artalk >}} comment config (https://artalk.js.org/)
|
||||
[params.page.comment.artalk]
|
||||
enable = false
|
||||
server = "https://yourdomain/api/"
|
||||
@@ -537,7 +536,7 @@ Please open the code block below to view the complete sample configuration :(far
|
||||
editorTravel = true
|
||||
flatMode = 'auto'
|
||||
maxNesting = 3
|
||||
# Tip: It take effect when params.page.lightgallery is enabled.
|
||||
# It take effect when `params.page.lightgallery` is enabled
|
||||
lightgallery = false
|
||||
# {{< link "https://disqus.com/" Disqus >}} comment config (https://disqus.com)
|
||||
[params.page.comment.disqus]
|
||||
@@ -627,6 +626,8 @@ Please open the code block below to view the complete sample configuration :(far
|
||||
path = ""
|
||||
visitor = true
|
||||
commentCount = true
|
||||
# It take effect when `params.page.lightgallery` is enabled
|
||||
lightgallery = false
|
||||
# {{< version 0.2.7 >}} Third-party library config
|
||||
[params.page.library]
|
||||
[params.page.library.css]
|
||||
|
||||
@@ -536,8 +536,7 @@ hugo
|
||||
# {{< version 0.2.13 changed >}} 评论系统设置
|
||||
[params.page.comment]
|
||||
enable = false
|
||||
# {{< version 0.2.13 >}}
|
||||
# {{< link "https://artalk.js.org/" Artalk >}} 评论系统设置 (https://artalk.js.org/)
|
||||
# {{< version 0.2.13 >}} {{< link "https://artalk.js.org/" Artalk >}} 评论系统设置 (https://artalk.js.org/)
|
||||
[params.page.comment.artalk]
|
||||
enable = false
|
||||
server = "https://yourdomain/api/"
|
||||
@@ -548,7 +547,7 @@ hugo
|
||||
editorTravel = true
|
||||
flatMode = 'auto'
|
||||
maxNesting = 3
|
||||
# 提示：当 params.page.lightgallery 启用时生效
|
||||
# 当 `params.page.lightgallery` 启用时生效
|
||||
lightgallery = false
|
||||
# {{< link "https://disqus.com/" Disqus >}} 评论系统设置 (https://disqus.com)
|
||||
[params.page.comment.disqus]
|
||||
@@ -638,6 +637,8 @@ hugo
|
||||
path = ""
|
||||
visitor = true
|
||||
commentCount = true
|
||||
# 当 `params.page.lightgallery` 启用时生效
|
||||
lightgallery = false
|
||||
# {{< version 0.2.7 >}} 第三方库配置
|
||||
[params.page.library]
|
||||
[params.page.library.css]
|
||||
|
||||
@@ -225,6 +225,9 @@
|
||||
{{- with $twikoo.commentCount -}}
|
||||
{{- $commentConfig = dict "commentCount" . | dict "twikoo" | merge $commentConfig -}}
|
||||
{{- end -}}
|
||||
{{- with $twikoo.lightgallery -}}
|
||||
{{- $commentConfig = dict "lightgallery" . | dict "twikoo" | merge $commentConfig -}}
|
||||
{{- end -}}
|
||||
<noscript>
|
||||
Please enable JavaScript to view the comments powered by <a href="https://twikoo.js.org/" rel="external nofollow noopener noreffer">Twikoo</a>.
|
||||
</noscript>
|
||||
|
||||
+100
-91
@@ -711,100 +711,109 @@ class Theme {
|
||||
}
|
||||
}
|
||||
|
||||
initComment() {
|
||||
if (this.config.comment) {
|
||||
if (this.config.comment.artalk) {
|
||||
const artalk = new Artalk(this.config.comment.artalk);
|
||||
artalk.setDarkMode(this.isDark);
|
||||
this.switchThemeEventSet.add(() => {
|
||||
artalk.setDarkMode(this.isDark);
|
||||
initCommentLightGallery(comments, images) {
|
||||
if (!this.config.lightGallery) {
|
||||
return;
|
||||
}
|
||||
document.querySelectorAll(comments).forEach(($content) => {
|
||||
const $imgs = $content.querySelectorAll(images + ':not([lightgallery-loaded])');
|
||||
$imgs.forEach(($img) => {
|
||||
$img.setAttribute('lightgallery-loaded', '');
|
||||
const $link = document.createElement('a');
|
||||
$link.setAttribute('class', 'comment-lightgallery');
|
||||
$link.setAttribute('href', $img.src);
|
||||
$link.append($img.cloneNode());
|
||||
$img.replaceWith($link);
|
||||
});
|
||||
if ($imgs.length)
|
||||
lightGallery($content, {
|
||||
selector: '.comment-lightgallery',
|
||||
actualSize: false,
|
||||
hideBarsDelay: 2000,
|
||||
speed: 400
|
||||
});
|
||||
this.config.lightGallery &&
|
||||
this.config.comment.artalk.lightgallery &&
|
||||
artalk.on('comments-loaded', () => {
|
||||
document.querySelectorAll('.atk-comment .atk-content').forEach(($content) => {
|
||||
const $imgs = $content.querySelectorAll(
|
||||
'img:not([atk-emoticon]):not([atk-lightbox-loaded])'
|
||||
);
|
||||
$imgs.forEach(($img) => {
|
||||
$img.setAttribute('atk-lightbox-loaded', '');
|
||||
const $link = document.createElement('a');
|
||||
$link.setAttribute('class', 'atk-img-link');
|
||||
$link.setAttribute('href', $img.src);
|
||||
$link.setAttribute('data-src', $img.src);
|
||||
$link.append($img.cloneNode());
|
||||
$img.replaceWith($link);
|
||||
});
|
||||
if ($imgs.length) lightGallery($content, { selector: '.atk-img-link' });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
initComment() {
|
||||
if (!this.config.comment) {
|
||||
return;
|
||||
}
|
||||
if (this.config.comment.artalk) {
|
||||
const artalk = new Artalk(this.config.comment.artalk);
|
||||
artalk.setDarkMode(this.isDark);
|
||||
this.switchThemeEventSet.add(() => {
|
||||
artalk.setDarkMode(this.isDark);
|
||||
});
|
||||
artalk.on('comments-loaded', () => {
|
||||
this.config.comment.artalk.lightgallery &&
|
||||
this.initCommentLightGallery('.atk-comment .atk-content', 'img:not([atk-emoticon])');
|
||||
});
|
||||
return artalk;
|
||||
}
|
||||
if (this.config.comment.gitalk) {
|
||||
this.config.comment.gitalk.body = decodeURI(window.location.href);
|
||||
const gitalk = new Gitalk(this.config.comment.gitalk);
|
||||
gitalk.render('gitalk');
|
||||
return gitalk;
|
||||
}
|
||||
if (this.config.comment.valine) {
|
||||
return new Valine(this.config.comment.valine);
|
||||
}
|
||||
if (this.config.comment.waline) {
|
||||
return new Waline(this.config.comment.waline);
|
||||
}
|
||||
if (this.config.comment.utterances) {
|
||||
const utterancesConfig = this.config.comment.utterances;
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://utteranc.es/client.js';
|
||||
script.type = 'text/javascript';
|
||||
script.setAttribute('repo', utterancesConfig.repo);
|
||||
script.setAttribute('issue-term', utterancesConfig.issueTerm);
|
||||
if (utterancesConfig.label) script.setAttribute('label', utterancesConfig.label);
|
||||
script.setAttribute(
|
||||
'theme',
|
||||
this.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme
|
||||
);
|
||||
script.crossOrigin = 'anonymous';
|
||||
script.async = true;
|
||||
document.getElementById('utterances').appendChild(script);
|
||||
this._utterancesOnSwitchTheme =
|
||||
this._utterancesOnSwitchTheme ||
|
||||
(() => {
|
||||
const message = {
|
||||
type: 'set-theme',
|
||||
theme: this.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme
|
||||
};
|
||||
const iframe = document.querySelector('.utterances-frame');
|
||||
iframe.contentWindow.postMessage(message, 'https://utteranc.es');
|
||||
});
|
||||
this.switchThemeEventSet.add(this._utterancesOnSwitchTheme);
|
||||
return;
|
||||
}
|
||||
if (this.config.comment.twikoo) {
|
||||
const twikooConfig = this.config.comment.twikoo;
|
||||
if (twikooConfig.lightgallery) {
|
||||
twikooConfig.onCommentLoaded = () => {
|
||||
this.initCommentLightGallery('.tk-comments .tk-content', 'img:not(.tk-owo-emotion)');
|
||||
};
|
||||
}
|
||||
twikoo.init(twikooConfig);
|
||||
if (twikooConfig.commentCount) {
|
||||
// https://twikoo.js.org/api.html#get-comments-count
|
||||
twikoo
|
||||
.getCommentsCount({
|
||||
envId: twikooConfig.envId,
|
||||
region: twikooConfig.region,
|
||||
urls: [window.location.pathname],
|
||||
includeReply: false
|
||||
})
|
||||
.then(function (response) {
|
||||
const twikooCommentCount = document.getElementById('twikoo-comment-count');
|
||||
if (twikooCommentCount) twikooCommentCount.innerHTML = response[0].count;
|
||||
});
|
||||
return artalk;
|
||||
}
|
||||
if (this.config.comment.gitalk) {
|
||||
this.config.comment.gitalk.body = decodeURI(window.location.href);
|
||||
const gitalk = new Gitalk(this.config.comment.gitalk);
|
||||
gitalk.render('gitalk');
|
||||
return gitalk;
|
||||
}
|
||||
if (this.config.comment.valine) {
|
||||
return new Valine(this.config.comment.valine);
|
||||
}
|
||||
if (this.config.comment.waline) {
|
||||
return new Waline(this.config.comment.waline);
|
||||
}
|
||||
if (this.config.comment.utterances) {
|
||||
const utterancesConfig = this.config.comment.utterances;
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://utteranc.es/client.js';
|
||||
script.type = 'text/javascript';
|
||||
script.setAttribute('repo', utterancesConfig.repo);
|
||||
script.setAttribute('issue-term', utterancesConfig.issueTerm);
|
||||
if (utterancesConfig.label) script.setAttribute('label', utterancesConfig.label);
|
||||
script.setAttribute(
|
||||
'theme',
|
||||
this.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme
|
||||
);
|
||||
script.crossOrigin = 'anonymous';
|
||||
script.async = true;
|
||||
document.getElementById('utterances').appendChild(script);
|
||||
this._utterancesOnSwitchTheme =
|
||||
this._utterancesOnSwitchTheme ||
|
||||
(() => {
|
||||
const message = {
|
||||
type: 'set-theme',
|
||||
theme: this.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme
|
||||
};
|
||||
const iframe = document.querySelector('.utterances-frame');
|
||||
iframe.contentWindow.postMessage(message, 'https://utteranc.es');
|
||||
});
|
||||
this.switchThemeEventSet.add(this._utterancesOnSwitchTheme);
|
||||
return;
|
||||
}
|
||||
if (this.config.comment.twikoo) {
|
||||
const twikooConfig = this.config.comment.twikoo;
|
||||
twikoo.init(twikooConfig);
|
||||
if (twikooConfig.commentCount) {
|
||||
// https://twikoo.js.org/api.html#get-comments-count
|
||||
twikoo
|
||||
.getCommentsCount({
|
||||
envId: twikooConfig.envId,
|
||||
region: twikooConfig.region,
|
||||
urls: [window.location.pathname],
|
||||
includeReply: false
|
||||
})
|
||||
.then(function (response) {
|
||||
// example: [
|
||||
// { url: '/2020/10/post-1.html', count: 10 },
|
||||
// { url: '/2020/11/post-2.html', count: 0 },
|
||||
// { url: '/2020/12/post-3.html', count: 20 }
|
||||
// ]
|
||||
// If there is an element with id="twikoo-comment-count", set its innerHTML to the count of comments
|
||||
const twikooCommentCount = document.getElementById('twikoo-comment-count');
|
||||
if (twikooCommentCount) twikooCommentCount.innerHTML = response[0].count;
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user