@jet-w/astro-blog 0.2.0 → 0.2.2

package/src/pages/categories/index.astro

@@ -1,9 +1,22 @@
 ---
 import { getCollection } from 'astro:content';
 import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { getLocaleFromPath, getLocaleConfig, getLocalePrefix, filterPostsByLocale } from '../../utils/i18n';
+
+// Get i18n config
+const i18nConfig = virtualI18nConfig || defaultI18nConfig;
+const currentLocale = getLocaleFromPath(Astro.url.pathname, i18nConfig);
+const localeConfig = getLocaleConfig(currentLocale, i18nConfig);
+const ui = localeConfig.ui;
+const localePrefix = getLocalePrefix(currentLocale, i18nConfig);
 
 // 从文章集合动态获取所有分类
-const allPosts = await getCollection('posts', ({ data }) => !data.draft);
+const allPostsCollection = await getCollection('posts', ({ data }) => !data.draft);
+
+// Filter posts by current locale
+const allPosts = filterPostsByLocale(allPostsCollection, currentLocale, i18nConfig);
 
 // 统计分类
 const categoryMap = new Map<string, { name: string; count: number }>();
@@ -55,24 +68,34 @@ const getCategoryIcon = (slug: string) => {
 ---
 
 <PageLayout
-  title="分类"
-  description="按分类浏览文章"
+  title={ui.allCategories}
+  description={ui.filterByCategory}
   showSidebar={true}
+  i18nConfig={i18nConfig}
 >
+  <!-- 面包屑导航 -->
+  <nav class="flex items-center space-x-2 text-sm text-slate-600 dark:text-slate-400 mb-8">
+    <a href={`${localePrefix}/`} class="hover:text-primary-500 transition-colors">{ui.home}</a>
+    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+    </svg>
+    <span class="text-slate-900 dark:text-slate-100">{ui.allCategories}</span>
+  </nav>
+
   <!-- 页面头部 -->
   <div class="text-center mb-12">
     <h1 class="text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4">
-      文章分类
+      {ui.allCategories}
     </h1>
     <p class="text-xl text-slate-600 dark:text-slate-400 mb-8">
-      按主题分类浏览所有文章
+      {ui.filterByCategory}
     </p>
 
     <!-- 统计信息 -->
     <div class="inline-flex items-center space-x-6 text-sm text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-800 px-6 py-3 rounded-lg">
-      <span>共 {allCategories.length} 个分类</span>
+      <span>{allCategories.length} {ui.categories}</span>
       <span>•</span>
-      <span>{totalPosts} 篇文章</span>
+      <span>{totalPosts} {ui.posts}</span>
     </div>
   </div>
 
@@ -80,7 +103,7 @@ const getCategoryIcon = (slug: string) => {
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
     {sortedCategories.map((category) => (
       <a
-        href={`/categories/${category.slug}`}
+        href={`${localePrefix}/categories/${category.slug}`}
         class="group card hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 h-full"
       >
         <div class="flex flex-col h-full">
@@ -99,7 +122,7 @@ const getCategoryIcon = (slug: string) => {
                 <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                 </svg>
-                <span>{category.count} 篇文章</span>
+                <span>{category.count} {ui.posts}</span>
               </div>
             </div>
           </div>
@@ -127,12 +150,12 @@ const getCategoryIcon = (slug: string) => {
   {sortedCategories.length > 4 && (
     <section class="mb-16">
       <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
-        热门分类
+        {ui.categories}
       </h2>
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         {sortedCategories.slice(0, 4).map((category) => (
           <a
-            href={`/categories/${category.slug}`}
+            href={`${localePrefix}/categories/${category.slug}`}
             class="group p-6 bg-gradient-to-br from-primary-50 to-secondary-50 dark:from-primary-900/20 dark:to-secondary-900/20 rounded-xl border border-primary-200 dark:border-primary-800 hover:shadow-lg transition-all duration-300"
           >
             <div class="text-center">
@@ -152,12 +175,12 @@ const getCategoryIcon = (slug: string) => {
   <!-- 分类列表 -->
   <section>
     <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
-      所有分类
+      {ui.allCategories}
     </h2>
     <div class="space-y-3">
       {sortedCategories.map((category) => (
         <a
-          href={`/categories/${category.slug}`}
+          href={`${localePrefix}/categories/${category.slug}`}
           class="flex items-center justify-between p-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:shadow-md hover:border-primary-300 dark:hover:border-primary-600 transition-all duration-200 group"
         >
           <div class="flex items-center space-x-4">
@@ -177,7 +200,7 @@ const getCategoryIcon = (slug: string) => {
           </div>
           <div class="flex items-center space-x-3">
             <span class="text-sm px-3 py-1 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 rounded-full">
-              {category.count} 篇
+              {category.count}
             </span>
             <svg class="w-5 h-5 text-slate-400 group-hover:text-primary-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />

package/src/pages/posts/[...slug].astro

@@ -3,10 +3,26 @@ import { getCollection, type CollectionEntry, render } from 'astro:content';
 import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
 import SlidesLayout from '@jet-w/astro-blog/layouts/SlidesLayout.astro';
 import FloatingToc from '@jet-w/astro-blog/components/blog/FloatingToc.vue';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { getLocaleFromPath, getLocaleConfig, getLocalePrefix } from '../../utils/i18n';
 
 export async function getStaticPaths() {
   const posts = await getCollection('posts');
 
+  // Build folder title map from README files (inline function)
+  const folderTitles: Record<string, string> = {};
+  posts.forEach(post => {
+    const pathParts = post.id.split('/');
+    const fileName = pathParts[pathParts.length - 1].toLowerCase();
+    if (fileName === 'readme' || fileName === 'readme.md' || fileName === 'readme.mdx') {
+      const folderPath = pathParts.slice(0, -1).join('/').toLowerCase();
+      if (folderPath && post.data.title) {
+        folderTitles[folderPath] = post.data.title;
+      }
+    }
+  });
+
   // 按文件名称排序，readme.md 排在每个文件夹的最前面
   const sortedPosts = posts.sort((a, b) => {
     // 获取文件夹路径和文件名
@@ -50,6 +66,7 @@ export async function getStaticPaths() {
       prevPost: CollectionEntry<'posts'> | null;
       nextPost: CollectionEntry<'posts'> | null;
       isDirectory: boolean;
+      folderTitles: Record<string, string>;
     };
   };
 
@@ -61,6 +78,7 @@ export async function getStaticPaths() {
       prevPost: index > 0 ? sortedPosts[index - 1] : null,
       nextPost: index < sortedPosts.length - 1 ? sortedPosts[index + 1] : null,
       isDirectory: false,
+      folderTitles,
     },
   }));
 
@@ -83,6 +101,7 @@ export async function getStaticPaths() {
           prevPost: null,
           nextPost: null,
           isDirectory: true,
+          folderTitles,
         },
       });
     }
@@ -96,11 +115,59 @@ type Props = {
   prevPost: CollectionEntry<'posts'> | null;
   nextPost: CollectionEntry<'posts'> | null;
   isDirectory?: boolean;
+  folderTitles: Record<string, string>;
 };
 
-const { post, prevPost, nextPost, isDirectory } = Astro.props;
+// Build breadcrumb items for a post
+function buildBreadcrumbItems(
+  postId: string,
+  postTitle: string,
+  folderTitles: Record<string, string>
+): Array<{ title: string; path: string; isLast: boolean }> {
+  const parts = postId.toLowerCase().split('/');
+  const items: Array<{ title: string; path: string; isLast: boolean }> = [];
+  let currentPath = '';
+
+  // Build breadcrumb for each folder level
+  for (let i = 0; i < parts.length - 1; i++) {
+    currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i];
+    const title = folderTitles[currentPath] || parts[i];
+    items.push({ title, path: currentPath, isLast: false });
+  }
+
+  // Add the current post/file
+  const fileName = parts[parts.length - 1];
+  const isReadme = fileName === 'readme' || fileName === 'readme.md' || fileName === 'readme.mdx';
+
+  if (!isReadme) {
+    items.push({ title: postTitle, path: postId.toLowerCase(), isLast: true });
+  } else if (items.length > 0) {
+    items[items.length - 1].isLast = true;
+  }
+
+  return items;
+}
+
+const { post, prevPost, nextPost, isDirectory, folderTitles } = Astro.props;
 const Content = post ? (await render(post)).Content : null;
 
+// Get i18n config
+const i18nConfig = virtualI18nConfig || defaultI18nConfig;
+const currentLocale = getLocaleFromPath(Astro.url.pathname, i18nConfig);
+const localeConfig = getLocaleConfig(currentLocale, i18nConfig);
+const ui = localeConfig.ui;
+const localePrefix = getLocalePrefix(currentLocale, i18nConfig);
+
+// Get the current slug from URL
+const urlPath = Astro.url.pathname;
+const postsMatch = urlPath.match(/\/posts\/(.+?)\/?$/);
+const currentSlug = postsMatch ? postsMatch[1] : '';
+
+// Build breadcrumb items
+const breadcrumbItems = post
+  ? buildBreadcrumbItems(post.id, post.data.title, folderTitles)
+  : buildBreadcrumbItems(currentSlug, ui.documentTree, folderTitles);
+
 // 判断是否使用 slides 布局
 const isSlides = post?.data.layout === 'slides';
 
@@ -157,9 +224,31 @@ const formatDate = (date: Date) => {
   title={post.data.title}
   description={post.data.description}
   showSidebar={true}
+  i18nConfig={i18nConfig}
 >
+  <!-- 面包屑导航 -->
+  <nav class="flex items-center flex-wrap gap-y-1 text-sm text-slate-600 dark:text-slate-400 mb-8">
+    <a href={`${localePrefix}/`} class="hover:text-primary-500 transition-colors">{ui.home}</a>
+    {breadcrumbItems.map((item) => (
+      <>
+        <svg class="w-4 h-4 mx-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+        {item.isLast ? (
+          <span class="text-slate-900 dark:text-slate-100 truncate max-w-xs">{item.title}</span>
+        ) : (
+          <a href={`${localePrefix}/posts/${item.path}`} class="hover:text-primary-500 transition-colors">{item.title}</a>
+        )}
+      </>
+    ))}
+  </nav>
+
   <!-- 浮动目录 -->
-  <FloatingToc client:load />
+  <FloatingToc
+    client:load
+    tocTitle={ui.tableOfContents}
+    progressTitle={ui.readingProgress}
+  />
 
   <!-- 文章头部 -->
   <article class="prose prose-slate dark:prose-invert max-w-none">
@@ -198,7 +287,7 @@ const formatDate = (date: Date) => {
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
-            <span>约 {readingTime} 分钟阅读</span>
+            <span>{readingTime} {ui.minuteRead}</span>
           </div>
         </div>
 
@@ -207,7 +296,7 @@ const formatDate = (date: Date) => {
           <div class="flex flex-wrap justify-center gap-2 mt-6">
             {post.data.tags.map((tag) => (
               <a
-                href={`/tags/${tag}`}
+                href={`${localePrefix}/tags/${tag.toLowerCase().replace(/\s+/g, '-')}`}
                 class="px-3 py-1 text-xs font-medium bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full hover:bg-primary-200 dark:hover:bg-primary-900/50 transition-colors"
               >
                 #{tag}
@@ -241,12 +330,12 @@ const formatDate = (date: Date) => {
       {post.data.categories && post.data.categories.length > 0 && (
         <div class="mb-8">
           <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">
-            分类
+            {ui.categories}
           </h3>
           <div class="flex flex-wrap gap-2">
             {post.data.categories.map((category) => (
               <a
-                href={`/categories/${category}`}
+                href={`${localePrefix}/categories/${category.toLowerCase().replace(/\s+/g, '-')}`}
                 class="px-4 py-2 text-sm font-medium bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
               >
                 {category}
@@ -270,10 +359,10 @@ const formatDate = (date: Date) => {
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
       <!-- 上一篇 -->
       <div class="text-center md:text-left">
-        <div class="text-sm text-slate-500 dark:text-slate-400 mb-2">上一篇</div>
+        <div class="text-sm text-slate-500 dark:text-slate-400 mb-2">{ui.previousPost}</div>
         {prevPost ? (
           <a
-            href={`/posts/${prevPost.id.toLowerCase()}`}
+            href={`${localePrefix}/posts/${prevPost.id.toLowerCase()}`}
             class="group inline-flex items-center text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-colors"
           >
             <svg class="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -282,16 +371,16 @@ const formatDate = (date: Date) => {
             <span class="line-clamp-1">{prevPost.data.title}</span>
           </a>
         ) : (
-          <span class="text-slate-400 dark:text-slate-600">已经是第一篇了</span>
+          <span class="text-slate-400 dark:text-slate-600">-</span>
         )}
       </div>
 
       <!-- 下一篇 -->
       <div class="text-center md:text-right">
-        <div class="text-sm text-slate-500 dark:text-slate-400 mb-2">下一篇</div>
+        <div class="text-sm text-slate-500 dark:text-slate-400 mb-2">{ui.nextPost}</div>
         {nextPost ? (
           <a
-            href={`/posts/${nextPost.id.toLowerCase()}`}
+            href={`${localePrefix}/posts/${nextPost.id.toLowerCase()}`}
             class="group inline-flex items-center justify-end text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-colors"
           >
             <span class="line-clamp-1">{nextPost.data.title}</span>
@@ -300,7 +389,7 @@ const formatDate = (date: Date) => {
             </svg>
           </a>
         ) : (
-          <span class="text-slate-400 dark:text-slate-600">已经是最后一篇了</span>
+          <span class="text-slate-400 dark:text-slate-600">-</span>
         )}
       </div>
     </div>
@@ -308,10 +397,28 @@ const formatDate = (date: Date) => {
 </PageLayout>
 ) : (
 <PageLayout
-  title="目录"
-  description="此目录暂无内容"
+  title={ui.documentTree}
+  description={ui.noPostsFound}
   showSidebar={true}
+  i18nConfig={i18nConfig}
 >
+  <!-- 面包屑导航 -->
+  <nav class="flex items-center flex-wrap gap-y-1 text-sm text-slate-600 dark:text-slate-400 mb-8">
+    <a href={`${localePrefix}/`} class="hover:text-primary-500 transition-colors">{ui.home}</a>
+    {breadcrumbItems.map((item) => (
+      <>
+        <svg class="w-4 h-4 mx-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+        {item.isLast ? (
+          <span class="text-slate-900 dark:text-slate-100 truncate max-w-xs">{item.title}</span>
+        ) : (
+          <a href={`${localePrefix}/posts/${item.path}`} class="hover:text-primary-500 transition-colors">{item.title}</a>
+        )}
+      </>
+    ))}
+  </nav>
+
   <div class="text-center py-16">
     <div class="inline-flex items-center justify-center w-20 h-20 bg-slate-100 dark:bg-slate-800 rounded-full mb-6">
       <svg class="w-10 h-10 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -319,16 +426,16 @@ const formatDate = (date: Date) => {
       </svg>
     </div>
     <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-4">
-      此目录暂无内容
+      {ui.noPostsFound}
     </h1>
     <p class="text-slate-600 dark:text-slate-400 mb-8">
-      该目录下暂无 README 文件
+      {ui.noPostsFound}
     </p>
-    <a href="/posts" class="inline-flex items-center px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors">
+    <a href={`${localePrefix}/posts`} class="inline-flex items-center px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors">
       <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
       </svg>
-      返回文章列表
+      {ui.postList}
     </a>
   </div>
 </PageLayout>

package/src/pages/posts/index.astro

@@ -4,10 +4,24 @@ import PostCard from '@jet-w/astro-blog/components/blog/PostCard.astro';
 import Pagination from '@jet-w/astro-blog/components/ui/Pagination.astro';
 import NavigationTabs from '@jet-w/astro-blog/components/blog/NavigationTabs.vue';
 import { getCollection } from 'astro:content';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { getLocaleFromPath, getLocaleConfig, getLocalePrefix, filterPostsByLocale } from '../../utils/i18n';
+
+// Get i18n config
+const i18nConfig = virtualI18nConfig || defaultI18nConfig;
+const currentLocale = getLocaleFromPath(Astro.url.pathname, i18nConfig);
+const localeConfig = getLocaleConfig(currentLocale, i18nConfig);
+const ui = localeConfig.ui;
+const localePrefix = getLocalePrefix(currentLocale, i18nConfig);
 
 // 从新的内容目录获取文章数据
 const allPostsCollection = await getCollection('posts');
-const publishedPosts = allPostsCollection
+
+// Filter posts by current locale
+const localeFilteredPosts = filterPostsByLocale(allPostsCollection, currentLocale, i18nConfig);
+
+const publishedPosts = localeFilteredPosts
   .filter(post => !post.data.draft)
   .sort((a, b) => (b.data.pubDate?.getTime() ?? 0) - (a.data.pubDate?.getTime() ?? 0));
 
@@ -170,9 +184,9 @@ const allTags = [...new Set(allPosts.flatMap(post => post.tags || []))];
 const allCategories = [...new Set(allPosts.flatMap(post => post.categories || []))];
 
 // 格式化日期
-const formatDate = (date?: Date) => {
+const formatDateLocal = (date?: Date) => {
   if (!date) return '';
-  return new Intl.DateTimeFormat('zh-CN', {
+  return new Intl.DateTimeFormat(localeConfig.locale.dateLocale, {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit'
@@ -181,27 +195,37 @@ const formatDate = (date?: Date) => {
 ---
 
 <PageLayout
-  title="文章列表"
-  description="浏览所有技术文章和分享内容"
+  title={ui.postList}
+  description={localeConfig.site.description}
   showSidebar={true}
+  i18nConfig={i18nConfig}
 >
+  <!-- 面包屑导航 -->
+  <nav class="flex items-center space-x-2 text-sm text-slate-600 dark:text-slate-400 mb-8">
+    <a href={`${localePrefix}/`} class="hover:text-primary-500 transition-colors">{ui.home}</a>
+    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+    </svg>
+    <span class="text-slate-900 dark:text-slate-100">{ui.postList}</span>
+  </nav>
+
   <!-- 页面头部 -->
   <div class="mb-12">
     <div class="text-center">
       <h1 class="text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4">
-        文章列表
+        {ui.postList}
       </h1>
       <p class="text-xl text-slate-600 dark:text-slate-400 mb-8">
-        分享技术思考和学习心得
+        {localeConfig.site.description}
       </p>
 
       <!-- 统计信息 -->
       <div class="inline-flex items-center space-x-6 text-sm text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-800 px-6 py-3 rounded-lg">
-        <span>共 {totalPosts} 篇文章</span>
+        <span>{totalPosts} {ui.posts}</span>
         <span>•</span>
-        <span>{allTags.length} 个标签</span>
+        <span>{allTags.length} {ui.tags}</span>
         <span>•</span>
-        <span>{allCategories.length} 个分类</span>
+        <span>{allCategories.length} {ui.categories}</span>
       </div>
     </div>
   </div>
@@ -223,20 +247,20 @@ const formatDate = (date?: Date) => {
       <!-- 按标签筛选 -->
       <div>
         <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-3">
-          按标签筛选
+          {ui.filterByTag}
         </h3>
         <div class="flex flex-wrap gap-2">
-          <a href="/tags" class="px-3 py-1 text-xs rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 hover:bg-primary-200 dark:hover:bg-primary-900/50 transition-colors">
-            全部标签
+          <a href={`${localePrefix}/tags`} class="px-3 py-1 text-xs rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 hover:bg-primary-200 dark:hover:bg-primary-900/50 transition-colors">
+            {ui.allTags}
           </a>
           {allTags.slice(0, 10).map((tag) => (
-            <a href={`/tags/${tag.toLowerCase().replace(/\s+/g, '-')}`} class="px-3 py-1 text-xs rounded-full bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
+            <a href={`${localePrefix}/tags/${tag.toLowerCase().replace(/\s+/g, '-')}`} class="px-3 py-1 text-xs rounded-full bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
               {tag}
             </a>
           ))}
           {allTags.length > 10 && (
-            <a href="/tags" class="px-3 py-1 text-xs rounded-full bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
-              +{allTags.length - 10} 更多
+            <a href={`${localePrefix}/tags`} class="px-3 py-1 text-xs rounded-full bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
+              +{allTags.length - 10}
             </a>
           )}
         </div>
@@ -245,20 +269,20 @@ const formatDate = (date?: Date) => {
       <!-- 按分类筛选 -->
       <div>
         <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-3">
-          按分类筛选
+          {ui.filterByCategory}
         </h3>
         <div class="flex flex-wrap gap-2">
-          <a href="/categories" class="px-3 py-1 text-xs rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 hover:bg-primary-200 dark:hover:bg-primary-900/50 transition-colors">
-            全部分类
+          <a href={`${localePrefix}/categories`} class="px-3 py-1 text-xs rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 hover:bg-primary-200 dark:hover:bg-primary-900/50 transition-colors">
+            {ui.allCategories}
           </a>
           {allCategories.slice(0, 8).map((category) => (
-            <a href={`/categories/${category.toLowerCase().replace(/\s+/g, '-')}`} class="px-3 py-1 text-xs rounded-full bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
+            <a href={`${localePrefix}/categories/${category.toLowerCase().replace(/\s+/g, '-')}`} class="px-3 py-1 text-xs rounded-full bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
               {category}
             </a>
           ))}
           {allCategories.length > 8 && (
-            <a href="/categories" class="px-3 py-1 text-xs rounded-full bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
-              +{allCategories.length - 8} 更多
+            <a href={`${localePrefix}/categories`} class="px-3 py-1 text-xs rounded-full bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
+              +{allCategories.length - 8}
             </a>
           )}
         </div>
@@ -295,21 +319,19 @@ const formatDate = (date?: Date) => {
     <!-- 卡片模式 -->
     <div id="card-view" class="view-container">
     {posts.length > 0 ? (
-      <div class="flex flex-wrap gap-6 mb-12">
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12">
         {posts.map((post) => (
-          <div class="flex-shrink-0">
-            <PostCard post={post} layout="horizontal" />
-          </div>
+          <PostCard post={post} layout="horizontal" localePrefix={localePrefix} locale={localeConfig.locale.dateLocale} ui={ui} />
         ))}
       </div>
     ) : (
       <div class="text-center py-16">
         <div class="text-6xl mb-4">📝</div>
         <h3 class="text-xl font-semibold text-slate-900 dark:text-slate-100 mb-2">
-          暂无文章
+          {ui.noPostsFound}
         </h3>
         <p class="text-slate-600 dark:text-slate-400">
-          目前还没有发布任何文章，请稍后再来查看。
+          {ui.noPostsFound}
         </p>
       </div>
     )}
@@ -352,7 +374,7 @@ const formatDate = (date?: Date) => {
                             <div class="folder-children hidden">
                               {child.children.map((grandChild) => (
                                 <a
-                                  href={`/posts/${grandChild.slug}`}
+                                  href={`${localePrefix}/posts/${grandChild.slug}`}
                                   class="ml-12 flex items-start gap-4 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors border-b border-slate-100 dark:border-slate-700 group"
                                 >
                                   <svg class="w-4 h-4 text-slate-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -365,7 +387,7 @@ const formatDate = (date?: Date) => {
                                     )}
                                   </div>
                                   {grandChild.pubDate && (
-                                    <time class="text-xs text-slate-400 flex-shrink-0">{formatDate(grandChild.pubDate)}</time>
+                                    <time class="text-xs text-slate-400 flex-shrink-0">{formatDateLocal(grandChild.pubDate)}</time>
                                   )}
                                 </a>
                               ))}
@@ -373,7 +395,7 @@ const formatDate = (date?: Date) => {
                           </div>
                         ) : (
                           <a
-                            href={`/posts/${child.slug}`}
+                            href={`${localePrefix}/posts/${child.slug}`}
                             class="ml-6 flex items-start gap-4 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors border-b border-slate-100 dark:border-slate-700 group"
                           >
                             <svg class="w-4 h-4 text-slate-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -386,7 +408,7 @@ const formatDate = (date?: Date) => {
                               )}
                             </div>
                             {child.pubDate && (
-                              <time class="text-xs text-slate-400 flex-shrink-0">{formatDate(child.pubDate)}</time>
+                              <time class="text-xs text-slate-400 flex-shrink-0">{formatDateLocal(child.pubDate)}</time>
                             )}
                           </a>
                         )}
@@ -396,7 +418,7 @@ const formatDate = (date?: Date) => {
                 </div>
               ) : (
                 <a
-                  href={`/posts/${node.slug}`}
+                  href={`${localePrefix}/posts/${node.slug}`}
                   class="flex items-start gap-4 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors border-b border-slate-100 dark:border-slate-700 group"
                 >
                   <svg class="w-4 h-4 text-slate-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -409,7 +431,7 @@ const formatDate = (date?: Date) => {
                     )}
                   </div>
                   {node.pubDate && (
-                    <time class="text-xs text-slate-400 flex-shrink-0">{formatDate(node.pubDate)}</time>
+                    <time class="text-xs text-slate-400 flex-shrink-0">{formatDateLocal(node.pubDate)}</time>
                   )}
                 </a>
               )}
@@ -421,10 +443,10 @@ const formatDate = (date?: Date) => {
       <div class="text-center py-16">
         <div class="text-6xl mb-4">📝</div>
         <h3 class="text-xl font-semibold text-slate-900 dark:text-slate-100 mb-2">
-          暂无文章
+          {ui.noPostsFound}
         </h3>
         <p class="text-slate-600 dark:text-slate-400">
-          目前还没有发布任何文章，请稍后再来查看。
+          {ui.noPostsFound}
         </p>
       </div>
     )}
@@ -437,7 +459,7 @@ const formatDate = (date?: Date) => {
       <Pagination
         currentPage={currentPage}
         totalPages={totalPages}
-        baseUrl="/posts"
+        baseUrl={`${localePrefix}/posts`}
       />
     )}
   </div>