feat(ui/date): add dateFormatter config option (#940)

ArtalkJS · Aug 28, 2024 · 50e967f · 50e967f
1 parent cf58a54
commit 50e967f
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 3 deletions.
diff --git a/docs/docs/guide/frontend/config.md b/docs/docs/guide/frontend/config.md
@@ -105,6 +105,28 @@ Artalk 支持多站点统一管理，此项用于站点隔离。
 
 详情参考：[多语言](./i18n.md)
 
+### dateFormatter
+
+**时间格式化函数**
+
+- 类型：`(date: Date) => string`
+- 默认值：`undefined`
+
+默认显示几秒前、几分钟前、几小时前、几天前，如果超过 7 天则显示具体日期，格式为 `YYYY-MM-DD`。
+
+你也可以自定义时间格式化函数，以下的例子演示了使用 [toLocaleString](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) 和 [dayjs](https://day.js.org/) 格式化时间。
+
+```js
+import dayjs from 'dayjs'
+
+Artalk.init({
+  dateFormatter: (date) => {
+    // return date.toLocaleString()  // '2024/8/28 17:51:31'
+    return dayjs(date).fromNow("MMMM D, YYYY h:mm A")  // 'August 28, 2024 5:51 PM'
+  },
+})
+```
+
 ## 请求
 
 ### reqTimeout

diff --git a/ui/artalk/src/comment/comment-node.ts b/ui/artalk/src/comment/comment-node.ts
@@ -26,6 +26,7 @@ export interface CommentOptions {
   heightLimit: ArtalkConfig['heightLimit']
   avatarURLBuilder: ArtalkConfig['avatarURLBuilder']
   scrollRelativeTo: ArtalkConfig['scrollRelativeTo']
+  dateFormatter: ArtalkConfig['dateFormatter']
 
   // TODO: Move to plugin folder and remove from core
   getApi: () => Api
@@ -215,7 +216,8 @@ export default class CommentNode {
 
   /** 获取格式化后的日期 */
   public getDateFormatted() {
-    return Utils.timeAgo(new Date(this.data.date), $t)
+    const date = new Date(this.data.date)
+    return this.opts.dateFormatter?.(date) || Utils.timeAgo(date, $t)
   }
 
   /** 获取用户 UserAgent 信息 */

diff --git a/ui/artalk/src/list/comment.ts b/ui/artalk/src/list/comment.ts
@@ -34,6 +34,7 @@ export function createCommentNode(
     vote: ctx.conf.vote,
     voteDown: ctx.conf.voteDown,
     uaBadge: ctx.conf.uaBadge,
+    dateFormatter: ctx.conf.dateFormatter,
 
     // TODO: move to plugin folder and remove from core
     getApi: () => ctx.getApi(),

diff --git a/ui/artalk/src/plugins/list/time-ticking.ts b/ui/artalk/src/plugins/list/time-ticking.ts
@@ -10,8 +10,8 @@ export const TimeTicking: ArtalkPlugin = (ctx) => {
       const list = ctx.get('list')
 
       list.$el.querySelectorAll<HTMLElement>('[data-atk-comment-date]').forEach((el) => {
-        const date = el.getAttribute('data-atk-comment-date')
-        el.innerText = Utils.timeAgo(new Date(Number(date)), ctx.$t)
+        const date = new Date(Number(el.getAttribute('data-atk-comment-date')))
+        el.innerText = ctx.getConf().dateFormatter?.(date) || Utils.timeAgo(date, ctx.$t)
       })
     }, 30 * 1000) // 30s 更新一次
   })

diff --git a/ui/artalk/src/types/config.ts b/ui/artalk/src/types/config.ts
@@ -139,6 +139,13 @@ export interface ArtalkConfig {
   /** 列表请求参数修改器 */
   listFetchParamsModifier?: (params: any) => void
 
+  /**
+   * Date formatter for custom date format
+   * @param date - Date object
+   * @returns Formatted date string
+   */
+  dateFormatter?: (date: Date) => string
+
   // TODO consider merge list related config into one object, or flatten all to keep simple (keep consistency)
   remoteConfModifier?: (conf: Partial<ArtalkConfig>) => void
   listUnreadHighlight?: boolean