fix: waline 最新评论 & 浏览量问题

theme-shoka-x · Feb 15, 2024 · 24ed724 · 24ed724
1 parent 3967fc1
commit 24ed724
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 30 deletions.
diff --git a/layout/_mixin/widgets.pug b/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")
 
diff --git a/package.json b/package.json
@@ -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",

diff --git a/source/js/_app/components/comments.ts b/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)
 }
diff --git a/source/js/_app/components/tcomments.ts b/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)
 }