feat: the article list is sorted by time in descending order by default.

package.json

@@ -11,7 +11,7 @@
     "dev": "pnpm -F vitepress-theme-mild run dev",
     "build": "pnpm -F vitepress-theme-mild run build",
     "release": "pnpm -F vitepress-theme-mild run release",
-    "demo:dev": "pnpm -F demo run dev",
+    "demo:dev": "pnpm build && pnpm -F demo run dev",
     "demo:build": "pnpm -F demo run build",
     "demo:preview": "pnpm -F demo run preview",
     "prepare": "simple-git-hooks",

packages/demo/docs/src/demo2.md

@@ -1,11 +1,12 @@
 ---
+date: 2024-12-25 17:25:00
 category: 服务器
 tags:
   - demo
 ---
 
 # demo2
-
+测试时间
 可以在 Markdown 文件、主题中的 \*.vue 组件、样式和普通的 .css 文件中引用静态资源，可以使用绝对路径 (基于项目根目录) 或者相对路径 (基于文件系统)。后者类似于 Vite、Vue CLI 或者 webpack 的 file-loader 的行为。
 
 常见的图像，媒体和字体文件会被自动检测并视作资源。

packages/demo/docs/src/demo4.md

@@ -6,6 +6,7 @@ tags:
 ---
 # demo4
 
+这是demo4 测试时间
 可以在 Markdown 文件、主题中的 \*.vue 组件、样式和普通的 .css 文件中引用静态资源，可以使用绝对路径 (基于项目根目录) 或者相对路径 (基于文件系统)。后者类似于 Vite、Vue CLI 或者 webpack 的 file-loader 的行为。
 
 常见的图像，媒体和字体文件会被自动检测并视作资源。

packages/theme/src/components/ArticlesList.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ArticlesData } from '../datas/articles.data.js';
 import { useUrlSearchParams } from '@vueuse/core';
-import { NEllipsis, NPagination } from 'naive-ui';
+import { NPagination, NTime } from 'naive-ui';
 import { useRouter } from 'vitepress';
 import { computed, ref, watch, watchEffect } from 'vue';
 import { useArticleData } from '../hooks/useArticleData.js';
@@ -83,13 +83,15 @@ watch(currentPage, () => {
           <a> {{ article?.title }}</a>
         </div>
       </div>
-      <n-ellipsis class="describe" :tooltip="{ show: false }">
+      <div class="describe">
         {{ article.description }}
-      </n-ellipsis>
+      </div>
       <div class="post-info">
         <div class="text">
           <icon-calendar />
-          <span>{{ article.date }}</span>
+          <span>
+            <n-time :time="article.date" format="yyyy-MM-dd" />
+          </span>
         </div>
         <div class="text">
           <icon-words />
@@ -200,7 +202,8 @@ watch(currentPage, () => {
   font-weight: 500;
   margin: 0.1rem 0;
 }
-:deep(.n-ellipsis) {
+
+.describe {
   font-size: 0.9375rem;
   overflow: hidden;
   color: var(--vp-c-text-2);
@@ -249,13 +252,5 @@ watch(currentPage, () => {
     overflow: hidden;
     width: 17rem;
   }
-  .describe {
-    font-size: 0.9375rem;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    line-clamp: 3;
-    overflow: hidden;
-    margin: 0.5rem 0 1rem;
-  }
 }
 </style>

packages/theme/src/datas/articles.data.ts

@@ -1,50 +1,34 @@
 import matter from 'gray-matter';
 import { readingTime } from 'reading-time-estimator';
 import { NOT_ARTICLE_LAYOUTS } from '../constants';
+import { getTextDescription } from '../utils/common';
 import { createArticlesListLoader } from '../utils/node/articles';
-import { formatDate } from '../utils/node/date';
 
-function getTextDescription(text: string, count = 100) {
-  const finalText = text
-    // 首个标题
-    ?.replace(/^(#+)(.*)/m, '')
-    // 除去标题
-    ?.replace(/#/g, '')
-    // 除去图片
-    ?.replace(/!\[.*?\]\(.*?\)/g, '')
-    // 除去链接
-    ?.replace(/\[(.*?)\]\(.*?\)/g, '$1')
-    // 除去加粗
-    ?.replace(/\*\*(.*?)\*\*/g, '$1')
-    ?.split('\n')
-    ?.filter(v => !!v)
-    ?.join('\n')
-    ?.replace(/>(.*)/, '')
-    ?.replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    ?.trim()
-    ?.slice(0, count);
-
-  return `${finalText}...`;
+export interface ArticlesData {
+  title: string
+  path: string
+  description: string
+  date: number
+  tags: string[]
+  words: number
+  minutes: number
+  category: string
 }
 
 export default createArticlesListLoader({
   includeSrc: true,
   render: true,
   excerpt: true,
   transform(rawData) {
-    const data = rawData.filter(item => !NOT_ARTICLE_LAYOUTS.includes(item.frontmatter.layout)).map(item => {
+    const data = rawData.filter(item => !NOT_ARTICLE_LAYOUTS.includes(item.frontmatter.layout)).sort((a, b) => b.frontmatter.date - a.frontmatter.date).map(item => {
       const content = matter(item.src || '').content;
       const { words, minutes } = readingTime(content, 200);
       const match = content.match(/^(#+)\s+(.+)/m);
       const title = match?.[2] || '';
-      const description = getTextDescription(content);
-      let { date, ...frontmatter } = item.frontmatter;
-      if (date) {
-        date = formatDate(item.frontmatter.date);
-      }
-      else {
-        date = item.fileModifiedTime; // 文件最后修改时间(兜底)
+      let { date, description = content, ...frontmatter } = item.frontmatter;
+
+      if (description?.length > 100) {
+        description = getTextDescription(description);
       }
       return {
         path: item.url,
@@ -60,15 +44,5 @@ export default createArticlesListLoader({
   }
 });
 
-export interface ArticlesData {
-  title: string
-  path: string
-  description: string
-  date: string
-  tags: string[]
-  words: number
-  minutes: number
-  category: string
-}
 declare const data: ArticlesData[];
 export { data };

packages/theme/src/utils/common.ts

@@ -0,0 +1,25 @@
+export function getTextDescription(text: string, count = 100) {
+  if (!text)
+    return;
+  const finalText = text
+    // 首个标题
+    ?.replace(/^(#+)(.*)/m, '')
+    // 除去标题
+    ?.replace(/#/g, '')
+    // 除去图片
+    ?.replace(/!\[.*?\]\(.*?\)/g, '')
+    // 除去链接
+    ?.replace(/\[(.*?)\]\(.*?\)/g, '$1')
+    // 除去加粗
+    ?.replace(/\*\*(.*?)\*\*/g, '$1')
+    ?.split('\n')
+    ?.filter(v => !!v)
+    ?.join('\n')
+    ?.replace(/>(.*)/, '')
+    ?.replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    ?.trim()
+    ?.slice(0, count);
+
+  return `${finalText}...`;
+}

packages/theme/src/utils/node/articles.ts

@@ -3,7 +3,7 @@ import fs from 'fs-extra';
 import matter from 'gray-matter';
 import { glob, type GlobOptions } from 'tinyglobby';
 import { createMarkdownRenderer, type SiteConfig } from 'vitepress';
-import { formatDate } from './date';
+import { dateToUnixTimestamp } from './date';
 import { getPattern, normalizePath } from './path';
 
 export interface ContentData {
@@ -12,7 +12,7 @@ export interface ContentData {
   html: string | undefined
   frontmatter: Record<string, any>
   excerpt: string | undefined
-  fileModifiedTime: string
+  // fileModifiedTime: number
 }
 export interface ContentOptions<T = ContentData[]> {
   /**
@@ -127,21 +127,27 @@ export function createArticlesListLoader<T = ContentData[]>(
               ? { excerpt_separator: renderExcerpt as any }
               : { excerpt: renderExcerpt as any }
           );
-          // const lastEditTime = await getLastCommitDate(file);
+
+          if (frontmatter.date) {
+            frontmatter.date = dateToUnixTimestamp(frontmatter.date);
+          }
+          else {
+            frontmatter.date = timestamp;
+          }
           const url
             = `/${
               normalizePath(path.relative(config.srcDir, file))
                 .replace(/(^|\/)index\.md$/, '$1')
                 .replace(/\.md$/, config.cleanUrls ? '' : '.html')}`;
           // eslint-disable-next-line no-undefined
           const html = render ? md.render(src) : undefined;
-          const fileModifiedTime = formatDate(timestamp);
+          // const fileModifiedTime = timestamp;
           const renderedExcerpt = renderExcerpt
             ? excerpt && md.render(excerpt)
             // eslint-disable-next-line no-undefined
             : undefined;
           const data: ContentData = {
-            fileModifiedTime,
+            // fileModifiedTime,
             // eslint-disable-next-line no-undefined
             src: includeSrc ? src : undefined,
             html,

packages/theme/src/utils/node/date.ts

@@ -20,3 +20,11 @@ export function formatDate(date: number | Date | string) {
   // 返回格式化后的日期字符串
   return `${year}-${month}-${day}`;
 }
+
+export function dateToUnixTimestamp(date: Date) {
+  // 检查输入是否为 Date 对象
+  if (!(date instanceof Date)) {
+    throw new TypeError('Input must be a Date object');
+  }
+  return new Date(date.toLocaleString('en-US', { timeZone: 'UTC' })).getTime();
+}