@jet-w/astro-blog 0.2.0 → 0.2.2

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

@@ -3,6 +3,9 @@ import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
 import PostCard from '@jet-w/astro-blog/components/blog/PostCard.astro';
 import Pagination from '@jet-w/astro-blog/components/ui/Pagination.astro';
 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';
 
 export async function getStaticPaths() {
   const allPostsCollection = await getCollection('posts');
@@ -20,9 +23,20 @@ export async function getStaticPaths() {
 const { page } = Astro.params;
 const currentPage = parseInt(page as string, 10);
 
+// 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));
 
@@ -52,27 +66,41 @@ const allCategories = [...new Set(allPosts.flatMap(post => post.categories || []
 ---
 
 <PageLayout
-  title={`文章列表 - 第 ${currentPage} 页`}
-  description="浏览所有技术文章和分享内容"
+  title={`${ui.postList} - ${ui.page} ${currentPage}`}
+  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>
+    <a href={`${localePrefix}/posts`} class="hover:text-primary-500 transition-colors">{ui.postList}</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.page} {currentPage}</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>
@@ -83,34 +111,44 @@ const allCategories = [...new Set(allPosts.flatMap(post => post.categories || []
       <!-- 按标签筛选 -->
       <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">
-          <button 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">
-            全部
-          </button>
-          {allTags.map((tag) => (
-            <button 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`} 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={`${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}
-            </button>
+            </a>
           ))}
+          {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>
       </div>
 
       <!-- 按分类筛选 -->
       <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">
-          <button 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">
-            全部
-          </button>
-          {allCategories.map((category) => (
-            <button 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`} 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={`${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}
-            </button>
+            </a>
           ))}
+          {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>
       </div>
     </div>
@@ -118,19 +156,19 @@ const allCategories = [...new Set(allPosts.flatMap(post => post.categories || []
 
   <!-- 文章列表 -->
   {posts.length > 0 ? (
-    <div class="space-y-8 mb-12">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12">
       {posts.map((post) => (
-        <PostCard post={post} layout="horizontal" />
+        <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>
   )}
@@ -140,7 +178,7 @@ const allCategories = [...new Set(allPosts.flatMap(post => post.categories || []
     <Pagination
       currentPage={currentPage}
       totalPages={totalPages}
-      baseUrl="/posts"
+      baseUrl={`${localePrefix}/posts`}
     />
   )}
 </PageLayout>

package/src/pages/search.astro

@@ -1,47 +1,83 @@
 ---
 import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
 import SearchInterface from '@jet-w/astro-blog/components/ui/SearchInterface.vue';
+import type { I18nConfig } from '../config/i18n';
+import { defaultI18nConfig } from '../config/i18n';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
+import { getLocaleFromPath, getLocaleConfig } from '../utils/i18n';
+
+export interface Props {
+  i18nConfig?: I18nConfig;
+}
+
+const { i18nConfig = virtualI18nConfig || defaultI18nConfig } = Astro.props;
+
+// Get current locale from URL
+const currentLocale = getLocaleFromPath(Astro.url.pathname, i18nConfig);
+const localeConfig = getLocaleConfig(currentLocale, i18nConfig);
+const ui = localeConfig.ui;
+
+// Get date locale for formatting
+const locale = i18nConfig.locales.find(l => l.code === currentLocale);
+const dateLocale = locale?.dateLocale || 'zh-CN';
 ---
 
 <PageLayout
-  title="搜索"
-  description="搜索博客文章和内容"
+  title={ui.search}
+  description={ui.searchInAllArticles}
   showSidebar={true}
 >
   <div class="max-w-4xl mx-auto">
     <!-- 页面头部 -->
     <div class="text-center mb-12">
       <h1 class="text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4">
-        搜索文章
+        {ui.searchArticles}
       </h1>
       <p class="text-xl text-slate-600 dark:text-slate-400">
-        在所有文章中查找您感兴趣的内容
+        {ui.searchInAllArticles}
       </p>
     </div>
 
     <!-- 搜索界面 -->
-    <SearchInterface client:load />
+    <SearchInterface
+      client:load
+      placeholder={ui.searchPlaceholder}
+      noResults={ui.noResults}
+      tags={ui.tags}
+      categories={ui.categories}
+      sortLabel={ui.sortBy}
+      relevance={ui.sortByDate}
+      publishTime={ui.publishedOn}
+      titleLabel={ui.sortByTitle}
+      all={ui.allPosts}
+      searching={ui.searching}
+      noResultsTitle={ui.noResults}
+      clearSearch={ui.clearFilter}
+      previousPage={ui.previousPage}
+      nextPage={ui.nextPage}
+      dateLocale={dateLocale}
+    />
 
     <!-- 搜索提示 -->
     <div class="mt-12 p-6 bg-slate-50 dark:bg-slate-800 rounded-xl">
       <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">
-        搜索技巧
+        {ui.searchTips}
       </h2>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-slate-600 dark:text-slate-400">
         <div>
-          <h3 class="font-medium text-slate-900 dark:text-slate-100 mb-2">基础搜索</h3>
+          <h3 class="font-medium text-slate-900 dark:text-slate-100 mb-2">{ui.basicSearch}</h3>
           <ul class="space-y-1">
-            <li>• 输入关键词搜索标题和内容</li>
-            <li>• 支持中英文混合搜索</li>
-            <li>• 自动忽略大小写</li>
+            <li>• {ui.searchTipKeyword}</li>
+            <li>• {ui.searchTipMixedLang}</li>
+            <li>• {ui.searchTipCaseInsensitive}</li>
           </ul>
         </div>
         <div>
-          <h3 class="font-medium text-slate-900 dark:text-slate-100 mb-2">高级功能</h3>
+          <h3 class="font-medium text-slate-900 dark:text-slate-100 mb-2">{ui.advancedFeatures}</h3>
           <ul class="space-y-1">
-            <li>• 实时搜索建议</li>
-            <li>• 按标签和分类筛选</li>
-            <li>• 支持模糊匹配</li>
+            <li>• {ui.searchTipRealtime}</li>
+            <li>• {ui.searchTipFilter}</li>
+            <li>• {ui.searchTipFuzzy}</li>
           </ul>
         </div>
       </div>

package/src/pages/slides/index.astro

@@ -1,6 +1,16 @@
 ---
 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 } 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);
 
 // 获取所有非草稿的 slides
 const slides = (await getCollection('slides', ({ data }) => !data.draft))
@@ -20,28 +30,37 @@ function formatDate(date: Date | undefined): string {
 }
 ---
 
-<PageLayout title="幻灯片" description="演示文稿列表" showSidebar={false}>
+<PageLayout title={ui.slides} description={ui.slidesList} showSidebar={false} 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.slides}</span>
+  </nav>
+
   <div class="slides-list-page">
     <header class="mb-8">
       <h1 class="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-2">
-        <span class="mr-2">📽️</span>幻灯片
+        {ui.slides}
       </h1>
       <p class="text-slate-600 dark:text-slate-400">
-        基于 Reveal.js 的演示文稿，支持 Markdown 语法
+        {ui.slidesList}
       </p>
     </header>
 
     {slides.length === 0 ? (
       <div class="text-center py-16 text-slate-500 dark:text-slate-400">
         <div class="text-6xl mb-4">📭</div>
-        <p>暂无幻灯片</p>
-        <p class="text-sm mt-2">在 <code class="px-2 py-1 bg-slate-100 dark:bg-slate-800 rounded">content/slides/</code> 目录下创建 Markdown 文件即可开始</p>
+        <p>{ui.noPostsFound}</p>
+        <p class="text-sm mt-2">content/slides/</p>
       </div>
     ) : (
       <div class="grid gap-6 md:grid-cols-2">
         {slides.map((slide) => (
           <a
-            href={`/slides/${slide.id}`}
+            href={`${localePrefix}/slides/${slide.id}`}
             class="slide-card group block p-6 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 hover:border-primary-500 dark:hover:border-primary-500 transition-all hover:shadow-lg hover:-translate-y-1"
           >
             <div class="flex items-start justify-between mb-3">

package/src/pages/tags/[tag].astro

@@ -3,6 +3,9 @@ import { getCollection } from 'astro:content';
 import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
 import PostCard from '@jet-w/astro-blog/components/blog/PostCard.astro';
 import Pagination from '@jet-w/astro-blog/components/ui/Pagination.astro';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { getLocaleFromPath, getLocaleConfig, getLocalePrefix, filterPostsByLocale } from '../../utils/i18n';
 
 export async function getStaticPaths() {
   const allPosts = await getCollection('posts', ({ data }) => !data.draft);
@@ -30,8 +33,18 @@ export async function getStaticPaths() {
 
 const { tagSlug, tagName, tagCount } = Astro.props;
 
+// 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 filteredPosts = allPosts
@@ -75,17 +88,18 @@ const relatedTags = Array.from(relatedTagMap.entries())
 ---
 
 <PageLayout
-  title={`标签: ${tagName}`}
-  description={`浏览所有关于 ${tagName} 的文章`}
+  title={`${ui.taggedWith}: ${tagName}`}
+  description={`${ui.taggedWith} ${tagName}`}
   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="/" class="hover:text-primary-500 transition-colors">首页</a>
+    <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>
-    <a href="/tags" class="hover:text-primary-500 transition-colors">标签</a>
+    <a href={`${localePrefix}/tags`} class="hover:text-primary-500 transition-colors">{ui.allTags}</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>
@@ -105,18 +119,18 @@ const relatedTags = Array.from(relatedTagMap.entries())
     </h1>
 
     <p class="text-xl text-slate-600 dark:text-slate-400 mb-8">
-      找到 {totalPosts} 篇关于 {tagName} 的文章
+      {totalPosts} {ui.posts}
     </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>#{tagName}</span>
       <span>•</span>
-      <span>{totalPosts} 篇文章</span>
+      <span>{totalPosts} {ui.posts}</span>
       {totalPages > 1 && (
         <>
           <span>•</span>
-          <span>共 {totalPages} 页</span>
+          <span>{totalPages} {ui.page}</span>
         </>
       )}
     </div>
@@ -138,6 +152,9 @@ const relatedTags = Array.from(relatedTagMap.entries())
             image: post.data.image
           }}
           layout="horizontal"
+          localePrefix={localePrefix}
+          locale={localeConfig.locale.dateLocale}
+          ui={ui}
         />
       ))}
     </div>
@@ -145,13 +162,13 @@ const relatedTags = Array.from(relatedTagMap.entries())
     <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 mb-6">
-        目前还没有关于 {tagName} 的文章，请查看其他标签。
+        {ui.noPostsFound}
       </p>
-      <a href="/tags" class="btn-secondary">
-        浏览所有标签
+      <a href={`${localePrefix}/tags`} class="btn-secondary">
+        {ui.allTags}
       </a>
     </div>
   )}
@@ -161,7 +178,7 @@ const relatedTags = Array.from(relatedTagMap.entries())
     <Pagination
       currentPage={currentPage}
       totalPages={totalPages}
-      baseUrl={`/tags/${tagSlug}`}
+      baseUrl={`${localePrefix}/tags/${tagSlug}`}
     />
   )}
 
@@ -169,12 +186,12 @@ const relatedTags = Array.from(relatedTagMap.entries())
   {relatedTags.length > 0 && (
     <section class="mt-16 pt-8 border-t border-slate-200 dark:border-slate-700">
       <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-6">
-        相关标签
+        {ui.popularTags}
       </h2>
       <div class="flex flex-wrap gap-3">
         {relatedTags.map((relatedTag) => (
           <a
-            href={`/tags/${relatedTag.slug}`}
+            href={`${localePrefix}/tags/${relatedTag.slug}`}
             class="inline-flex items-center px-4 py-2 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-md transition-all duration-200 group"
           >
             <span class="font-medium text-slate-900 dark:text-slate-100 group-hover:text-primary-500 transition-colors">

package/src/pages/tags/index.astro

@@ -2,9 +2,22 @@
 import { getCollection } from 'astro:content';
 import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
 import TagCloud from '@jet-w/astro-blog/components/blog/TagCloud.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 tagMap = new Map<string, { name: string; count: number }>();
@@ -54,44 +67,54 @@ const sortedGroups = Object.entries(groupedByLetter).sort(([a], [b]) => {
 ---
 
 <PageLayout
-  title="标签"
-  description="按标签浏览文章"
+  title={ui.allTags}
+  description={ui.allTags}
   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.allTags}</span>
+  </nav>
+
   <!-- 页面头部 -->
   <div class="text-center mb-12">
     <h1 class="text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4">
-      文章标签
+      {ui.allTags}
     </h1>
     <p class="text-xl text-slate-600 dark:text-slate-400 mb-8">
-      按标签分类浏览所有文章
+      {ui.filterByTag}
     </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>共 {allTags.length} 个标签</span>
+      <span>{allTags.length} {ui.tags}</span>
       <span>•</span>
-      <span>{totalPosts} 篇文章</span>
+      <span>{totalPosts} {ui.posts}</span>
     </div>
   </div>
 
   <!-- 标签云 -->
   <section class="mb-16">
     <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
-      标签云
+      {ui.tags}
     </h2>
-    <TagCloud tags={allTags} />
+    <TagCloud tags={allTags} localePrefix={localePrefix} />
   </section>
 
   <!-- 热门标签 -->
   <section class="mb-16">
     <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
-      热门标签
+      {ui.popularTags}
     </h2>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       {sortedTags.slice(0, 9).map((tag) => (
         <a
-          href={`/tags/${tag.slug}`}
+          href={`${localePrefix}/tags/${tag.slug}`}
           class="group card hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300"
         >
           <div class="flex items-center justify-between">
@@ -100,7 +123,7 @@ const sortedGroups = Object.entries(groupedByLetter).sort(([a], [b]) => {
                 {tag.name}
               </h3>
               <p class="text-sm text-slate-600 dark:text-slate-400">
-                {tag.count} 篇文章
+                {tag.count} {ui.posts}
               </p>
             </div>
             <div class="text-3xl font-bold text-primary-500 opacity-80">
@@ -121,12 +144,12 @@ const sortedGroups = Object.entries(groupedByLetter).sort(([a], [b]) => {
   <!-- 所有标签 -->
   <section class="mb-16">
     <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
-      所有标签
+      {ui.allTags}
     </h2>
     <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
       {sortedTags.map((tag) => (
         <a
-          href={`/tags/${tag.slug}`}
+          href={`${localePrefix}/tags/${tag.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"
         >
           <span class="font-medium text-slate-900 dark:text-slate-100 group-hover:text-primary-500 transition-colors">
@@ -143,7 +166,7 @@ const sortedGroups = Object.entries(groupedByLetter).sort(([a], [b]) => {
   <!-- 按字母分组 -->
   <section>
     <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
-      按首字母分组
+      {ui.tags}
     </h2>
     {sortedGroups.map(([letter, tags]) => (
       <div class="mb-6">
@@ -153,7 +176,7 @@ const sortedGroups = Object.entries(groupedByLetter).sort(([a], [b]) => {
         <div class="flex flex-wrap gap-2">
           {tags.sort((a, b) => b.count - a.count).map((tag) => (
             <a
-              href={`/tags/${tag.slug}`}
+              href={`${localePrefix}/tags/${tag.slug}`}
               class="inline-flex items-center px-3 py-1 bg-slate-100 dark:bg-slate-800 hover:bg-primary-100 dark:hover:bg-primary-900/30 text-slate-700 dark:text-slate-300 hover:text-primary-700 dark:hover:text-primary-300 rounded-full transition-colors text-sm"
             >
               {tag.name}