hexo-theme-solitude 1.10.6 → 1.11.1

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.1",
   "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/_global/index.styl

@@ -422,4 +422,12 @@ span.tags-punctuation::before
 
   #post-info &
     font-size 14px
-    line-height 32px
+    line-height 32px
+
+if hexo-config('memorial.enable')
+  .memorial
+    -webkit-filter grayscale(100%)
+    -moz-filter grayscale(100%)
+    -ms-filter grayscale(100%)
+    -o-filter grayscale(100%)
+    filter grayscale(100%)

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
@@ -197,6 +197,9 @@
         padding 0 8px
         margin 0 4px
 
+        .footer-bar-link
+          margin 0
+
     .footer-bar-link
       margin 0 4px
       color var(--efu-fontcolor)

package/source/css/_layout/other.styl

@@ -13,7 +13,7 @@ span.tags-punctuation
   color var(--efu-gray)
   font-size 14px;
   position absolute
-  bottom 2rem
+  bottom 1rem
   left 2rem
 
   +maxWidth768()
@@ -22,6 +22,7 @@ span.tags-punctuation
   a
     color var(--efu-gray)
     border none
+    margin-left 4px
 
     &:hover
       color var(--efu-main)

package/source/css/_page/_about/skills.styl

@@ -13,7 +13,7 @@
       transition .3s
 
     .tags-group-wrapper
-      margin-top 20px
+      margin-top 40px
       display flex
       flex-wrap nowrap
       animation rowleft 60s linear infinite

package/source/css/_page/_about/statistic.styl

@@ -28,7 +28,7 @@
       justify-content space-between
       flex-direction row
       flex-wrap wrap
-      margin-top 1rem
+      margin-top 4px
       margin-bottom 2rem
 
       div

package/source/css/_page/_home/home-top.styl

@@ -61,6 +61,9 @@
     +maxWidth1200()
       overflow-x auto
 
+      &::-webkit-scrollbar
+        display none
+
     +minWidth1201()
       display flex
       flex-direction row

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/other.styl

@@ -132,11 +132,6 @@ div#banners
       font-weight 700
       box-shadow var(--efu-shadow-blackdeep)
 
-      #page &
-        +maxWidth768()
-          width 50px
-          height 50px
-
       &:nth-child(even)
         margin-top 1rem
         transform translate(-60px)
@@ -224,7 +219,7 @@ div#banners
 
     .banner-button-group
       position absolute
-      bottom 1.5rem
+      bottom 1rem
       right 2rem
 
       .banner-button

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