hexo-theme-solitude 1.10.6 → 1.11.0

package/_config.yml

@@ -515,6 +515,21 @@ says:
   # Talk short text only shows the first n
   strip: 30
 
+# 最近评论
+# recent comments
+# 前置要求：需配置最近评论页面和评论，否则显示为空
+# Pre-requirements: recent comments page needs to be configured and commented, otherwise it will be displayed as empty
+recent_comments:
+  enable: false
+  # 评论数
+  # Number of comments
+  limit: 50 # ⚠️waline 仅支持最大50条评论 / ⚠️waline only supports a maximum of 50 comments
+  # 缓存时间
+  # Cache time
+  cache: 0.2 # 1 = 1天 / 1 = 1 day
+  console: true # 控制台按钮 / console button
+  page: /recentcomments/ # 最近评论页面 / recent comments page
+
 # 留言板
 # message board
 # 前置要求：需配置留言板页面
@@ -525,6 +540,7 @@ envelope:
   speed: 20 # 播放速度
   hover: true # 鼠标悬停暂停
   loop: true # 循环播放
+  page: /message/ # 留言板页面 / message board page
 
 # -------------------------
 # meeting-api，用于界面中的音乐胶囊和音乐馆页，可自定义api，不会请勿动。

package/languages/default.yml

@@ -3,6 +3,7 @@ star: Behold, those who found delight in this piece also perused
 random: Random
 upload: 'datetime: '
 totalk: You don't need to delete blank lines, just type in your comments.
+loading: Loading...
 
 theme:
   dark: Dark
@@ -109,10 +110,12 @@ console:
   switch_keyboard: Keyboard operation
   switch_music: Music switch
   archive_unit: Posts
+  recent_comment_more: Recent comments
   newest_comment:
     image: Image
     link: Link
     code: Code
+    emoji: Emoji
 
 sidebar:
   function: Function

package/languages/en.yml

@@ -3,6 +3,7 @@ star: Behold, those who found delight in this piece also perused
 random: Random
 upload: 'datetime: '
 totalk: You don't need to delete blank lines, just type in your comments.
+loading: Loading...
 
 theme:
   dark: Dark
@@ -109,10 +110,12 @@ console:
   switch_keyboard: Keyboard operation
   switch_music: Music switch
   archive_unit: Posts
+  recent_comment_more: Recent comments
   newest_comment:
     image: Image
     link: Link
     code: Code
+    emoji: Emoji
 
 sidebar:
   function: Function

package/languages/zh-CN.yml

@@ -3,6 +3,7 @@ star: 喜欢这篇的人也看了
 random: 随便逛逛
 upload: 发布时间：
 totalk: 无需删除空行，直接输入评论即可
+loading: 加载中...
 
 # Language: 简体中文
 theme:
@@ -111,10 +112,12 @@ console:
   switch_keyboard: 键盘快捷键
   switch_music: 音乐开关
   archive_unit: 篇
+  recent_comment_more: 最近评论
   newest_comment:
     image: 图片
     link: 链接
     code: 代码
+    emoji: 表情
 
 sidebar:
   function: 功能

package/languages/zh-TW.yml

@@ -3,6 +3,7 @@ star: 喜歡這篇的人也看了
 random: 随便逛逛
 upload: 發佈時間：
 totalk: 無需刪除空行，直接輸入評論即可
+loading: 加載中...
 
 # Language: 繁體中文 (台灣)
 theme:
@@ -111,10 +112,12 @@ console:
   switch_keyboard: 鍵盤快捷鍵
   switch_music: 音樂開關
   archive_unit: 篇
+  recent_comment_more: 最近評論
   newest_comment:
     image: 圖片
     link: 連結
     code: 代碼
+    emoji: 表情
 
 sidebar:
   function: 功能

package/layout/includes/console.pug

@@ -8,7 +8,11 @@ div#console
                     div.console-card#card-newest-comments(onclick="sco.hideConsole()")
                         div.card-content
                             div.author-content-item-tips= _p('console.comment_tip')
-                            div.author-content-item-title= _p('console.comment_title')
+                            div.author-content-item-title
+                                | #{_p('console.comment_title')}
+                                if theme.recent_comments.enable && theme.recent_comments.console
+                                    a.recent-comment-more(href=url_for(theme.recent_comments.page) title=_p('console.recent_comment_more'))
+                                        i.solitude.st-right-btn-fill
                         div.aside-list
 
             div.console-card-group-right

package/layout/includes/inject/head.pug

@@ -27,7 +27,7 @@ include ../head/pwa.pug
 
 script.
     console.log(
-        "%c Program: Hexo %c Theme: Solitude %c Version: v1.10.6",
+        "%c Program: Hexo %c Theme: Solitude %c Version: v1.11.0",
         "border-radius:5px 0 0 5px;padding: 5px 10px;color:white;background:#ff3842;",
         "padding: 5px 10px;color:white;background:#3e9f50;",
         "padding: 5px 10px;color:white;background:#0084ff;border-radius:0 5px 5px 0",

package/layout/includes/page/recentcomment.pug

@@ -0,0 +1,16 @@
+- const { enable, limit, cache } = theme.recent_comments
+- const {use, avatar} = theme.comment
+
+include ../widgets/page/banner
+
+if enable && use
+    #comments-page
+    case use[0]
+        when 'Twikoo'
+            include ../widgets/page/recentcomment/twikoo
+        when 'Valine'
+            include ../widgets/page/recentcomment/valine
+        when 'Waline'
+            include ../widgets/page/recentcomment/waline
+        when 'Artalk'
+            include ../widgets/page/recentcomment/artalk

package/layout/includes/widgets/page/banner.pug

@@ -1,7 +1,7 @@
 .author-content.author-content-item.single.sharePage(style=`background: url(${page.cover}) no-repeat center; background-size: cover;`)
     .card-content
-        .author-content-item-tips= page.title
-        span.author-content-item-title= page.desc
+        .author-content-item-tips= page.desc
+        span.author-content-item-title= page.title
         .content-bottom
             if page.leftend
                 .tips= page.leftend

package/layout/includes/widgets/page/message/artalk.pug

@@ -0,0 +1,45 @@
+- const { server, site, option } = theme.artalk
+
+script(pjax).
+    (async () => {
+        const emojiReg = /<img [^>]+ atk-emoticon="[^"]+">/g
+        if (typeof EasyDanmaku === "undefined") await utils.getScript('!{url_for(theme.cdn.envelope_js)}')
+        const envel = new EasyDanmaku({
+            page: '!{theme.envelope.page}',
+            el: '#barrage',
+            line: !{line},
+            speed: !{speed},
+            hover: !{hover},
+            loop: !{loop},
+        })
+        const data = utils.saveToLocal.get('enevlope')
+        if (data) {
+            envel.batchSend(data, true)
+            return
+        }
+
+        const searchParams = new URLSearchParams({'site_name': "!{site}", 'limit': '100'})
+        await fetch(`!{server}/api/v2/stats/latest_comments?${searchParams}`, {method: 'GET'}).then(async res => res.json())
+            .then(async data => {
+                let ls = []
+                for (const i of data.data) {
+                    ls.push({
+                        content: i.nick + ': ' + formatDanmaku(i.content),
+                        avatar: '!{avatar}' + '/avatar/' + i.email_encrypted,
+                        url: i.page_key + '#atk-comment-' + i.id,
+                    })
+                }
+                envel.batchSend(ls, true)
+                utils.saveToLocal.set('enevlope', ls, .02)
+            }).catch(error => {
+                console.error("An error occurred while fetching comments: ", error)
+            })
+
+        function formatDanmaku(str) {
+            str = str.replace(emojiReg, '[!{__("console.newest_comment.emoji")}]')
+            str = str.replace(/!\[.*?\]\((.*?)\)/g, '[!{__("console.newest_comment.image")}]')
+            str = str.replace(/\[.*?\]\((.*?)\)/g, '[!{__("console.newest_comment.link")}]')
+            str = str.replace(/```.*?```/g, '[!{__("console.newest_comment.code")}]')
+            return str
+        }
+    })()

package/layout/includes/widgets/page/message/js.pug

@@ -5,4 +5,8 @@ if use
         when "Valine"
             include ./valine
         when "Twikoo"
-            include ./twikoo
+            include ./twikoo
+        when "Waline"
+            include ./waline
+        when "Artalk"
+            include ./artalk

package/layout/includes/widgets/page/message/twikoo.pug

@@ -2,38 +2,41 @@
 
 script(pjax).
     (async () => {
-        if(typeof EasyDanmaku === "undefined") await utils.getScript('!{url_for(theme.cdn.envelope_js)}')
+        const emojiReg = /<img class="tk-owo-emotion" [^>]+>/g
+        if (typeof EasyDanmaku === "undefined") await utils.getScript('!{url_for(theme.cdn.envelope_js)}')
         const Danmaku = new EasyDanmaku({
-            page: '/message/',
-            el: '#barrage', 
-            line: !{line}, 
-            speed: !{speed}, 
+            page: '!{theme.envelope.page}',
+            el: '#barrage',
+            line: !{line},
+            speed: !{speed},
             hover: !{hover},
             loop: !{loop},
         })
         const data = utils.saveToLocal.get('enevlope')
-        if(data){
-            Danmaku.batchSend(data,true)
+        if (data) {
+            Danmaku.batchSend(data, true)
             return
         }
         let ls = []
         fetch('!{envId}/', {
             method: "POST",
             body: JSON.stringify({
-            "event": "GET_RECENT_COMMENTS",
-            "includeReply": false,
-            "pageSize": 100
+                "event": "GET_RECENT_COMMENTS",
+                "includeReply": false,
+                "pageSize": 100
             }),
-            headers: { 'Content-Type': 'application/json' }
-        }).then(res => res.json()).then(({ data }) => {
-            data.forEach(i => {
-            if (i.avatar == undefined) i.avatar = '!{avatar}/avatar/d615d5793929e8c7d70eab5f00f7f5f1?d=mp'
-            ls.push({ avatar: i.avatar, content: i.nick + '：' + formatDanmaku(i.comment), url: i.url + '#' + i.id })
-            });
+            headers: {'Content-Type': 'application/json'}
+        }).then(res => res.json()).then(({data}) => {
+            for (const i of data) {
+                if (i.avatar === undefined) i.avatar = '!{avatar}/avatar/d615d5793929e8c7d70eab5f00f7f5f1?d=mp'
+                ls.push({avatar: i.avatar, content: i.nick + ': ' + formatDanmaku(i.comment), url: i.url + '#' + i.id})
+            }
             Danmaku.batchSend(ls, true);
             utils.saveToLocal.set('envelope', ls, 0.02)
         });
+
         function formatDanmaku(str) {
+            str = str.replace(emojiReg, '!{__("console.newest_comment.emoji")}')
             str = str.replace(/<\/*br>|[\s\uFEFF\xA0]+/g, '');
             str = str.replace(/<img.*?>/g, '[!{__("console.newest_comment.image")}]');
             str = str.replace(/<a.*?>.*?<\/a>/g, '[!{__("console.newest_comment.link")}]');

package/layout/includes/widgets/page/message/valine.pug

@@ -2,9 +2,10 @@
 
 script(pjax).
     (async () => {
+        const emojiReg = /:[a-z0-9_\u4e00-\u9fa5]+:/g
         if(typeof EasyDanmaku === "undefined") await utils.getScript('!{url_for(theme.cdn.envelope_js)}')
         const envel = new EasyDanmaku({
-            page: '/message/',
+            page: '!{theme.envelope.page}',
             el: '#barrage', 
             line: !{line}, 
             speed: !{speed}, 
@@ -35,9 +36,9 @@ script(pjax).
             const data = await res.json()
             const init = () => 
                 data.results.map(item => ({
-                    content: item.comment,
+                    content: item.nick + ': ' + formatDanmaku(item.comment),
                     avatar: '!{avatar}/avatar/'+md5(item.mail),
-                    url: item.url,
+                    url: item.url
                 }))
             if (typeof md5 === "undefined") await utils.getScript('!{url_for(theme.cdn.blueimp_md5)}')
             envel.batchSend(init(),true)
@@ -45,4 +46,12 @@ script(pjax).
         } catch (error) {
             console.error("An error occurred while fetching comments: ", error)
         }
+
+        function formatDanmaku(str) {
+            str = str.replace(emojiReg, '[!{__("console.newest_comment.emoji")}]')
+            str = str.replace(/!\[.*?\]\((.*?)\)/g, '[!{__("console.newest_comment.image")}]')
+            str = str.replace(/\[.*?\]\((.*?)\)/g, '[!{__("console.newest_comment.link")}]')
+            str = str.replace(/```.*?```/g, '[!{__("console.newest_comment.code")}]')
+            return str
+        }
     })()

package/layout/includes/widgets/page/message/waline.pug

@@ -0,0 +1,42 @@
+script(pjax).
+    (async () => {
+        const emojiReg = /<img [^>]+ class="wl-emoji">/g
+        if(typeof EasyDanmaku === "undefined") await utils.getScript('!{url_for(theme.cdn.envelope_js)}')
+        const envel = new EasyDanmaku({
+            page: '!{theme.envelope.page}',
+            el: '#barrage',
+            line: !{line},
+            speed: !{speed},
+            hover: !{hover},
+            loop: !{loop},
+        })
+        const data = utils.saveToLocal.get('enevlope')
+        if(data){
+            envel.batchSend(data,true)
+            return
+        }
+        await fetch('!{theme.waline.envId}/api/comment?type=recent&count=50', {method: 'GET'}).then(async res => res.json())
+            .then(async data => {
+                let ls = []
+                for (const i of data.data) {
+                    ls.push({
+                        content: i.nick + ': ' + formatContent(i.comment),
+                        avatar: i.avatar,
+                        url: i.url
+                    })
+                }
+                envel.batchSend(ls,true)
+                utils.saveToLocal.set('enevlope',ls,.02)
+            }).catch(error => {
+                console.error("An error occurred while fetching comments: ", error)
+            })
+
+        function formatContent(content) {
+            content = content.replace(emojiReg, '[!{__("console.newest_comment.emoji")}]')
+            content = content.replace(/<img.*?>/g, '[!{__("console.newest_comment.image")}]');
+            content = content.replace(/<a.*?>.*?<\/a>/g, '[!{__("console.newest_comment.link")}]');
+            content = content.replace(/<pre.*?>.*?<\/pre>/g, '[!{__("console.newest_comment.code")}]');
+            content = content.replace(/<.*?>/g, '');
+            return content
+        }
+    })()

package/layout/includes/widgets/page/recentcomment/artalk.pug

@@ -0,0 +1,78 @@
+- const { server, site, option } = theme.artalk
+
+script(pjax).
+    (async () => {
+        document.querySelector('#comments-page').textContent = `#{__("loading")}`
+        const emojiReg = /<img [^>]+ atk-emoticon="[^"]+">/g
+        let cache = utils.saveToLocal.get('artalk-recent-comments')
+        if (cache) {
+            setHtml(document.querySelector('#comments-page'), cache)
+            return
+        }
+        let ls = []
+        const searchParams = new URLSearchParams({'site_name': "!{site}", 'limit': '!{limit}'})
+        await fetch(`!{server}/api/v2/stats/latest_comments?${searchParams}`, {method: 'GET'}).then(async res => res.json())
+            .then(async data => {
+                for (const i of data.data) {
+                    if (checkEmoji(i.content)) continue
+                    let title = ''
+                    if (i.page_key) {
+                        await fetch(i.page_key).then(res => res.text()).then(html => {
+                            const parser = new DOMParser()
+                            const doc = parser.parseFromString(html, 'text/html')
+                            title = doc.querySelector('title').innerText
+                        }).catch(() => {
+                            title = i.page_key
+                        })
+                    }
+                    if (title.indexOf('|') > 0) {
+                        title = title.split('|')[0]
+                    }
+                    ls.push({
+                        title: title,
+                        url: i.page_key + '#atk-comment-' + i.id,
+                        nick: i.nick,
+                        avatar: '!{avatar}' + '/avatar/' + i.email_encrypted,
+                        time: i.date,
+                        content: formatContent(i.content)
+                    })
+                }
+                setHtml(document.querySelector('#comments-page'), ls)
+                utils.saveToLocal.set('artalk-recent-comments', ls, !{cache})
+            })
+
+        function setHtml(el, data) {
+            el.innerHTML = data.map(i => `
+                                        <div class="comment-card" title="${i.title}" onclick="pjax.loadUrl('${i.url}')">
+                                            <div class="comment-info">
+                                                <img src="${i.avatar}" class="nolazyload" alt="${i.nick}">
+                                                <div>
+                                                    <span class="comment-user">${i.nick}</span>
+                                                </div>
+                                                <time class="comment-time" datetime="${i.time}"></time>
+                                            </div>
+                                            <div class="comment-content">${i.content}</div>
+                                            <div class="comment-title">
+                                            <i class="solitude st-chat-fill"></i>
+                                            ${i.title}</div>
+                                        </div>
+                                    `).join('')
+            if (typeof sco !== 'undefined') sco.changeTimeFormat(document.querySelectorAll('.comment-time'))
+            else {
+                document.addEventListener('pjax:complete', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
+                document.addEventListener('DOMContentLoaded', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
+            }
+        }
+
+        function checkEmoji(content) {
+            return emojiReg.test(content)
+        }
+
+        function formatContent(content) {
+            content = content.replace(emojiReg, '[!{__("console.newest_comment.emoji")}]')
+            content = content.replace(/!\[.*?\]\((.*?)\)/g, '[!{__("console.newest_comment.image")}]')
+            content = content.replace(/\[.*?\]\((.*?)\)/g, '[!{__("console.newest_comment.link")}]')
+            content = content.replace(/```.*?```/g, '[!{__("console.newest_comment.code")}]')
+            return content
+        }
+    })()

package/layout/includes/widgets/page/recentcomment/twikoo.pug

@@ -0,0 +1,83 @@
+- const {envId} = theme.twikoo
+
+script(pjax).
+    (async () => {
+        document.querySelector('#comments-page').textContent = `#{__("loading")}`
+        const emojiReg = /<img class="tk-owo-emotion" [^>]+>/g
+        let cache = utils.saveToLocal.get('twikoo-recent-comments')
+        if (cache) {
+            setHtml(document.querySelector('#comments-page'), cache)
+            return
+        }
+        let ls = []
+
+        await fetch('!{envId}', {
+            method: "POST",
+            body: JSON.stringify({
+                "event": "GET_RECENT_COMMENTS",
+                "includeReply": true,
+                "pageSize": !{limit}
+            }),
+            headers: {'Content-Type': 'application/json'}
+        }).then(res => res.json()).then(async ({data}) => {
+            for (const i of data) {
+                if (i.avatar === undefined) i.avatar = '!{avatar}/avatar/d615d5793929e8c7d70eab5f00f7f5f1?d=mp'
+                let title = ''
+                if (i.url) {
+                    await fetch(i.url).then(res => res.text()).then(html => {
+                        const parser = new DOMParser()
+                        const doc = parser.parseFromString(html, 'text/html')
+                        title = doc.querySelector('title').innerText
+                    }).catch(() => {
+                        title = i.url
+                    })
+                }
+                if (title.indexOf('|') > 0) {
+                    title = title.split('|')[0]
+                }
+                ls.push({
+                    avatar: i.avatar,
+                    nick: i.nick,
+                    title: title,
+                    content: i.comment,
+                    url: i.url + '#' + i.id,
+                    time: i.created
+                })
+            }
+            setHtml(document.querySelector('#comments-page'), ls)
+            utils.saveToLocal.set('twikoo-recent-comments', ls, !{cache})
+        });
+
+        function setHtml(el, data) {
+            el.innerHTML = data.map(i => `
+                <div class="comment-card" title="${i.title}" onclick="pjax.loadUrl('${i.url}')">
+                    <div class="comment-info">
+                        <img src="${i.avatar}" class="nolazyload" alt="${i.nick}">
+                        <div>
+                            <span class="comment-user">${i.nick}</span>
+                        </div>
+                        <time class="comment-time" datetime="${new Date(i.time)}"></time>
+                    </div>
+                    <div class="comment-content">${formatContent(i.content)}</div>
+                    <div class="comment-title">
+                    <i class="solitude st-chat-fill"></i>
+                    ${i.title}</div>
+                </div>
+            `).join('')
+            if (typeof sco !== 'undefined') sco.changeTimeFormat(document.querySelectorAll('.comment-time'))
+            else {
+                document.addEventListener('pjax:complete', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
+                document.addEventListener('DOMContentLoaded', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
+            }
+        }
+
+        function formatContent(content) {
+            content = content.replace(emojiReg, '!{__("console.newest_comment.emoji")}')
+            content = content.replace(/<\/*br>|[\s\uFEFF\xA0]+/g, '');
+            content = content.replace(/<img.*?>/g, '[!{__("console.newest_comment.image")}]');
+            content = content.replace(/<a.*?>.*?<\/a>/g, '[!{__("console.newest_comment.link")}]');
+            content = content.replace(/<pre.*?>.*?<\/pre>/g, '[!{__("console.newest_comment.code")}]');
+            content = content.replace(/<.*?>/g, '');
+            return content
+        }
+    })()

package/layout/includes/widgets/page/recentcomment/valine.pug

@@ -0,0 +1,79 @@
+- const { appId, appKey, serverURLs } = theme.valine
+
+script(pjax).
+    (async () => {
+        document.querySelector('#comments-page').textContent = `#{__("loading")}`
+        const emojiReg = /:[a-z0-9_\u4e00-\u9fa5]+:/g
+        let cache = utils.saveToLocal.get('valine-recent-comments')
+        if (cache) {
+            setHtml(document.querySelector('#comments-page'), cache)
+            return
+        }
+        let ls = []
+        if (typeof md5 === "undefined") await utils.getScript('!{url_for(theme.cdn.blueimp_md5)}')
+        await fetch('!{serverURLs}/1.1/classes/Comment?limit=8&order=-createdAt', {
+            method: "GET",
+            headers: {
+                "X-LC-Id": '!{appId}',
+                "X-LC-Key": '!{appKey}',
+                "Content-Type": "application/json"
+            }
+        }).then(async res => res.json()).then(async results => {
+            for (const i of results.results) {
+                let title = ''
+                if (i.url) {
+                    await fetch(i.url).then(res => res.text()).then(html => {
+                        const parser = new DOMParser()
+                        const doc = parser.parseFromString(html, 'text/html')
+                        title = doc.querySelector('title').innerText
+                    }).catch(() => {
+                        title = i.url
+                    })
+                }
+                if (title.indexOf('|') > 0) {
+                    title = title.split('|')[0]
+                }
+                ls.push({
+                    title: title,
+                    url: i.url,
+                    nick: i.nick,
+                    avatar: '!{avatar}' + '/avatar/' + md5(i.mail.trim().toLowerCase()),
+                    time: i.createdAt,
+                    content: formatContent(i.comment)
+                })
+            }
+            setHtml(document.querySelector('#comments-page'), ls)
+            utils.saveToLocal.set('valine-recent-comments', ls, !{cache})
+        })
+
+        function setHtml(el, data) {
+            el.innerHTML = data.map(i => `
+                        <div class="comment-card" title="${i.title}" onclick="pjax.loadUrl('${i.url}')">
+                            <div class="comment-info">
+                                <img src="${i.avatar}" class="nolazyload" alt="${i.nick}">
+                                <div>
+                                    <span class="comment-user">${i.nick}</span>
+                                </div>
+                                <time class="comment-time" datetime="${i.time}"></time>
+                            </div>
+                            <div class="comment-content">${i.content}</div>
+                            <div class="comment-title">
+                            <i class="solitude st-chat-fill"></i>
+                            ${i.title}</div>
+                        </div>
+                    `).join('')
+            if (typeof sco !== 'undefined') sco.changeTimeFormat(document.querySelectorAll('.comment-time'))
+            else {
+                document.addEventListener('pjax:complete', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
+                document.addEventListener('DOMContentLoaded', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
+            }
+        }
+
+        function formatContent(content) {
+            content = content.replace(emojiReg, '[!{__("console.newest_comment.emoji")}]')
+            content = content.replace(/!\[.*?\]\((.*?)\)/g, '[!{__("console.newest_comment.image")}]')
+            content = content.replace(/\[.*?\]\((.*?)\)/g, '[!{__("console.newest_comment.link")}]')
+            content = content.replace(/```.*?```/g, '[!{__("console.newest_comment.code")}]')
+            return content
+        }
+    })()

package/layout/includes/widgets/page/recentcomment/waline.pug

@@ -0,0 +1,72 @@
+script(pjax).
+    (async () => {
+        document.querySelector('#comments-page').textContent = `#{__("loading")}`
+        const emojiReg = /<img [^>]+ class="wl-emoji">/g
+        let cache = utils.saveToLocal.get('waline-recent-comments')
+        if (cache) {
+            setHtml(document.querySelector('#comments-page'), cache)
+            return
+        }
+        let ls = []
+        await fetch('!{theme.waline.envId}/api/comment?type=recent&count=!{limit}', {method: 'GET'}).then(async res => res.json())
+            .then(async data => {
+                console.log(data)
+                for (const i of data.data) {
+                    let title = ''
+                    if (i.url) {
+                        await fetch(i.url).then(res => res.text()).then(html => {
+                            const parser = new DOMParser()
+                            const doc = parser.parseFromString(html, 'text/html')
+                            title = doc.querySelector('title').innerText
+                        }).catch(() => {
+                            title = i.url
+                        })
+                    }
+                    if (title.indexOf('|') > 0) {
+                        title = title.split('|')[0]
+                    }
+                    ls.push({
+                        title: title,
+                        url: i.url,
+                        nick: i.nick,
+                        avatar: i.avatar,
+                        time: new Date(i.time),
+                        content: formatContent(i.comment)
+                    })
+                }
+                setHtml(document.querySelector('#comments-page'), ls)
+                utils.saveToLocal.set('waline-recent-comments', ls, !{cache})
+            })
+
+        function setHtml(el, data) {
+            el.innerHTML = data.map(i => `
+                                <div class="comment-card" title="${i.title}" onclick="pjax.loadUrl('${i.url}')">
+                                    <div class="comment-info">
+                                        <img src="${i.avatar}" class="nolazyload" alt="${i.nick}">
+                                        <div>
+                                            <span class="comment-user">${i.nick}</span>
+                                        </div>
+                                        <time class="comment-time" datetime="${i.time}"></time>
+                                    </div>
+                                    <div class="comment-content">${i.content}</div>
+                                    <div class="comment-title">
+                                    <i class="solitude st-chat-fill"></i>
+                                    ${i.title}</div>
+                                </div>
+                            `).join('')
+            if (typeof sco !== 'undefined') sco.changeTimeFormat(document.querySelectorAll('.comment-time'))
+            else {
+                document.addEventListener('pjax:complete', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
+                document.addEventListener('DOMContentLoaded', () => sco.changeTimeFormat(document.querySelectorAll('.comment-time')))
+            }
+        }
+
+        function formatContent(content) {
+            content = content.replace(emojiReg, '[!{__("console.newest_comment.emoji")}]')
+            content = content.replace(/<img.*?>/g, '[!{__("console.newest_comment.image")}]');
+            content = content.replace(/<a.*?>.*?<\/a>/g, '[!{__("console.newest_comment.link")}]');
+            content = content.replace(/<pre.*?>.*?<\/pre>/g, '[!{__("console.newest_comment.code")}]');
+            content = content.replace(/<.*?>/g, '');
+            return content
+        }
+    })()

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

@@ -41,7 +41,7 @@ script.
             const artalkWrap = document.getElementById('artalk-wrap')
             if (!(artalkWrap && artalkWrap.children.length)) return
             const isDark = theme === 'dark'
-            artalkItem.setDarkMode(!isDark)
+            artalkItem.setDarkMode(isDark)
         }
         utils.addGlobalFn('themeChange', artalkChangeMode, 'artalk')
         if ('!{use[0]}' === 'Artalk' || !{lazyload}) {

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

@@ -1,5 +1,6 @@
 script.
     window.addEventListener('load', () => {
+        const emojiReg = /:[a-z0-9_\u4e00-\u9fa5]+:/g
         const changeContent = (content) => {
             if (content === '') return content;
 
@@ -38,31 +39,32 @@ script.
                 },
             }
             if (typeof md5 === "undefined") await utils.getScript('!{url_for(theme.cdn.blueimp_md5)}')
-            await fetch('!{theme.valine.serverURLs}/1.1/classes/Comment?limit=8&order=-createdAt', settings).then(async res => {
-                const result = await res.json()
-                window.res = result
-                const valineArray = result.results.map(e => {
-                    return {
-                        'content': changeContent(e.comment),
-                        'avatar': '!{theme.comment.avatar}' + '/avatar/' + md5(e.mail.toLowerCase()),
-                        'nick': e.nick,
-                        'url': e.url + '#' + e.objectId,
-                        'date': e.updatedAt || e.createdAt
+            await fetch('!{theme.valine.serverURLs}/1.1/classes/Comment?limit=8&order=-createdAt', settings).then(res => res.json())
+                .then(async result => {
+                    let ls = []
+                    for (const i of result.results.slice(0, 6)) {
+                        if (emojiReg.test(i.comment)) continue
+                        ls.push({
+                            content: changeContent(i.comment),
+                            avatar: '!{theme.comment.avatar}' + '/avatar/' + md5(i.mail.toLowerCase()),
+                            nick: i.nick,
+                            url: i.url,
+                            date: i.updatedAt || i.createdAt
+                        })
                     }
+                    utils.saveToLocal.set('valine-newest-comment', ls, !{theme.comment.newest_comment.storage})
+                    generateHtml(ls)
+                }).catch(error => {
+                    console.error(error);
+                    $asideList.textContent = "!{_p('newest_comment.error')}"
                 })
-                utils.saveToLocal.set('valine-newest-comment', valineArray, !{theme.comment.newest_comment.storage})
-                generateHtml(valineArray)
-            }).catch(error => {
-                console.error(error);
-                $asideList.textContent = "!{_p('newest_comment.error')}"
-            })
         }
 
         const generateHtml = array => {
             const $dom = document.querySelector('#card-newest-comments .aside-list')
             $dom.innerHTML = array.length ? array.map(item => `
                         <div class='aside-list-item'>
-                          <div onclick='pjax.loadUrl("${item.url}")' class='thumbnail'>
+                          <div onclick='pjax.loadUrl(\"${item.url}\")' class='thumbnail'>
                             <img src='${item.avatar}' alt='${item.nick}'>
                             <div class='name'><span>${item.nick}</span></div>
                           </div>

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

@@ -29,7 +29,7 @@ script.
         }
 
         const getComment = async () => {
-            await fetch('!{theme.waline.envId}/api/comment?type=recent&count=8', {method: 'GET'}).then(async res => {
+            await fetch('!{theme.waline.envId}/api/comment?type=recent&count=6', {method: 'GET'}).then(async res => {
                 const result = await res.json()
                 const walineArray = result.data.map(e => {
                     return {
@@ -37,9 +37,9 @@ script.
                         'avatar': e.avatar,
                         'nick': e.nick,
                         'url': e.url + '#' + e.objectId,
-                        'date': e.time || e.insertedAt
+                        'date': new Date(e.time || e.insertedAt)
                     }
-                }).slice(0, 6)
+                })
                 utils.saveToLocal.set('waline-newest-comment', walineArray, !{theme.comment.newest_comment.storage})
                 generateHtml(walineArray)
             }).catch(error => {

package/layout/page.pug

@@ -22,6 +22,8 @@ block content
                     include includes/page/music
                 when 'message'
                     !=partial('includes/page/message', {}, {cache: true})
+                when 'recentcomment'
+                    !=partial('includes/page/recentcomment', {}, {cache: true})
                 when 'banner'
                     include includes/widgets/page/banner
                     if page.container

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-solitude",
-  "version": "1.10.6",
+  "version": "1.11.0",
   "description": "A beautiful, powerful, and efficient Hexo theme developed by EverFu.",
   "main": "package.json",
   "scripts": {

package/plugins.yml

@@ -5,7 +5,7 @@ algolia_search:
 instantsearch:
   name: instantsearch.js
   file: dist/instantsearch.production.min.js
-  version: 4.67.0
+  version: 4.68.1
 pjax:
   name: pjax
   file: pjax.min.js
@@ -31,11 +31,11 @@ valine:
 artalk_css:
   name: artalk
   file: dist/Artalk.css
-  version: 2.8.5
+  version: 2.8.6
 artalk_js:
   name: artalk
   file: dist/Artalk.js
-  version: 2.8.5
+  version: 2.8.6
 katex:
   name: katex
   file: dist/katex.min.css

package/scripts/event/merge_config.js

@@ -200,12 +200,19 @@ hexo.extend.filter.register('before_generate', () => {
             style: 1,
             strip: 30
         },
+        recent_comments: {
+            enable: false,
+            limit: 50,
+            console: false,
+            page: '/recentcomments/'
+        },
         envelope: {
             enable: false,
             line: 10,
             speed: 20,
             hover: true,
             loop: true,
+            page: '/message/'
         },
         meting_api: "https://meting.qjqq.cn/?server=:server&type=:type&id=:id&auth=:auth&r=:r",
         music: {

package/source/css/_comments/comment.styl

@@ -154,7 +154,7 @@ div#post-comment
   border var(--style-border-always)
   border-radius 10px
   z-index 9999
-  width 142px
+  max-width 142px
   display none
   transform translate(0, -105%)
   overflow hidden

package/source/css/_comments/valine.styl

@@ -46,6 +46,7 @@
     padding 0
     overflow: inherit;
     flex-direction column-reverse
+    margin-bottom 0
 
     .vheader
       display flex

package/source/css/_layout/console.styl

@@ -17,6 +17,15 @@
   &.show .close-btn i
     transform rotate(0)
 
+  if hexo-config('recent_comments.enable') && hexo-config('recent_comments.console')
+    .recent-comment-more
+      margin-left auto
+      display flex
+      align-items center
+
+      &:hover
+        color var(--efu-main)
+
   .console-card-group
     display flex
     justify-content space-between
@@ -104,6 +113,8 @@
     font-size 36px
     font-weight 700
     line-height 1
+    display flex
+    align-items center
 
   .aside-list-item
     .thumbnail

package/source/css/_layout/footer.styl

@@ -135,7 +135,7 @@
     .footer-title-group
       display flex
       align-items center
-      margin 1rem 0 .7rem 8px
+      margin .5rem 0 .7rem 8px
 
       a
         margin-left 8px

package/source/css/_page/index.styl

@@ -6,6 +6,9 @@
 
 @import "error.styl"
 
+if hexo-config('recent_comments.enable')
+  @import "recentcomment.styl"
+
 if hexo-config('says.enable')
   @import "says.styl"
 

package/source/css/_page/recentcomment.styl

@@ -0,0 +1,85 @@
+div#comments-page
+  display flex
+  flex-wrap wrap
+  gap 12px
+  min-height 100px
+  width 100%
+  margin-top .5rem
+
+.comment-card
+  position relative
+  width calc(100% / 3 - 8px)
+  background var(--efu-card-bg)
+  border-radius 12px
+  border var(--style-border-always)
+  padding 14px
+  cursor pointer
+  transition .3s
+  overflow hidden
+  gap 8px
+  display flex
+  flex-direction column
+
+  +maxWidth900()
+    width calc(100% / 2 - 6px)
+
+  +maxWidth768()
+    width 100%
+
+  &:hover
+    border-color var(--style-border-hover-always)
+
+.comment-info
+  display flex
+  align-items center
+  gap 8px
+  border-bottom var(--style-border-always)
+  padding-bottom 8px
+
+  div
+    display flex
+    flex-direction column
+    line-height 1.5
+
+.comment-article, .comment-content
+  transition .3s
+  overflow hidden
+  text-overflow ellipsis
+  display -webkit-box
+  -webkit-box-orient vertical
+  -webkit-line-clamp 2
+  line-height 1.7
+  font-size 14px
+
+.comment-title
+  font-size 12px
+  color var(--efu-secondtext)
+  margin-top auto
+  transition .3s
+  overflow hidden
+  text-overflow ellipsis
+  display -webkit-box
+  -webkit-box-orient vertical
+  -webkit-line-clamp 1
+  line-height 1
+  opacity .6
+  padding-top 8px
+
+  i
+    font-size 12px
+    line-height 12px
+
+#comments-page .comment-info img
+  width 30px
+  height 30px
+  object-fit cover
+  border-radius 30px
+  margin 0
+
+span.comment-user
+  font-weight 700
+
+time.comment-time
+  font-size 12px
+  color var(--efu-secondtext)
+  margin-left auto

package/source/css/_page/says.styl

@@ -13,22 +13,13 @@ if hexo-config('says.home_mini')
     user-select none
     align-items center
     padding .5rem 1rem
+    animation slide-in .6s 0s backwards
+    margin-bottom .5rem
 
     &.more-page
       margin-bottom 0
 
-    if hexo-config('hometop.enable')
-      margin-bottom 1rem
-
-    +maxWidth1300()
-      if hexo-config('hometop.enable')
-        margin-bottom 1rem
-      animation slide-in .6s 0s backwards
-
     +minWidth1300()
-      if hexo-config('hometop.enable')
-        margin-bottom .5rem
-      animation slide-in .6s 0s backwards
       &:hover
         border var(--style-border-hover)
         box-shadow var(--efu-shadow-main)