feat: custom modified time view template

src/custom-time-view-template/$__core_ui_ViewTemplate_subtitle_modified.tid

@@ -0,0 +1,7 @@
+created: 20240723092703962
+modified: 20240723093056074
+tags: $:/tags/ViewTemplate/Subtitle
+title: $:/core/ui/ViewTemplate/subtitle/modified
+type: text/vnd.tiddlywiki
+
+最后修改于<$TimeSince DateTime={{!!modified}} />

src/custom-time-view-template/index.ts

@@ -0,0 +1,65 @@
+import { widget as Widget } from '$:/core/modules/widgets/widget.js';
+import { IChangedTiddlers } from 'tiddlywiki';
+
+class TimeSinceWidget extends Widget {
+    refresh(_changedTiddlers: IChangedTiddlers) {
+        return false;
+    }
+
+    render(parent: Element, nextSibling: Element) {
+        this.parentDomNode = parent;
+        this.computeAttributes();
+        this.execute();
+        if (!this.hasAttribute("DateTime")) {
+            return undefined;
+        }
+        console.log(this.getAttribute("DateTime"));
+        const tiddlyWikiDateTimeStr = this.getAttribute("DateTime") as string;
+        const dateTime = this.parseTiddlerDateTime(tiddlyWikiDateTimeStr);
+        const formatTimeSince = this.formatTimeSince(dateTime);
+        const containerElement = $tw.utils.domMaker('span', {
+            text: formatTimeSince,
+        });
+        parent.insertBefore(containerElement, nextSibling);
+        this.domNodes.push(containerElement);
+    }
+
+    formatTimeSince(dateTime: Date): string {
+        const now = new Date();
+        const timeDiff = now.getTime() - dateTime.getTime();
+        const yearDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24 * 365));
+        const monthDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24 * 30));
+        const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
+        const hourDiff = Math.floor(timeDiff / (1000 * 60 * 60));
+
+        if (yearDiff > 0) {
+            return `${yearDiff}年前`;
+        } else if (monthDiff > 0) {
+            return `${monthDiff}个月前`;
+        } else if (dayDiff > 0) {
+            return `${dayDiff}天前`;
+        } else if (hourDiff > 0) {
+            return `${hourDiff}小时前`;
+        } else {
+            return '刚刚';
+        }
+    }
+
+    parseTiddlerDateTime(dateTimeStr: string): Date {
+        const year = parseInt(dateTimeStr.substring(0, 4), 10);
+        const month = parseInt(dateTimeStr.substring(4, 6), 10) - 1; // JavaScript中月份是从0开始的
+        const day = parseInt(dateTimeStr.substring(6, 8), 10);
+        const hour = parseInt(dateTimeStr.substring(8, 10), 10);
+        const minute = parseInt(dateTimeStr.substring(10, 12), 10);
+        const second = parseInt(dateTimeStr.substring(12, 14), 10);
+        const millisecond = dateTimeStr.length > 14 ? parseInt(dateTimeStr.substring(14), 10) : 0;
+
+        return new Date(year, month, day, hour, minute, second, millisecond);
+    }
+
+}
+
+declare let exports: {
+    TimeSince: typeof TimeSinceWidget;
+};
+exports.TimeSince = TimeSinceWidget;

src/custom-time-view-template/index.ts.meta

@@ -0,0 +1,3 @@
+title: $:/plugins/gltzeba/custom-time-view-template/index.ts
+type: application/javascript
+module-type: widget

src/custom-time-view-template/plugin.info

@@ -0,0 +1,9 @@
+{
+  "title": "$:/plugins/gltzeba/custom-time-view-template",
+  "name": "custom-time-view-template",
+  "author": "gltzeba",
+  "description": "日期显示模板",
+  "plugin-type": "plugin",
+  "version": "0.0.2",
+  "list": "readme"
+}

src/custom-time-view-template/readme.tid

@@ -0,0 +1,6 @@
+title: $:/plugins/gltzeba/custom-time-view-template/readme
+type: text/vnd.tiddlywiki
+
+! custom-time-view-template
+
+日期显示模板

src/custom-time-view-template/viewTemplate_subtitle_created.tid

@@ -0,0 +1,7 @@
+created: 20240718073116305
+modified: 20240718073311522
+tags: $:/tags/ViewTemplate/Subtitle
+title: $:/plugins/gltzeba/custom-time-view-template/viewTemplate/subtitle/created
+type: text/vnd.tiddlywiki
+
+创建于 <$view field="created" format="date" template={{$:/language/Tiddler/DateFormat}}/>

wiki/tiddlers/Test 日期显示.tid

@@ -0,0 +1,7 @@
+created: 20240722064514974
+modified: 20240723093312066
+tags: 
+title: Test 日期显示
+type: text/vnd.tiddlywiki
+
+<span><$TimeSince DateTime="20240722064514974" />最后修改于<$TimeSince DateTime={{!!modified}} />最后修改于<$TimeSince DateTime={{!!modified}} /></span>

wiki/tiddlers/Test.tid

@@ -1,6 +1,6 @@
 1: 2024-07-22T12:00:00.000+08:00
 created: 20240627183945234
-modified: 20240702114517080
+modified: 20240723092503736
 tags: 
 title: Test
 type: text/vnd.tiddlywiki
@@ -11,4 +11,7 @@ type: text/vnd.tiddlywiki
 
 <$DatePicker id="1"/><$DatePicker id="1"/> 
 <$DatePicker id="1"/><$DatePicker id="1"/> 
-<$DatePicker id="1"/> 
+<$DatePicker id="1"/><$DatePicker id="1"/> 
+<$DatePicker id="1"/><$DatePicker id="1"/> 
+
+<$TimeSince DateTime="20230627183945234" />