hexo-theme-solitude 1.7.14 → 1.8.0

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} && getBarrage(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.
+        async function getBarrage(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,45 +1,66 @@
+- 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'
+            })
+
+            !{commentBarrage} && getBarrage()
+        }
+
+        const loadTwikoo = () => {
+            if (typeof twikoo === 'object') init()
+            else utils.getScript('!{url_for(theme.cdn.twikoo)}').then(init)
         }
 
-        async function fetchComments() {
+        if ('!{use[0]}' === 'Twikoo' || !{lazyload}) {
+            if (!{lazyload}) utils.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
+            else loadTwikoo()
+        } else {
+            window.loadTwoComment = init
+        }
+    }()
+
+if commentBarrage
+    script.
+        async function getBarrage() {
             try {
-                const response = await fetch("!{theme.comment.twikoo.envId}", {
+                const response = await fetch("!{envId}", {
                     method: "POST",
                     headers: {
                         "Content-Type": "application/json"
                     },
                     body: JSON.stringify({
                         event: "COMMENT_GET",
-                        accessToken: "!{theme.comment.twikoo.accessToken}",
+                        accessToken: "!{accessToken}",
                         url: window.location.pathname
                     })
                 });
@@ -47,14 +68,15 @@ script.
                     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
-                }))
+                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,57 @@ 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} && getBarrage()
         }
-
-        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.
+        async function getBarrage() {
+            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);
             }
-
+            Object.entries(params).forEach(([key, value]) => url.searchParams.append(key, value))
             try {
                 const response = await fetch(url, {
                     method: "GET",
                     headers: {
                         "X-LC-Id": "#{appId}",
-                        "X-LC-Key": '#{appKey}',
+                        "X-LC-Key": "#{appKey}",
                         "Content-Type": "application/json"
                     },
-                });
-
+                })
                 if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
+                    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({
+                const data = await response.json()
+                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);
+                console.error("An error occurred while fetching comments: ", error)
             }
-        }
-    }
+        }

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

@@ -1,72 +1,67 @@
 - 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())
+            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()
         }
 
-        if (isLazyLoad) {
-            utils.loadComment(document.getElementById('comment'), initWaline(walineInitFunction));
-        } else {
-            await initWaline(walineInitFunction);
+        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}) getBarrage()
         }
 
-        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);
-            }
+        if ('!{use[0]}' === 'Valine' || !{lazyload}) {
+            if (!{lazyload}) utils.loadComment(document.getElementById('waline-wrap'), loadWaline)
+            else loadWaline()
+        } else window.loadTwoComment = loadWaline
+    }()
 
+if commentBarrage
+    script.
+        async function getBarrage() {
+            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))
             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 (!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);
+                console.error("An error occurred while fetching comments: ", error)
             }
-        }
-    }
+        }

package/layout/includes/widgets/third-party/news-comment/artalk.pug

@@ -1,42 +1,39 @@
-- const { server, site, option } = theme.comment.artalk
+- const { server, site, option } = theme.artalk
 - const avatarCdn = option !== null && option.gravatar && option.gravatar.mirror
 - const avatarDefault = option !== null && option.gravatar && (option.gravatar.params || option.gravatar.default)
 
 script.
     window.addEventListener('load', () => {
-        const changeContent = (content) => {
+        const changeContent = content => {
             if (content === '') return content
-
             const replacements = [
                 {regex: /<img.*?src="(.*?)"?[^\>]+>/ig, replacement: '[!{_p("console.newest_comment.image")}]'},
-                {regex: /<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi,replacement: '[!{_p("console.newest_comment.link")}]'},
+                {
+                    regex: /<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi,
+                    replacement: '[!{_p("console.newest_comment.link")}]'
+                },
                 {regex: /<pre><code>.*?<\/pre>/gi, replacement: '[!{_p("console.newest_comment.code")}]'},
                 {regex: /<[^>]+>/g, replacement: ''}
-            ];
-
-            content = replacements.reduce((str, {regex, replacement}) => str.replace(regex, replacement), content);
-
-            return content.length > 150 ? content.substring(0, 150) + '...' : content;
+            ]
+            content = replacements.reduce((str, {regex, replacement}) => str.replace(regex, replacement), content)
+            return content.length > 150 ? content.substring(0, 150) + '...' : content
         }
-
-        const $asideList = document.querySelector('#card-newest-comments .aside-list')
-
-        const generateHtml = array => {
-            $asideList.innerHTML = array.length ? array.map(item => `
-                                <div class='aside-list-item'>
-                                  <a onclick='pjax.loadUrl("${item.url}")' class='thumbnail'>
-                                    <img src='${item.avatar}' alt='${item.nick}'>
-                                    <div class='name'><span>${item.nick}</span></div>
-                                  </a>
-                                  <div class='content'>
-                                    <a class='comment' onclick='pjax.loadUrl("${item.url}")'>${item.content}</a>
-                                    <time class="datetime" datetime="${item.date}"></time>
-                                  </div>
-                                </div>
-                              `).join('') : "!{_p('newest_comment.zero')}"
-            window.lazyLoadInstance && window.lazyLoadInstance.update()
-            window.pjax && window.pjax.refresh()
-            sco && sco.changeTimeFormat(document.querySelectorAll('.aside-list-item time'))
+        const generateHtml = (array, asideList) => {
+            asideList.innerHTML = array.length ? array.map(item => `
+                <div class='aside-list-item'>
+                    <a onclick='pjax.loadUrl("${item.url}")' class='thumbnail'>
+                        <img src='${item.avatar}' alt='${item.nick}'>
+                        <div class='name'><span>${item.nick}</span></div>
+                    </a>
+                    <div class='content'>
+                        <a class='comment' onclick='pjax.loadUrl("${item.url}")'>${item.content}</a>
+                        <time class="datetime" datetime="${item.date}"></time>
+                    </div>
+                </div>
+            `).join('') : "!{_p('newest_comment.zero')}"
+            window.lazyLoadInstance?.update()
+            window.pjax?.refresh()
+            sco?.changeTimeFormat(document.querySelectorAll('.aside-list-item time'))
         }
 
         const getSetting = async () => {
@@ -44,55 +41,48 @@ script.
                 const res = await fetch('!{server}/api/v2/conf', {method: 'GET'})
                 return await res.json()
             } catch (e) {
-                console.log(e)
+                console.error(e)
+                return null
             }
         }
 
-        const headerList = {
-            method: 'GET',
-        }
-
-        const searchParams = new URLSearchParams({
-            'site_name': "!{site}",
-            'limit': '6',
-        })
-
-        const getComment = async () => {
+        const getComment = async (asideList) => {
             try {
-                const res = await fetch(`!{server}/api/v2/stats/latest_comments?${searchParams}`, headerList)
+                const searchParams = new URLSearchParams({'site_name': "!{site}", 'limit': '6'})
+                const res = await fetch(`!{server}/api/v2/stats/latest_comments?${searchParams}`, {method: 'GET'})
                 const result = await res.json()
-                const avatarStr = await getSetting()
-                const {mirror, params, default: defaults} = avatarStr.frontend_conf.gravatar
+                const avatarConfig = await getSetting()
+                const {mirror, params, default: defaults} = avatarConfig.frontend_conf.gravatar
                 const avatarCdn = !{avatarCdn} || mirror
                 let avatarDefault = !{avatarDefault} || params || defaults
                 avatarDefault = avatarDefault.startsWith('d=') ? avatarDefault : `d=${avatarDefault}`
-                const artalk = result.data.map(function (e) {
-                    return {
-                        'avatar': `${avatarCdn}${e.email_encrypted}?${avatarDefault}`,
-                        'content': changeContent(e.content_marked),
-                        'nick': e.nick,
-                        'url': e.page_url,
-                        'date': e.date,
-                    }
-                })
-                saveToLocal.set('artalk-newest-comments', artalk, !{theme.comment.newest_comment.storage})
-                generateHtml(artalk)
+                const artalk = result.data.map(e => ({
+                    avatar: `${avatarCdn}${e.email_encrypted}?${avatarDefault}`,
+                    content: changeContent(e.content_marked),
+                    nick: e.nick,
+                    url: e.page_key,
+                    date: e.date,
+                }))
+                utils.saveToLocal.set('artalk-newest-comments', artalk, !{theme.comment.newest_comment.storage})
+                generateHtml(artalk, asideList)
             } catch (e) {
-                console.log(e)
-                $asideList.textContent = "!{_p('newest_comment.error')}"
+                console.error(e);
+                asideList.textContent = "!{_p('newest_comment.error')}"
             }
-        }
+        };
 
-        const newestCommentInit = () => {
-            if ($asideList) {
-                const data = saveToLocal.get('artalk-newest-comments')
-                if (data) {
-                    generateHtml(data)
-                } else {
-                    getComment()
-                }
+        const newestCommentInit = (asideList) => {
+            const data = utils.saveToLocal.get('artalk-newest-comments')
+            if (data) {
+                generateHtml(data, asideList)
+            } else {
+                getComment(asideList)
             }
         }
-        newestCommentInit()
-        utils.addGlobalFn('pjaxComplete', newestCommentInit, 'artalk_newestComment')
-    })
+
+        const $asideList = document.querySelector('#card-newest-comments .aside-list')
+        if ($asideList) {
+            newestCommentInit($asideList)
+            utils.addGlobalFn('pjaxComplete', () => newestCommentInit($asideList), 'artalk_newestComment')
+        }
+    });