hexo-theme-solitude 1.7.14 → 1.8.1

package/layout/includes/widgets/post/postMeta.pug

@@ -40,40 +40,41 @@
             if theme.post.meta.pv
                 a.post-meta-pv(href=url_for(page.path), title=_p('post.pv'))
                     i.post-meta-icon.solitude.st-fire-fill
-                    if theme.comment.enable
-                        case theme.comment.type
-                            when "twikoo"
+                    if theme.comment.use
+                        case theme.comment.use[0]
+                            when "Twikoo"
                                 span#twikoo_visitors
                                     i.solitude.st-loading-line
-                            when "waline"
+                            when "Waline"
                                 span.waline-pageview-count
                                     i.solitude.st-loading-line
-                            when "valine"
+                            when "Valine"
                                 span.leancloud_visitors(id=url_for(page.path))
                                     span.leancloud-visitors-count
                                         i.solitude.st-loading-line
-                            when 'artalk'
+                            when 'Artalk'
                                 span#ArtalkPV
                                     i.solitude.st-loading-line
-                    else if theme.busuanzi
-                        span#busuanzi_value_page_pv
-                            i.solitude.st-loading-line
-            if theme.post.meta.comment && page.comment
+                    else
+                        if theme.busuanzi
+                            span#busuanzi_value_page_pv
+                                i.solitude.st-loading-line
+            if theme.post.meta.comment && page.comment && theme.comment.count && theme.comment.use
                 span.post-meta-commentcount(title=_p('post.comment'), onclick="sco.scrollTo('post-comment')")
                     i.solitude.st-chat-fill
                     a(href=url_for(page.path) + "#post-comment")
-                        case theme.comment.type
-                            when "twikoo"
-                                span#twikoo-count
+                        case theme.comment.use[0]
+                            when "Twikoo"
+                                span.twikoo-count
                                     i.solitude.st-loading-line
-                            when "waline"
+                            when "Waline"
                                 span.waline-comment-count
                                     i.solitude.st-loading-line
-                            when "valine"
+                            when "Valine"
                                 span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount")
                                     i.solitude.st-loading-line
-                            when 'artalk'
-                                span.waline-comment-count#ArtalkCount
+                            when 'Artalk'
+                                span#ArtalkCount.artalk-count
                                     i.solitude.st-loading-line
 
 include ./wave

package/layout/includes/widgets/third-party/comments/artalk.pug

@@ -1,18 +1,17 @@
-- const { server, site, option } = theme.comment.artalk
-- const { lazyload, count } = theme.comment
+- const { server, site, option } = theme.artalk
+- const { lazyload, count ,use} = theme.comment
 
 script.
-    async function initComment() {
+    !function () {
         let artalkItem = null
         const initArtalk = () => {
             artalkItem = Artalk.init({
-                el: '#comment',
+                el: '#artalk-wrap',
                 server: '!{server}',
                 site: "!{site}",
                 pageKey: location.pathname,
                 darkMode: document.documentElement.getAttribute('data-theme') === 'dark',
             }, !{JSON.stringify(option)})
-
             if (GLOBAL_CONFIG.lightbox === 'null') return
             artalkItem.on('list-loaded', () => {
                 const array = []
@@ -24,27 +23,39 @@ script.
                     })
                     const $content = comment.getRender().$content
                     utils.lightbox($content.querySelectorAll('img:not([atk-emoticon])'))
-                    sco.owoBig()
+                    sco.owoBig({body: '.atk-grp', item: '.atk-item'})
                 })
-                GLOBAL_CONFIG.comment.commentBarrage && PAGE_CONFIG.comment && initializeCommentBarrage(array)
+                !{commentBarrage} && barrageArtalk(array)
             })
-
-            const destroyArtalk = () => {
-                artalkItem.destroy()
-            }
-
+            const destroyArtalk = () => artalkItem.destroy()
             utils.addGlobalFn('pjax', destroyArtalk, 'destroyArtalk')
         }
-
+        const loadArtalk = async () => {
+            if (typeof Artalk === 'object') await initArtalk()
+            else {
+                await utils.getCSS('!{theme.cdn.artalk_css}')
+                await utils.getScript('!{theme.cdn.artalk_js}').then(initArtalk)
+            }
+        }
         const artalkChangeMode = theme => {
-            const artalkWrap = document.getElementById('comment')
-            console.log(artalkWrap, artalkWrap.children.length)
+            const artalkWrap = document.getElementById('artalk-wrap')
             if (!(artalkWrap && artalkWrap.children.length)) return
             const isDark = theme === 'dark'
             artalkItem.setDarkMode(!isDark)
         }
-
         utils.addGlobalFn('themeChange', artalkChangeMode, 'artalk')
+        if ('!{use[0]}' === 'Artalk' || !{lazyload}) {
+            if (!{lazyload}) utils.loadComment(document.getElementById('artalk-wrap'), loadArtalk)
+            else loadArtalk()
+        } else {
+            window.loadTwoComment = loadArtalk
+        }
+    }()
 
-        initArtalk()
-    }
+if commentBarrage
+    script.
+        const barrageArtalk = async array => {
+            await utils.getScript('!{url_for(theme.cdn.commentBarrage)}').then(() => {
+                initializeCommentBarrage(array)
+            })
+        }

package/layout/includes/widgets/third-party/comments/comment.pug

@@ -1,17 +1,53 @@
+- const {use,count} = theme.comment
+
 #post-comment
     .comment-head
         .comment-headline
             i.solitude.st-chat-fill
-            span=_p('comment.title')
-            span
+            span=' ' + _p('comment.title')
+            if count
+                span.count
+                    = ' ('
+                    each name in use
+                        case name
+                            when "Twikoo"
+                                span.twikoo-count
+                                    i.solitude.st-loading-line
+                            when "Waline"
+                                span.waline-comment-count
+                                    i.solitude.st-loading-line
+                            when "Valine"
+                                span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount")
+                                    i.solitude.st-loading-line
+                            when "Artalk"
+                                span.artalk-count
+                    | )
+
+        if use.length > 1
+            .comment-switch
+                span.first=use[0]
+                span#switch-btn
+                span.second=use[1]
+
     .comment-wrap
-        #comment
-        case theme.comment.type
-            when 'twikoo'
-                !=partial('includes/widgets/third-party/comments/twikoo',{}, {cache: true})
-            when 'waline'
-                !=partial('includes/widgets/third-party/comments/waline',{}, {cache: true})
-            when 'valine'
-                !=partial('includes/widgets/third-party/comments/valine',{}, {cache: true})
-            when 'artalk'
-                !=partial('includes/widgets/third-party/comments/artalk',{}, {cache: true})
+        each name in use
+            case name
+                when 'Valine'
+                    #vcomment.vcomment
+                when 'Twikoo'
+                    #twikoo-wrap
+                when 'Waline'
+                    #waline-wrap
+                when 'Artalk'
+                    #artalk-wrap
+
+    each name in use
+        case name
+            when 'Twikoo'
+                !=partial('includes/widgets/third-party/comments/twikoo', {}, {cache: true})
+            when 'Waline'
+                !=partial('includes/widgets/third-party/comments/waline', {}, {cache: true})
+            when 'Valine'
+                !=partial('includes/widgets/third-party/comments/valine', {}, {cache: true})
+            when 'Artalk'
+                !=partial('includes/widgets/third-party/comments/artalk', {}, {cache: true})

package/layout/includes/widgets/third-party/comments/twikoo.pug

@@ -1,60 +1,77 @@
+- const { envId, region, option ,accessToken } = theme.twikoo
+- const { lazyload, count, use,commentBarrage } = theme.comment
+
 script.
-    async function initComment() {
-        const initOptions = Object.assign(
-            !{JSON.stringify(theme.comment.twikoo || {})},
-            {
-                el: '#comment',
-                onCommentLoaded: async function () {
-                    GLOBAL_CONFIG.lightbox && utils.lightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
-                    sco.owoBig()
-                    GLOBAL_CONFIG.comment.commentBarrage && PAGE_CONFIG.comment && initializeCommentBarrage(await fetchComments())
-                },
-                lang: '#{theme.comment.twikoo.lang}',
-            }
-        )
-        await twikoo.init(initOptions)
-        if (#{theme.post.meta.comment && is_post()}) {
-            var countOptions = Object.assign(
-                !{JSON.stringify(theme.comment.twikoo || {})},
-                {
-                    urls: [window.location.pathname],
-                    includeReply: false
+    !function () {
+        const getCount = () => {
+            const ele = document.querySelectorAll('.twikoo-count')
+            if (!ele) return
+            twikoo.getCommentsCount({
+                envId: '!{envId}',
+                region: '!{region}',
+                urls: [window.location.pathname],
+                includeReply: false
+            }).then(res => {
+                ele.forEach(item => item.textContent = res[0].count)
+            }).catch(err => {
+                console.error(err)
+            })
+        }
+        const init = async () => {
+            twikoo.init(Object.assign({
+                el: '#twikoo-wrap',
+                envId: '!{envId}',
+                region: '!{region}',
+                onCommentLoaded: () => {
+                    utils.lightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
                 }
-            )
-            const res = await twikoo.getCommentsCount(countOptions)
-            try {
-                document.getElementById('twikoo-count').innerText = res[0].count
-                document.querySelector('.comment-headline span:last-child').innerText = ` (${res[0].count})`
-            } catch (e) {
-                document.getElementById('twikoo-count').innerText = '加载错误'
-            }
+            }, !{JSON.stringify(option)}))
+
+            !{count ? ' && getCount()' : ''}
+            sco.owoBig({
+                body: '.OwO-body',
+                item: '.OwO-items li'
+            })
+
+            if (!{commentBarrage}) await barrageTwikoo()
         }
 
-        async function fetchComments() {
-            try {
-                const response = await fetch("!{theme.comment.twikoo.envId}", {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json"
-                    },
-                    body: JSON.stringify({
-                        event: "COMMENT_GET",
-                        accessToken: "!{theme.comment.twikoo.accessToken}",
-                        url: window.location.pathname
-                    })
-                });
-                if (!response.ok) {
-                    throw new Error("HTTP error! status: " + response.status);
-                }
-                const data = await response.json();
-                return (data.data).map(item => Object.assign({
-                    content: item.comment,
-                    nick: item.nick,
-                    mailMd5: item.mailMd5,
-                    id: item.id
-                }))
-            } catch (error) {
-                console.error("An error occurred while fetching comments: ", error);
-            }
+        const loadTwikoo = () => {
+            if (typeof twikoo === 'object') init()
+            else utils.getScript('!{url_for(theme.cdn.twikoo)}').then(init)
+        }
+
+        if ('!{use[0]}' === 'Twikoo' || !{lazyload}) {
+            if (!{lazyload}) utils.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
+            else loadTwikoo()
+        } else {
+            window.loadTwoComment = init
         }
-    }
+    }()
+
+if commentBarrage
+    script.
+        const barrageTwikoo = async () => {
+            await fetch("!{envId}", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    event: "COMMENT_GET",
+                    accessToken: "!{accessToken}",
+                    url: window.location.pathname
+                })
+            }).then(async res => {
+                if (!res.ok) throw new Error("HTTP error! status: " + res.status)
+                const data = await res.json();
+                await utils.getScript('!{url_for(theme.cdn.commentBarrage)}').then(() => {
+                    initializeCommentBarrage((data.data).map(item => Object.assign({
+                        content: item.comment,
+                        nick: item.nick,
+                        mailMd5: item.mailMd5,
+                        id: item.id
+                    })))
+                })
+            }).catch(error => console.error("An error occurred while fetching comments: ", error))
+        }

package/layout/includes/widgets/third-party/comments/valine.pug

@@ -1,15 +1,15 @@
-- const { lazyload, count } = theme.comment
-- const { appId, appKey, avatar, serverURLs, visitor, option } = theme.comment.valine
+- const { lazyload, count, use,commentBarrage } = theme.comment
+- const { appId, appKey, avatar, serverURLs, visitor, option } = theme.valine
 - let emojiMaps = '""'
 
 if site.data.valine
     - emojiMaps = JSON.stringify(site.data.valine)
 
 script.
-    async function initComment() {
-        const initValine = async () => {
-            const valine = new Valine(Object.assign({
-                el: '#comment',
+    !function () {
+        const initValine = () => {
+            const valine = new Valine({
+                el: '#vcomment',
                 appId: '#{appId}',
                 appKey: '#{appKey}',
                 avatar: '#{avatar}',
@@ -18,59 +18,53 @@ script.
                 path: window.location.pathname,
                 visitor: #{visitor},
                 ...!{JSON.stringify(option)}
-            }))
-
-            if (GLOBAL_CONFIG.lightbox) {
-                utils.lightbox(document.querySelectorAll('#comment .vcontent img:not(.vemoji)'));
+            })
+            GLOBAL_CONFIG.lightbox && utils.lightbox(document.querySelectorAll('#comment .vcontent img:not(.vemoji)'))
+            sco.owoBig({body: '.vwrap', item: '.vemojis i'})
+        }
+        const loadValine = async () => {
+            if (typeof Valine === 'function') await initValine()
+            else {
+                await utils.getScript('!{url_for(theme.cdn.valine)}').then(initValine)
             }
-
-            sco.owoBig();
-            GLOBAL_CONFIG.comment.commentBarrage && PAGE_CONFIG.comment && initializeCommentBarrage(await fetchComments())
+            !{commentBarrage} && barrageValine()
         }
-
-        if (!!{lazyload}) {
-            if (!{lazyload}) utils.loadComment(document.getElementById('comment'), initValine)
-            else setTimeout(initValine, 0)
+        if ('!{use[0]}' === 'Valine' || !{lazyload}) {
+            if (!{lazyload}) utils.loadComment(document.getElementById('vcomment'), loadValine)
+            else loadValine()
         } else {
-            await initValine()
+            window.loadTwoComment = loadValine
         }
+    }()
 
-        async function fetchComments() {
-            const url = new URL('#{serverURLs}' + '/1.1/classes/Comment');
+if commentBarrage
+    script.
+        const barrageValine = async () => {
+            const url = new URL('!{serverURLs}/1.1/classes/Comment')
             const params = {
                 url: window.location.pathname,
                 order: '-createdAt'
-            };
-
-            for (const [key, value] of Object.entries(params)) {
-                url.searchParams.append(key, value);
             }
-
-            try {
-                const response = await fetch(url, {
-                    method: "GET",
-                    headers: {
-                        "X-LC-Id": "#{appId}",
-                        "X-LC-Key": '#{appKey}',
-                        "Content-Type": "application/json"
-                    },
-                });
-
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-
-                const data = await response.json();
-                return (data.results.filter(item => item.url === window.location.pathname)).map(item =>
-                    Object.assign({
+            Object.entries(params).forEach(([key, value]) => url.searchParams.append(key, value))
+            await fetch(url, {
+                method: "GET",
+                headers: {
+                    "X-LC-Id": "#{appId}",
+                    "X-LC-Key": "#{appKey}",
+                    "Content-Type": "application/json"
+                },
+            }).then(async res => {
+                if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`)
+                const data = await res.json()
+                if(typeof md5 ==="undefined") await utils.getScript('!{url_for(theme.cdn.blueimp_md5)}')
+                await utils.getScript('!{url_for(theme.cdn.commentBarrage)}')
+                initializeCommentBarrage(data.results
+                    .filter(item => item.url === window.location.pathname)
+                    .map(item => ({
                         content: item.comment,
                         nick: item.nick,
                         mailMd5: md5(item.mail),
                         id: item.objectId
-                    })
-                )
-            } catch (error) {
-                console.error("An error occurred while fetching comments: ", error);
-            }
-        }
-    }
+                    })))
+            }).catch(error => console.error("An error occurred while fetching comments: ", error))
+        }

package/layout/includes/widgets/third-party/comments/waline.pug

@@ -1,72 +1,64 @@
 - const { envId, option ,pageview } = theme.comment.waline
-- const { lazyload, count } = theme.comment
+- const { lazyload, count, commentBarrage } = theme.comment
 
 script.
-    async function initComment() {
-        const isLazyLoad = !!{lazyload};
-        let walineInitFunction = window.walineFn || null;
+    !function () {
+        let walineInitFunction = window.walineFn || null
 
-        async function initWaline(Fn) {
+        function initWaline(initFn) {
             const walineOptions = {
-                el: '#comment',
+                el: '#waline-wrap',
                 serverURL: '!{envId}',
-                pageview: !isLazyLoad,
+                pageview: !{pageview},
                 dark: 'html[data-theme="dark"]',
                 path: window.location.pathname,
-                comment: !isLazyLoad,
+                comment: !{count},
                 ...!{JSON.stringify(option)}
-            };
-            const walineInstance = Fn(walineOptions);
-
-            utils.addGlobalFn('pjax', () => walineInstance.destroy(), 'destroyWaline');
-
-            if (GLOBAL_CONFIG.lightbox) {
-                utils.lightbox(document.querySelectorAll('#comment .wl-content img:not(.wl-emoji)'));
             }
-
-            sco.owoBig();
-
-            GLOBAL_CONFIG.comment.commentBarrage && PAGE_CONFIG.comment && initializeCommentBarrage(await fetchComments())
-        }
-
-        if (isLazyLoad) {
-            utils.loadComment(document.getElementById('comment'), initWaline(walineInitFunction));
-        } else {
-            await initWaline(walineInitFunction);
+            const walineInstance = initFn(walineOptions)
+            utils.addGlobalFn('pjax', () => walineInstance.destroy(), 'destroyWaline')
+            GLOBAL_CONFIG.lightbox && utils.lightbox(document.querySelectorAll('#comment .wl-content img:not(.wl-emoji)'))
+            sco.owoBig()
         }
 
-        async function fetchComments() {
-            const url = new URL('#{envId}/api/comment');
-            const params = {
-                path: window.location.pathname,
-                sortBy: 'insertedAt_asc'
-            };
-
-            for (const [key, value] of Object.entries(params)) {
-                url.searchParams.append(key, value);
+        async function loadWaline() {
+            if (walineInitFunction) initWaline(walineInitFunction)
+            else {
+                await utils.getCSS('!{url_for(theme.cdn.waline_css)}')
+                const {init} = await import('!{url_for(theme.cdn.waline_js)}')
+                walineInitFunction = init || Waline.init
+                initWaline(walineInitFunction)
+                window.walineFn = walineInitFunction
             }
+            if (!{commentBarrage}) barrageWaline()
+        }
 
-            try {
-                const response = await fetch(url, {
-                    method: "GET",
-                    headers: {
-                        "Content-Type": "application/json"
-                    },
-                });
-
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
+        if ('!{use[0]}' === 'Valine' || !{lazyload}) {
+            if (!{lazyload}) utils.loadComment(document.getElementById('waline-wrap'), loadWaline)
+            else loadWaline()
+        } else window.loadTwoComment = loadWaline
+    }()
 
+if commentBarrage
+    script.
+        const barrageWaline = async () => {
+            const url = new URL('!{envId}/api/comment')
+            const params = {path: window.location.pathname, sortBy: 'insertedAt_asc'}
+            Object.entries(params).forEach(([key, value]) => url.searchParams.append(key, value))
+            const response = await fetch(url, {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+            }).then(async res => {
+                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
                 const data = await response.json();
-                return (data.data).map(item => Object.assign({
+                await utils.getScript('!{url_for(theme.cdn.commentBarrage)}')
+                initializeCommentBarrage(data.data.map(item => ({
                     nick: item.nick,
                     mailId: item.avatar,
                     content: item.comment,
                     id: item.objectId
-                }))
-            } catch (error) {
-                console.error("An error occurred while fetching comments: ", error);
-            }
-        }
-    }
+                })))
+            }).catch(error => console.error("An error occurred while fetching comments: ", error))
+        }