refactor: refactor article list component and routing logic, optimize multilingual article display

src/components/PostList.astro

@@ -0,0 +1,70 @@
+---
+// Define props received by the component
+interface Post {
+  data: {
+    title: string
+    abbrlink?: string
+    published: Date
+    lang?: string
+  }
+  slug?: string
+  remarkPluginFrontmatter?: {
+    minutes?: number
+  }
+}
+
+// Receive posts parameter passed from outside
+const { posts, lang: pageLang } = Astro.props
+
+// Declare the type of props
+export interface Props {
+  posts: Post[]
+  lang?: string
+}
+
+// 构建正确的链接路径
+function getPostUrl(post: Post) {
+  const postPath = post.data.abbrlink || post.slug
+  // 如果是在语言文件夹下的页面，添加语言前缀
+  return pageLang ? `/${pageLang}/posts/${postPath}/` : `/posts/${postPath}/`
+}
+---
+<ul>
+  {posts.map(post => (
+    // Single Post
+    <li class="mt-4.375">
+
+      <a
+        class="hover:c-primary"
+        href={getPostUrl(post)}
+        transition:name={`post-${post.data.abbrlink || post.slug}`}
+        data-disable-transition-on-theme
+      >
+        {post.data.title}
+      </a>
+
+      <div
+        class="uno-mobile-time"
+        transition:name={`time-${post.data.abbrlink || post.slug}`}
+        data-disable-transition-on-theme
+      >
+        <time>
+          {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
+        </time>
+        <span class="ml-1.25">
+          {post.remarkPluginFrontmatter?.minutes} min
+        </span>
+      </div>
+
+      <div class="uno-desktop-time">
+        <time>
+          {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
+        </time>
+        <span class="ml-1.25">
+          {post.remarkPluginFrontmatter?.minutes} min
+        </span>
+      </div>
+
+    </li>
+  ))}
+</ul>