hexo-theme-solitude 1.7.12 → 1.7.14

package/_config.yml

@@ -64,7 +64,6 @@ nav:
   right:
     random: false # 随机文章跳转 / random post button
     console: false #控制台 / console
-    top: false # 进度球 / Progress Ball
     # 自定义按钮
     # custom button
     # 左至右
@@ -711,14 +710,14 @@ katex:
 # comment
 comment:
   enable: false
-  type: # waline, twikoo
+  type: # waline, twikoo, valine, artalk
   commentBarrage: false # 热评开关 / Hot comment switch
   lazyload: true # 懒加载
   count: true # 评论数展示
   avatar: https://cravatar.cn # Gravatar link
   newest_comment:
     enable: false
-    storage: 421000 # 缓存时间
+    storage: .5 # 缓存时间 1: 1天 / .5 : 半天
   # twikoo 配置信息
   # twikoo settings
   twikoo: # https://twikoo.js.org/
@@ -740,7 +739,12 @@ comment:
     avatar:
     visitor: false
     option: # options list
-
+  # artalk 配置信息
+  # artalk settings
+  artalk:
+    server: # server url / 后端地址
+    site: # site name / 站点名
+    option: # options
 
 # 中控台扩展 ： 最新评论 + 标签 + 文章
 console_plus: false

package/languages/en.yml

@@ -101,6 +101,10 @@ console:
   switch_keyboard: Keyboard operation
   switch_music: Music switch
   archive_unit: Posts
+  newest_comment:
+    image: Image
+    link: Link
+    code: Code
 
 sidebar:
   function: Function

package/languages/zh-CN.yml

@@ -103,6 +103,10 @@ console:
   switch_keyboard: 键盘快捷键
   switch_music: 音乐开关
   archive_unit: 篇
+  newest_comment:
+    image: 图片
+    link: 链接
+    code: 代码
 
 sidebar:
   function: 功能

package/languages/zh-TW.yml

@@ -103,6 +103,10 @@ console:
   switch_keyboard: 鍵盤快捷鍵
   switch_music: 音樂開關
   archive_unit: 篇
+  newest_comment:
+    image: 圖片
+    link: 連結
+    code: 代碼
 
 sidebar:
   function: 功能

package/layout/includes/head/config.pug

@@ -26,43 +26,44 @@
 
     let comment = false
 
-    if (theme.comment.type === 'twikoo') {
-        comment = JSON.stringify({
+    if (theme.comment.enable) {
+        comment = {
             avatar: theme.comment.avatar,
-            url: theme.comment.twikoo.envId,
-            commentBarrage: theme.comment.enable,
-            accessToken: theme.comment.twikoo.accessToken,
-            owo: {
-                body: '.OwO-body',
-                item: '.OwO-items li'
-            }
-        })
-    }
-
-    if (theme.comment.type === 'waline') {
-        comment = JSON.stringify({
-            avatar: theme.comment.avatar,
-            url: theme.comment.waline.envId,
-            commentBarrage: theme.comment.enable,
-            owo: {
-                body: '.wl-emoji-popup',
-                item: '.wl-tab-wrapper button'
-            }
-        })
-    }
-
-    if (theme.comment.type === 'valine') {
-        comment = JSON.stringify({
-            avatar: theme.comment.avatar,
-            url: theme.comment.valine.serverURLs,
-            commentBarrage: theme.comment.enable,
-            appId: theme.comment.valine.appId,
-            appKey: theme.comment.valine.appKey,
-            owo: {
-                body: '.vwrap',
-                item: '.vemojis i'
-            }
-        })
+            commentBarrage: theme.comment.commentBarrage,
+        }
+        switch (theme.comment.type) {
+            case "twikoo":
+                comment.url = theme.comment.twikoo.envId
+                comment.accessToken = theme.comment.twikoo.accessToken
+                comment.owo = {
+                    body: '.OwO-body',
+                    item: '.OwO-items li'
+                }
+                break
+            case "waline":
+                comment.url = theme.comment.waline.envId
+                comment.owo = {
+                    body: '.wl-emoji-popup',
+                    item: '.wl-tab-wrapper button'
+                }
+                break
+            case "valine":
+                comment.url = theme.comment.valine.serverURLs
+                comment.appId = theme.comment.valine.appId
+                comment.appKey = theme.comment.valine.appKey
+                comment.owo = {
+                    body: '.vwrap',
+                    item: '.vemojis i'
+                }
+                break
+            case "artalk":
+                comment.owo = {
+                    body: '.atk-grp',
+                    item: '.atk-item'
+                }
+            default:
+                break
+        }
     }
 
     let post_ai = false
@@ -138,13 +139,13 @@
                 stop: _p('right_menu.music.stop'),
             }
         }
-        if(theme.comment.enable && theme.comment.commentBarrage){
+        if (theme.comment.enable && theme.comment.commentBarrage) {
             rightMenu.barrage = {
                 open: _p('right_menu.barrage.open'),
                 close: _p('right_menu.barrage.close')
             }
         }
-        if(theme.right_menu.translate.enable){
+        if (theme.right_menu.translate.enable) {
             rightMenu.translate = {
                 translateDelay: theme.right_menu.translate.translateDelay,
                 defaultEncoding: theme.right_menu.translate.defaultEncoding
@@ -185,7 +186,7 @@ script.
         covercolor: {
             enable: !{theme.post.covercolor.enable}
         },
-        comment: !{comment},
+        comment: !{comment ? JSON.stringify(comment) : false},
         lightbox: '!{ theme.mediumZoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null")}',
         post_ai: !{post_ai},
         right_menu: !{rightMenu ? JSON.stringify(rightMenu) : false},

package/layout/includes/inject/body.pug

@@ -16,10 +16,6 @@ div
     script(src=url_for(theme.cdn.waterfall))
     script(src=url_for(theme.cdn.pjax))
 
-    if theme.comment.enable && theme.comment.type === 'valine'
-        // md5
-        script(src=url_for(theme.cdn.blueimp_md5))
-
     if theme.mermaid
         script(src=url_for(theme.cdn.mermaid_js))
 
@@ -73,14 +69,15 @@ div
         case theme.comment.type
             when 'twikoo'
                 script(src=url_for(theme.cdn.twikoo))
+            when 'waline'
+                script(src=url_for(theme.cdn.waline_js))
+            when 'valine'
+                script(src=url_for(theme.cdn.blueimp_md5))
+                script(src=url_for(theme.cdn.valine))
+            when 'artalk'
+                script(src=url_for(theme.cdn.artalk_js))
         if theme.comment.commentBarrage
-            case theme.comment.type
-                when 'twikoo'
-                    script(src=url_for(theme.cdn.twikoo_commentBarrage))
-                when 'waline'
-                    script(src=url_for(theme.cdn.waline_commentBarrage))
-                when 'valine'
-                    script(src=url_for(theme.cdn.valine_commentBarrage))
+            script(src=url_for(theme.cdn.commentBarrage))
 
     if theme.music.enable
         script(src=url_for(theme.cdn.music_js))

package/layout/includes/inject/head.pug

@@ -17,6 +17,13 @@ if theme.lightbox && theme.fancybox
 if theme.katex && theme.katex.enable
     link(rel="stylesheet", href=url_for(theme.cdn.katex))
 
+if theme.comment.enable
+    case theme.comment.type
+        when 'waline'
+            link(rel="stylesheet" href=url_for(theme.cdn.waline_css))
+        when 'artalk'
+            link(rel="stylesheet" href=url_for(theme.cdn.artalk_css))
+
 // Open Graph
 include ../head/opengraph.pug
 
@@ -34,7 +41,7 @@ script.
                     const expiryDay = ttl * 86400000
                     const item = {
                         value: value,
-                        expiry: now.getTime() + expiryDay,
+                        expiry: now.getTime() + expiryDay
                     }
                     localStorage.setItem(key, JSON.stringify(item))
                 },
@@ -73,45 +80,11 @@ script.
                     document.documentElement.classList.remove('hide-aside')
                 }
             }
-
-            win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
-                const link = document.createElement('link')
-                link.rel = 'stylesheet'
-                link.href = url
-                if (id) link.id = id
-                link.onerror = reject
-                link.onload = link.onreadystatechange = function () {
-                    const loadState = this.readyState
-                    if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
-                    link.onload = link.onreadystatechange = null
-                    resolve()
-                }
-                document.head.appendChild(link)
-            })
-
-            win.getScript = (url, attr = {}) => new Promise((resolve, reject) => {
-                const script = document.createElement('script')
-                script.src = url
-                script.async = true
-                script.onerror = reject
-                script.onload = script.onreadystatechange = function () {
-                    const loadState = this.readyState
-                    if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
-                    script.onload = script.onreadystatechange = null
-                    resolve()
-                }
-
-                Object.keys(attr).forEach(key => {
-                    script.setAttribute(key, attr[key])
-                })
-
-                document.head.appendChild(script)
-            })
         }
     )(window)
 
     console.log(
-        "%c Program: Hexo %c Theme: Solitude %c Version: v1.7.12",
+        "%c Program: Hexo %c Theme: Solitude %c Version: v1.7.14",
         "border-radius:5px 0 0 5px;padding: 5px 10px;color:white;background:#ff3842;",
         "padding: 5px 10px;color:white;background:#3e9f50;",
         "border-radius:0 5px 5px 0;padding: 5px 10px;background:#0084ff;color:white;"

package/layout/includes/widgets/aside/asideInfoCard.pug

@@ -5,8 +5,9 @@
                 .author-info__sayhi#author-info__sayhi(onclick="sco.changeSayHelloText()")= _p('sayhello.morning')
         .avatar-img-group
             img.avatar-img(alt=_p('aside.avatar'), src=theme.aside.card.author.img)
-            .avatar-sticker
-                img.avatar-sticker-img(src=theme.aside.card.author.sticker, alt=_p('aside.sticker'))
+            if theme.aside.card.author.sticker
+                .avatar-sticker
+                    img.avatar-sticker-img(src=theme.aside.card.author.sticker, alt=_p('aside.sticker'))
         .author-info__description_group
             .author-info__description!= theme.aside.card.content
             .author-info__description2!= theme.aside.card.content2

package/layout/includes/widgets/home/{leonus.pug → carousel.pug}

@@ -18,7 +18,7 @@ if recommends
             .blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets
 
     script.
-        function banner_swiper() {
+        function carousel_swiper() {
             let e = new Swiper(".blog-slider", {
                 navigation: {
                     nextEl: ".swiper-button-next",

package/layout/includes/widgets/home/categoryGroup.pug

@@ -6,7 +6,7 @@ if group
         each item in group
             - var array = item[1].split('||')
             .categoryItem
-                a.categoryButton(href=url_for(trim(array[0])) if array[2] style="background:" + array[2] + ";")
+                a.categoryButton(href=url_for(trim(array[0])) style="background-image:" + array[2] + ";")
                     span.categoryButtonText= item[0]
                     if array[1]
                         i.solitude(class=trim(array[1]))

package/layout/includes/widgets/nav/right.pug

@@ -15,47 +15,10 @@ if theme.nav.right.console
     .nav-button#nav-console
         a.console_switchbutton(onclick="sco.showConsole()", title=_p('nav.console'), href="javascript:void(0);")
             i.solitude.st-dashboard-fill
-if theme.nav.right.top
-    .nav-button#nav-totop(onclick="sco.toTop()")
-        a.totopbtn
-            i.solitude.st-arrow-up-line
-            span#percent= "0"
-
-    script.
-        document.addEventListener('DOMContentLoaded', () => {
-            const percent = () => {
-                let scrollTop = document.documentElement.scrollTop || window.pageYOffset
-                let totalHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - document.documentElement.clientHeight
-                let scrollPercent = Math.round(scrollTop / totalHeight * 100)
-                let percentElement = document.querySelector("#percent")
-                let viewportBottom = window.scrollY + document.documentElement.clientHeight
-                let remainingScroll = totalHeight - scrollTop
-
-                if ((document.getElementById("post-comment") || document.getElementById("footer")).offsetTop < viewportBottom || scrollPercent > 90) {
-                    document.querySelector("#nav-totop").classList.add("long")
-                    percentElement.innerHTML = GLOBAL_CONFIG.lang.backtop
-                } else {
-                    document.querySelector("#nav-totop").classList.remove("long")
-                    if (scrollPercent >= 0) {
-                        percentElement.innerHTML = scrollPercent + ""
-                    }
-                }
-
-                let elementsToHide = document.querySelectorAll(".needEndHide")
-                if (remainingScroll < 100) {
-                    elementsToHide.forEach(function (element) {
-                        element.classList.add("hide")
-                    })
-                } else {
-                    elementsToHide.forEach(function (element) {
-                        element.classList.remove("hide")
-                    })
-                }
-
-                window.onscroll = percent
-            }
-            percent()
-        })
+.nav-button#nav-totop(onclick="sco.toTop()")
+    a.totopbtn
+        i.solitude.st-arrow-up-line
+        span#percent= "0"
 #toggle-menu
     a.site-page
         i.solitude.st-menu-line

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

@@ -52,6 +52,9 @@
                                 span.leancloud_visitors(id=url_for(page.path))
                                     span.leancloud-visitors-count
                                         i.solitude.st-loading-line
+                            when 'artalk'
+                                span#ArtalkPV
+                                    i.solitude.st-loading-line
                     else if theme.busuanzi
                         span#busuanzi_value_page_pv
                             i.solitude.st-loading-line
@@ -69,5 +72,8 @@
                             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
+                                    i.solitude.st-loading-line
 
 include ./wave

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

@@ -0,0 +1,50 @@
+- const { server, site, option } = theme.comment.artalk
+- const { lazyload, count } = theme.comment
+
+script.
+    async function initComment() {
+        let artalkItem = null
+        const initArtalk = () => {
+            artalkItem = Artalk.init({
+                el: '#comment',
+                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 = []
+                artalkItem.ctx.get('list').getCommentNodes().forEach(comment => {
+                    array.push({
+                        nick: comment.data.nick,
+                        content: comment.data.content_marked,
+                        mailMd5: comment.data.email_encrypted,
+                    })
+                    const $content = comment.getRender().$content
+                    utils.lightbox($content.querySelectorAll('img:not([atk-emoticon])'))
+                    sco.owoBig()
+                })
+                GLOBAL_CONFIG.comment.commentBarrage && PAGE_CONFIG.comment && initializeCommentBarrage(array)
+            })
+
+            const destroyArtalk = () => {
+                artalkItem.destroy()
+            }
+
+            utils.addGlobalFn('pjax', destroyArtalk, 'destroyArtalk')
+        }
+
+        const artalkChangeMode = theme => {
+            const artalkWrap = document.getElementById('comment')
+            console.log(artalkWrap, artalkWrap.children.length)
+            if (!(artalkWrap && artalkWrap.children.length)) return
+            const isDark = theme === 'dark'
+            artalkItem.setDarkMode(!isDark)
+        }
+
+        utils.addGlobalFn('themeChange', artalkChangeMode, 'artalk')
+
+        initArtalk()
+    }

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

@@ -12,4 +12,6 @@
             when 'waline'
                 !=partial('includes/widgets/third-party/comments/waline',{}, {cache: true})
             when 'valine'
-                !=partial('includes/widgets/third-party/comments/valine',{}, {cache: true})
+                !=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,12 +1,13 @@
 script.
     async function initComment() {
-        var initOptions = Object.assign(
+        const initOptions = Object.assign(
             !{JSON.stringify(theme.comment.twikoo || {})},
             {
                 el: '#comment',
-                onCommentLoaded: function () {
+                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}',
             }
@@ -28,4 +29,32 @@ script.
                 document.getElementById('twikoo-count').innerText = '加载错误'
             }
         }
+
+        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);
+            }
+        }
     }

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

@@ -7,7 +7,7 @@ if site.data.valine
 
 script.
     async function initComment() {
-        const initValine = () => {
+        const initValine = async () => {
             const valine = new Valine(Object.assign({
                 el: '#comment',
                 appId: '#{appId}',
@@ -25,20 +25,52 @@ script.
             }
 
             sco.owoBig();
-        }
-
-        const loadValine = async () => {
-            if (typeof Valine === 'function') initValine()
-            else {
-                await getScript('!{url_for(theme.cdn.valine)}')
-                initValine()
-            }
+            GLOBAL_CONFIG.comment.commentBarrage && PAGE_CONFIG.comment && initializeCommentBarrage(await fetchComments())
         }
 
         if (!!{lazyload}) {
-            if (!{lazyload}) utils.loadComment(document.getElementById('comment'), loadValine)
-            else setTimeout(loadValine, 0)
+            if (!{lazyload}) utils.loadComment(document.getElementById('comment'), initValine)
+            else setTimeout(initValine, 0)
         } else {
-            await loadValine()
+            await initValine()
+        }
+
+        async function fetchComments() {
+            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({
+                        content: item.comment,
+                        nick: item.nick,
+                        mailMd5: md5(item.mail),
+                        id: item.objectId
+                    })
+                )
+            } catch (error) {
+                console.error("An error occurred while fetching comments: ", error);
+            }
         }
     }

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

@@ -19,27 +19,54 @@ script.
             const walineInstance = Fn(walineOptions);
 
             utils.addGlobalFn('pjax', () => walineInstance.destroy(), 'destroyWaline');
-        }
 
-        async function loadWalineCSSAndJS() {
-            if (!walineInitFunction) {
-                await getCSS('!{url_for(theme.cdn.waline_css)}');
-                const {init} = await import('!{url_for(theme.cdn.waline_js)}');
-                walineInitFunction = init || Waline.init;
-                window.walineFn = walineInitFunction;
+            if (GLOBAL_CONFIG.lightbox) {
+                utils.lightbox(document.querySelectorAll('#comment .wl-content img:not(.wl-emoji)'));
             }
-            initWaline(walineInitFunction);
+
+            sco.owoBig();
+
+            GLOBAL_CONFIG.comment.commentBarrage && PAGE_CONFIG.comment && initializeCommentBarrage(await fetchComments())
         }
 
         if (isLazyLoad) {
-            utils.loadComment(document.getElementById('comment'),loadWalineCSSAndJS);
+            utils.loadComment(document.getElementById('comment'), initWaline(walineInitFunction));
         } else {
-            await loadWalineCSSAndJS();
+            await initWaline(walineInitFunction);
         }
 
-        if (GLOBAL_CONFIG.lightbox) {
-            utils.lightbox(document.querySelectorAll('#comment .wl-content img:not(.wl-emoji)'));
-        }
+        async function fetchComments() {
+            const url = new URL('#{envId}/api/comment');
+            const params = {
+                path: window.location.pathname,
+                sortBy: 'insertedAt_asc'
+            };
 
-        sco.owoBig();
+            for (const [key, value] of Object.entries(params)) {
+                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}`);
+                }
+
+                const data = await response.json();
+                return (data.data).map(item => Object.assign({
+                    nick: item.nick,
+                    mailId: item.avatar,
+                    content: item.comment,
+                    id: item.objectId
+                }))
+            } catch (error) {
+                console.error("An error occurred while fetching comments: ", error);
+            }
+        }
     }