Merge pull request #241 from zkz098/main

fix: 最新评论与浏览量问题

layout/_mixin/widgets.pug

@@ -23,11 +23,6 @@ mixin WRender(item)
         div(class="rpost pjax")
             h2
                 != __('index.recent_comments')
-            ul(class="leancloud-recent-comment" id="new-comment")
-                if tk || waline
-                    li(v-for="com in coms" class="item")
-                        a(v-bind:href="root + com.href" data-pjax-state="data-pjax-state")
-                            span(class="breadcrumb") {{com.nick}} @ {{com.time}}
-                            span {{com.text}}
-                                br
+            if tk || waline
+                ul(class="leancloud-recent-comment" id="new-comment")
 

layout/_partials/sidebar/overview.pug

@@ -1,5 +1,5 @@
 div(class="author" itemprop="author" itemscope itemtype="http://schema.org/Person")
-    img(loading="eager" decoding="async" class="image" itemprop="image" alt=author
+    img(loading="lazy" decoding="async" class="image" itemprop="image" alt=author
         src=url_for(theme.statics + theme.assets + '/'+ theme.sidebar.avatar))
     p(class="name" itemprop="name")
         != author

package.json

@@ -1,6 +1,6 @@
 {
     "name": "hexo-theme-shokax",
-    "version": "0.4.1",
+    "version": "0.4.2",
     "description": "a hexo theme based on shoka",
     "main": "index.js",
     "repository": "https://github.com/theme-shoka-x/hexo-theme-shokaX",
@@ -28,7 +28,7 @@
         "typescript": "^5.3.3"
     },
     "dependencies": {
-        "@waline/client": "3.0.0-alpha.11",
+        "@waline/client": "^3.0.1",
         "vue": "^3.4.15",
         "@algolia/client-search": "^4.22.1",
         "algoliasearch": "4.22.1",

source/js/_app/components/comments.ts

@@ -1,7 +1,8 @@
 import { CONFIG } from '../globals/globalVars'
-import { init, pageviewCount, RecentComments } from '@waline/client'
+import { init, RecentComments } from '@waline/client'
+import { pageviewCount } from '@waline/client/pageview'
 
-import { createApp } from 'vue'
+import { $dom } from '../library/dom'
 
 export const walineComment = function () {
   init({
@@ -21,6 +22,7 @@ export const walineComment = function () {
 }
 
 export const walinePageview = function () {
+  // TODO waline 上游此模块存在问题
   pageviewCount({
     serverURL: CONFIG.waline.serverURL,
     path: window.location.pathname
@@ -34,24 +36,54 @@ export const walineRecentComments = async function () {
     serverURL: CONFIG.waline.serverURL.replace(/\/+$/, ''),
     count: 10
   })
-  comments.forEach(function (item) {
+  // TODO 疑似 waline API 返回格式与文档不一致，需要确认是否为上游问题
+  // @ts-ignore
+  comments.data.forEach(function (item) {
     let cText = (item.orig.length > 50) ? item.orig.substring(0, 50) + '...' : item.orig
     item.url = item.url.startsWith('/') ? item.url : '/' + item.url
     const siteLink = item.url + '#' + item.objectId
+
+    const time = new Date(item.time)
+    const now = new Date()
+    const diff = now.valueOf() - time.valueOf()
+    let dateStr:string
+    if (diff < 3600000) {
+      dateStr = `${Math.floor(diff / 60000)} 分钟前`
+    } else if (diff < 86400000) {
+      dateStr = `${Math.floor(diff / 3600000)} 小时前`
+    } else if (diff < 2592000000) {
+      dateStr = `${Math.floor(diff / 86400000)} 天前`
+    } else {
+      dateStr = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
+    }
+
     items.push({
       href: siteLink,
       nick: item.nick,
-      // @ts-ignore
-      time: item.insertedAt.split('T').shift(),
+      time: dateStr,
       text: cText
     })
   })
-  createApp({
-    data () {
-      return {
-        coms: items,
-        root
-      }
-    }
-  }).mount('#new-comment')
+  const newComments = new DocumentFragment()
+  items.forEach(function (item) {
+    const commentEl = document.createElement('li')
+    const commentLink = document.createElement('a')
+    const commentTime = document.createElement('span')
+    const commentText = document.createElement('span')
+
+    commentText.innerText = item.text
+    commentTime.className = 'breadcrumb'
+    commentTime.innerText = `${item.nick} @ ${item.time}`
+    commentLink.href = root + item.href
+    commentLink['data-pjax-state'] = 'data-pjax-state'
+    commentEl.className = 'item'
+
+    commentText.appendChild(document.createElement('br'))
+    commentLink.appendChild(commentTime)
+    commentLink.appendChild(commentText)
+    commentEl.appendChild(commentLink)
+    newComments.appendChild(commentEl)
+  })
+
+  $dom('#new-comment').appendChild(newComments)
 }

source/js/_app/components/tcomments.ts

@@ -1,6 +1,6 @@
 import twikoo from 'twikoo'
 import { CONFIG } from '../globals/globalVars'
-import { createApp } from 'vue'
+import { $dom } from '../library/dom'
 
 export const twikooComment = function () {
   twikoo.init({
@@ -30,12 +30,26 @@ export const twikooRecentComments = async function () {
       text: cText
     })
   })
-  createApp({
-    data () {
-      return {
-        coms: comments,
-        root
-      }
-    }
-  }).mount('#new-comment')
+  const newComments = new DocumentFragment()
+  comments.forEach(function (item) {
+    const commentEl = document.createElement('li')
+    const commentLink = document.createElement('a')
+    const commentTime = document.createElement('span')
+    const commentText = document.createElement('span')
+
+    commentText.innerText = item.text
+    commentTime.className = 'breadcrumb'
+    commentTime.innerText = `${item.nick} @ ${item.time}`
+    commentLink.href = root + item.href
+    commentLink['data-pjax-state'] = 'data-pjax-state'
+    commentEl.className = 'item'
+
+    commentText.appendChild(document.createElement('br'))
+    commentLink.appendChild(commentTime)
+    commentLink.appendChild(commentText)
+    commentEl.appendChild(commentLink)
+    newComments.appendChild(commentEl)
+  })
+
+  $dom('#new-comment').appendChild(newComments)
 }