@jet-w/astro-blog 0.2.0 → 0.2.1

package/src/components/ui/SearchInterface.vue

@@ -7,7 +7,7 @@
           v-model="searchQuery"
           @input="handleSearch"
           type="text"
-          placeholder="搜索文章标题、内容、标签..."
+          :placeholder="props.placeholder || '搜索文章标题、内容、标签...'"
           class="w-full pl-12 pr-4 py-4 text-lg bg-white dark:bg-slate-800 border-2 border-slate-300 dark:border-slate-600 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors shadow-sm"
           autofocus
         />
@@ -33,41 +33,41 @@
     <div class="flex flex-wrap gap-4">
       <!-- 标签筛选 -->
       <div class="flex items-center space-x-2">
-        <label class="text-sm font-medium text-slate-700 dark:text-slate-300">标签:</label>
+        <label class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ props.tags || '标签' }}:</label>
         <select
           v-model="selectedTag"
           @change="handleSearch"
           class="text-sm px-3 py-1 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
         >
-          <option value="">全部</option>
+          <option value="">{{ props.all || '全部' }}</option>
           <option v-for="tag in allTags" :key="tag" :value="tag">{{ tag }}</option>
         </select>
       </div>
 
       <!-- 分类筛选 -->
       <div class="flex items-center space-x-2">
-        <label class="text-sm font-medium text-slate-700 dark:text-slate-300">分类:</label>
+        <label class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ props.categories || '分类' }}:</label>
         <select
           v-model="selectedCategory"
           @change="handleSearch"
           class="text-sm px-3 py-1 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
         >
-          <option value="">全部</option>
+          <option value="">{{ props.all || '全部' }}</option>
           <option v-for="category in allCategories" :key="category" :value="category">{{ category }}</option>
         </select>
       </div>
 
       <!-- 排序 -->
       <div class="flex items-center space-x-2">
-        <label class="text-sm font-medium text-slate-700 dark:text-slate-300">排序:</label>
+        <label class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ props.sortLabel || '排序' }}:</label>
         <select
           v-model="sortBy"
           @change="handleSearch"
           class="text-sm px-3 py-1 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
         >
-          <option value="relevance">相关性</option>
-          <option value="date">发布时间</option>
-          <option value="title">标题</option>
+          <option value="relevance">{{ props.relevance || '相关性' }}</option>
+          <option value="date">{{ props.publishTime || '发布时间' }}</option>
+          <option value="title">{{ props.titleLabel || '标题' }}</option>
         </select>
       </div>
     </div>
@@ -75,15 +75,14 @@
     <!-- 搜索状态 -->
     <div class="flex items-center justify-between text-sm text-slate-600 dark:text-slate-400">
       <div>
-        <span v-if="isSearching">正在搜索...</span>
+        <span v-if="isSearching">{{ props.searching || '正在搜索...' }}</span>
         <span v-else-if="searchQuery">
-          找到 {{ searchResults.length }} 个结果
-          <span v-if="searchQuery">包含 "{{ searchQuery }}"</span>
+          {{ props.foundResults || '找到' }} {{ searchResults.length }} {{ props.containing || '个结果包含' }} "{{ searchQuery }}"
         </span>
-        <span v-else>输入关键词开始搜索</span>
+        <span v-else>{{ props.enterKeywordToSearch || '输入关键词开始搜索' }}</span>
       </div>
-      <div v-if="searchTime">
-        搜索用时: {{ searchTime }}ms
+      <div v-if="searchTimeValue">
+        {{ props.searchTime || '搜索用时' }}: {{ searchTimeValue }}ms
       </div>
     </div>
 
@@ -104,7 +103,7 @@
 
               <div class="flex flex-wrap items-center gap-4 text-sm text-slate-500 dark:text-slate-400">
                 <time :datetime="result.date">{{ formatDate(result.date) }}</time>
-                <span v-if="result.readingTime">{{ result.readingTime }}分钟阅读</span>
+                <span v-if="result.readingTime">{{ result.readingTime }} {{ props.readMinutes || '分钟阅读' }}</span>
                 <div class="flex flex-wrap gap-1">
                   <span
                     v-for="tag in result.tags.slice(0, 3)"
@@ -119,7 +118,7 @@
 
             <!-- 相关度评分 -->
             <div class="lg:w-20 text-center">
-              <div class="text-xs text-slate-500 dark:text-slate-400 mb-1">相关度</div>
+              <div class="text-xs text-slate-500 dark:text-slate-400 mb-1">{{ props.relevanceLabel || '相关度' }}</div>
               <div class="flex items-center justify-center">
                 <div class="w-12 h-2 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
                   <div
@@ -138,16 +137,16 @@
     <div v-else-if="searchQuery && !isSearching" 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">
-        没有找到相关结果
+        {{ props.noResultsTitle || '没有找到相关结果' }}
       </h3>
       <p class="text-slate-600 dark:text-slate-400 mb-6">
-        尝试使用不同的关键词或调整筛选条件
+        {{ props.noResultsDesc || '尝试使用不同的关键词或调整筛选条件' }}
       </p>
       <button
         @click="clearSearch"
         class="btn-secondary"
       >
-        清除搜索
+        {{ props.clearSearch || '清除搜索' }}
       </button>
     </div>
 
@@ -162,7 +161,7 @@
             ? 'bg-slate-100 dark:bg-slate-800 text-slate-400 border-slate-200 dark:border-slate-700'
             : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700'"
         >
-          上一页
+          {{ props.previousPage || '上一页' }}
         </button>
 
         <div class="flex items-center space-x-1">
@@ -187,7 +186,7 @@
             ? 'bg-slate-100 dark:bg-slate-800 text-slate-400 border-slate-200 dark:border-slate-700'
             : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700'"
         >
-          下一页
+          {{ props.nextPage || '下一页' }}
         </button>
       </nav>
     </div>
@@ -198,13 +197,38 @@
 import { ref, computed, onMounted } from 'vue'
 import type { SearchResult } from '@jet-w/astro-blog/types'
 
+const props = defineProps<{
+  placeholder?: string;
+  noResults?: string;
+  tags?: string;
+  categories?: string;
+  sortLabel?: string;
+  relevance?: string;
+  publishTime?: string;
+  titleLabel?: string;
+  all?: string;
+  searching?: string;
+  foundResults?: string;
+  containing?: string;
+  enterKeywordToSearch?: string;
+  searchTime?: string;
+  readMinutes?: string;
+  relevanceLabel?: string;
+  noResultsTitle?: string;
+  noResultsDesc?: string;
+  clearSearch?: string;
+  previousPage?: string;
+  nextPage?: string;
+  dateLocale?: string;
+}>();
+
 const searchQuery = ref('')
 const selectedTag = ref('')
 const selectedCategory = ref('')
 const sortBy = ref('relevance')
 const searchResults = ref<(SearchResult & { score: number; date: string; readingTime?: number })[]>([])
 const isSearching = ref(false)
-const searchTime = ref(0)
+const searchTimeValue = ref(0)
 const currentPage = ref(1)
 const resultsPerPage = 10
 
@@ -339,7 +363,7 @@ const performSearch = () => {
 
     searchResults.value = results
     isSearching.value = false
-    searchTime.value = Math.round(performance.now() - startTime)
+    searchTimeValue.value = Math.round(performance.now() - startTime)
     currentPage.value = 1
   }, 200)
 }
@@ -364,7 +388,7 @@ const highlightText = (text: string) => {
 }
 
 const formatDate = (date: string) => {
-  return new Intl.DateTimeFormat('zh-CN', {
+  return new Intl.DateTimeFormat(props.dateLocale || 'zh-CN', {
     year: 'numeric',
     month: 'long',
     day: 'numeric'

package/src/pages/archives/[year]/[month].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);
@@ -35,8 +38,18 @@ export async function getStaticPaths() {
 
 const { year, month, count } = 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
   .filter(post => {
@@ -62,25 +75,28 @@ const posts = filteredPosts.slice(startIndex, endIndex);
 
 // 月份名称
 const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
-const monthName = monthNames[month - 1];
+const monthNamesEn = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const monthName = currentLocale.startsWith('en') ? monthNamesEn[month - 1] : monthNames[month - 1];
+const archiveTitle = currentLocale.startsWith('en') ? `${monthName} ${year}` : `${year}年${monthName}`;
 ---
 
 <PageLayout
-  title={`归档: ${year}年${month}月`}
-  description={`${year}年${month}月的所有文章归档`}
+  title={`${ui.archives}: ${archiveTitle}`}
+  description={`${ui.archives} ${archiveTitle}`}
   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="/archives" class="hover:text-primary-500 transition-colors">归档</a>
+    <a href={`${localePrefix}/archives`} class="hover:text-primary-500 transition-colors">{ui.archives}</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">{year}年{month}月</span>
+    <span class="text-slate-900 dark:text-slate-100">{archiveTitle}</span>
   </nav>
 
   <!-- 页面头部 -->
@@ -92,22 +108,22 @@ const monthName = monthNames[month - 1];
     </div>
 
     <h1 class="text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4">
-      {year}年{monthName}
+      {archiveTitle}
     </h1>
 
     <p class="text-xl text-slate-600 dark:text-slate-400 mb-8">
-      共 {totalPosts} 篇文章
+      {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>{year}年{month}月</span>
+      <span>{archiveTitle}</span>
       <span>•</span>
-      <span>{totalPosts} 篇文章</span>
+      <span>{totalPosts} {ui.posts}</span>
       {totalPages > 1 && (
         <>
           <span>•</span>
-          <span>共 {totalPages} 页</span>
+          <span>{totalPages} {ui.page}</span>
         </>
       )}
     </div>
@@ -129,6 +145,9 @@ const monthName = monthNames[month - 1];
             image: post.data.image
           }}
           layout="horizontal"
+          localePrefix={localePrefix}
+          locale={localeConfig.locale.dateLocale}
+          ui={ui}
         />
       ))}
     </div>
@@ -136,13 +155,13 @@ const monthName = monthNames[month - 1];
     <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">
-        {year}年{month}月暂无发布的文章
+        {ui.noPostsFound}
       </p>
-      <a href="/archives" class="btn-secondary">
-        浏览所有归档
+      <a href={`${localePrefix}/archives`} class="btn-secondary">
+        {ui.archives}
       </a>
     </div>
   )}
@@ -152,7 +171,7 @@ const monthName = monthNames[month - 1];
     <Pagination
       currentPage={currentPage}
       totalPages={totalPages}
-      baseUrl={`/archives/${year}/${String(month).padStart(2, '0')}`}
+      baseUrl={`${localePrefix}/archives/${year}/${String(month).padStart(2, '0')}`}
     />
   )}
 </PageLayout>

package/src/pages/archives/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);
 
 // 按年月分组文章
 interface ArchiveMonth {
@@ -26,7 +39,9 @@ interface ArchiveYear {
 const archiveData = new Map<number, Map<number, ArchiveMonth>>();
 
 // 月份名称
-const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
+const monthNamesZh = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
+const monthNamesEn = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const monthNames = currentLocale === 'zh-CN' ? monthNamesZh : monthNamesEn;
 
 allPosts.forEach(post => {
   // pubDate 现在通过 schema transform 统一包含 date 或 pubDate 的值
@@ -82,17 +97,18 @@ const totalPosts = archives.reduce((sum, y) => sum + y.totalCount, 0);
 ---
 
 <PageLayout
-  title="文章归档"
-  description="按时间归档的所有文章"
+  title={ui.archives}
+  description={ui.archives}
   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>
-    <span class="text-slate-900 dark:text-slate-100">归档</span>
+    <span class="text-slate-900 dark:text-slate-100">{ui.archives}</span>
   </nav>
 
   <!-- 页面头部 -->
@@ -104,11 +120,11 @@ const totalPosts = archives.reduce((sum, y) => sum + y.totalCount, 0);
     </div>
 
     <h1 class="text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4">
-      文章归档
+      {ui.archives}
     </h1>
 
     <p class="text-xl text-slate-600 dark:text-slate-400">
-      共 {totalPosts} 篇文章，跨越 {archives.length} 年
+      {totalPosts} {ui.posts} • {archives.length} {currentLocale === 'zh-CN' ? '年' : 'years'}
     </p>
   </div>
 
@@ -123,9 +139,9 @@ const totalPosts = archives.reduce((sum, y) => sum + y.totalCount, 0);
         <div class="relative flex items-center mb-6">
           <div class="absolute left-4 md:left-8 w-4 h-4 -ml-2 bg-primary-500 rounded-full border-4 border-white dark:border-slate-900 z-10"></div>
           <h2 class="ml-12 md:ml-16 text-2xl font-bold text-slate-900 dark:text-slate-100 flex items-center gap-3">
-            {yearData.year}年
+            {yearData.year}{currentLocale === 'zh-CN' ? '年' : ''}
             <span class="text-sm font-normal text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 px-3 py-1 rounded-full">
-              {yearData.totalCount} 篇
+              {yearData.totalCount} {ui.posts}
             </span>
           </h2>
         </div>
@@ -140,14 +156,14 @@ const totalPosts = archives.reduce((sum, y) => sum + y.totalCount, 0);
               <div class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden">
                 <!-- 月份标题 -->
                 <a
-                  href={`/archives/${yearData.year}/${String(monthData.month).padStart(2, '0')}`}
+                  href={`${localePrefix}/archives/${yearData.year}/${String(monthData.month).padStart(2, '0')}`}
                   class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors"
                 >
                   <span class="font-semibold text-slate-900 dark:text-slate-100">
                     {monthData.monthName}
                   </span>
                   <span class="text-sm text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-700 px-2 py-1 rounded">
-                    {monthData.count} 篇
+                    {monthData.count} {ui.posts}
                   </span>
                 </a>
 
@@ -155,23 +171,23 @@ const totalPosts = archives.reduce((sum, y) => sum + y.totalCount, 0);
                 <div class="divide-y divide-slate-100 dark:divide-slate-700">
                   {monthData.posts.slice(0, 5).map((post) => (
                     <a
-                      href={`/posts/${post.id.toLowerCase()}`}
+                      href={`${localePrefix}/posts/${post.id.toLowerCase()}`}
                       class="flex items-center justify-between p-4 hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors"
                     >
                       <span class="text-slate-700 dark:text-slate-300 hover:text-primary-500 transition-colors line-clamp-1">
                         {post.title}
                       </span>
                       <time class="text-xs text-slate-500 dark:text-slate-400 ml-4 flex-shrink-0">
-                        {post.pubDate.getDate()}日
+                        {post.pubDate.getDate()}{currentLocale === 'zh-CN' ? '日' : ''}
                       </time>
                     </a>
                   ))}
                   {monthData.posts.length > 5 && (
                     <a
-                      href={`/archives/${yearData.year}/${String(monthData.month).padStart(2, '0')}`}
+                      href={`${localePrefix}/archives/${yearData.year}/${String(monthData.month).padStart(2, '0')}`}
                       class="block p-4 text-center text-sm text-primary-500 hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors"
                     >
-                      查看全部 {monthData.count} 篇文章 →
+                      {currentLocale === 'zh-CN' ? `查看全部 ${monthData.count} 篇文章` : `View all ${monthData.count} posts`} →
                     </a>
                   )}
                 </div>
@@ -188,13 +204,13 @@ const totalPosts = archives.reduce((sum, y) => sum + y.totalCount, 0);
     <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">
-        还没有发布任何文章
+        {currentLocale === 'zh-CN' ? '还没有发布任何文章' : 'No posts published yet'}
       </p>
-      <a href="/" class="btn-primary">
-        返回首页
+      <a href={`${localePrefix}/`} class="btn-primary">
+        {ui.home}
       </a>
     </div>
   )}

package/src/pages/categories/[category].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 { categorySlug, categoryName } = 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 relatedCategories = Array.from(relatedCategoryMap.entries())
 ---
 
 <PageLayout
-  title={`分类: ${categoryName}`}
-  description={`浏览所有 ${categoryName} 相关的文章`}
+  title={`${ui.inCategory}: ${categoryName}`}
+  description={`${ui.inCategory} ${categoryName}`}
   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="/categories" class="hover:text-primary-500 transition-colors">分类</a>
+    <a href={`${localePrefix}/categories`} class="hover:text-primary-500 transition-colors">{ui.allCategories}</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 relatedCategories = Array.from(relatedCategoryMap.entries())
     </h1>
 
     <p class="text-xl text-slate-600 dark:text-slate-400 mb-8 max-w-2xl mx-auto">
-      浏览 {categoryName} 分类下的所有文章
+      {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>{categoryName}</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 relatedCategories = Array.from(relatedCategoryMap.entries())
             image: post.data.image
           }}
           layout="horizontal"
+          localePrefix={localePrefix}
+          locale={localeConfig.locale.dateLocale}
+          ui={ui}
         />
       ))}
     </div>
@@ -145,13 +162,13 @@ const relatedCategories = Array.from(relatedCategoryMap.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">
-        目前还没有 {categoryName} 分类的文章，请查看其他分类。
+        {ui.noPostsFound}
       </p>
-      <a href="/categories" class="btn-secondary">
-        浏览所有分类
+      <a href={`${localePrefix}/categories`} class="btn-secondary">
+        {ui.allCategories}
       </a>
     </div>
   )}
@@ -161,7 +178,7 @@ const relatedCategories = Array.from(relatedCategoryMap.entries())
     <Pagination
       currentPage={currentPage}
       totalPages={totalPages}
-      baseUrl={`/categories/${categorySlug}`}
+      baseUrl={`${localePrefix}/categories/${categorySlug}`}
     />
   )}
 
@@ -169,12 +186,12 @@ const relatedCategories = Array.from(relatedCategoryMap.entries())
   {relatedCategories.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.categories}
       </h2>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
         {relatedCategories.map((relatedCategory) => (
           <a
-            href={`/categories/${relatedCategory.slug}`}
+            href={`${localePrefix}/categories/${relatedCategory.slug}`}
             class="group card hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300"
           >
             <div class="flex items-center justify-between">
@@ -183,7 +200,7 @@ const relatedCategories = Array.from(relatedCategoryMap.entries())
                   {relatedCategory.name}
                 </h3>
                 <p class="text-sm text-slate-600 dark:text-slate-400">
-                  {relatedCategory.count} 篇文章
+                  {relatedCategory.count} {ui.posts}
                 </p>
               </div>
               <svg class="w-5 h-5 text-slate-400 group-hover:text-amber-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">