@jet-w/astro-blog 0.1.6 → 0.2.1

package/dist/index.js

@@ -16,12 +16,237 @@ import {
   sidebarConfig,
   siteConfig,
   socialLinks
-} from "./chunk-GYLSY3OJ.js";
+} from "./chunk-TJTPX2WP.js";
 import "./chunk-FXPGR372.js";
 import {
   astroBlogIntegration,
   integration_default
-} from "./chunk-MQXPSOYB.js";
+} from "./chunk-6D3XRDNY.js";
+import {
+  builtInTranslations,
+  defaultI18nConfig,
+  defaultLocales,
+  defineI18nConfig,
+  enTranslations,
+  getUITranslations,
+  zhCNTranslations
+} from "./chunk-A2E2VSAQ.js";
+
+// src/utils/i18n.ts
+function getLocaleFromPath(pathname, config = defaultI18nConfig) {
+  const segments = pathname.replace(/^\//, "").split("/");
+  const firstSegment = segments[0];
+  const matchedLocale = config.locales.find(
+    (locale) => locale.code === firstSegment
+  );
+  if (matchedLocale) {
+    return matchedLocale.code;
+  }
+  return config.defaultLocale;
+}
+function getLocaleByCode(code, config = defaultI18nConfig) {
+  return config.locales.find((locale) => locale.code === code);
+}
+function removeLocalePrefix(pathname, config = defaultI18nConfig) {
+  const locale = getLocaleFromPath(pathname, config);
+  if (locale === config.defaultLocale && !config.routing.prefixDefaultLocale) {
+    return pathname;
+  }
+  const prefix = `/${locale}`;
+  if (pathname.startsWith(prefix)) {
+    const rest = pathname.slice(prefix.length);
+    return rest || "/";
+  }
+  return pathname;
+}
+function getLocalizedPath(pathname, targetLocale, config = defaultI18nConfig) {
+  const basePath = removeLocalePrefix(pathname, config);
+  if (targetLocale === config.defaultLocale && !config.routing.prefixDefaultLocale) {
+    return basePath;
+  }
+  if (basePath === "/") {
+    return `/${targetLocale}`;
+  }
+  return `/${targetLocale}${basePath}`;
+}
+function getAlternateLinks(pathname, baseUrl, config = defaultI18nConfig) {
+  const links = [];
+  for (const locale of config.locales) {
+    const localizedPath = getLocalizedPath(pathname, locale.code, config);
+    links.push({
+      locale: locale.code,
+      url: `${baseUrl.replace(/\/$/, "")}${localizedPath}`,
+      hreflang: locale.htmlLang
+    });
+  }
+  const defaultPath = getLocalizedPath(
+    pathname,
+    config.defaultLocale,
+    config
+  );
+  links.push({
+    locale: "x-default",
+    url: `${baseUrl.replace(/\/$/, "")}${defaultPath}`,
+    hreflang: "x-default"
+  });
+  return links;
+}
+function deepMerge(base, override) {
+  const result = { ...base };
+  for (const key in override) {
+    if (Object.prototype.hasOwnProperty.call(override, key)) {
+      const overrideValue = override[key];
+      const baseValue = base[key];
+      if (typeof overrideValue === "object" && overrideValue !== null && !Array.isArray(overrideValue) && typeof baseValue === "object" && baseValue !== null && !Array.isArray(baseValue)) {
+        result[key] = deepMerge(baseValue, overrideValue);
+      } else if (overrideValue !== void 0) {
+        result[key] = overrideValue;
+      }
+    }
+  }
+  return result;
+}
+function getLocaleConfig(locale, config = defaultI18nConfig) {
+  const localeData = getLocaleByCode(locale, config);
+  const localeOverrides = config.localeConfigs[locale] || {};
+  const localeInfo = localeData || {
+    code: locale,
+    name: locale,
+    htmlLang: locale,
+    dateLocale: locale,
+    direction: "ltr"
+  };
+  const site = deepMerge(defaultSiteConfig, localeOverrides.site || {});
+  const menu2 = localeOverrides.menu || defaultMenu;
+  const footer = deepMerge(defaultFooterConfig, localeOverrides.footer || {});
+  const sidebar = localeOverrides.sidebar ? {
+    ...sidebarConfig,
+    ...localeOverrides.sidebar,
+    // Use locale-specific groups if provided, otherwise keep default
+    groups: localeOverrides.sidebar.groups || sidebarConfig.groups
+  } : sidebarConfig;
+  const ui = getUITranslations(locale, config);
+  return {
+    locale: localeInfo,
+    site,
+    menu: menu2,
+    footer,
+    sidebar,
+    ui
+  };
+}
+function t(key, locale, config) {
+  const translations = getUITranslations(locale, config);
+  return translations[key] || key;
+}
+function formatDate(date, locale, options) {
+  const dateObj = typeof date === "string" ? new Date(date) : date;
+  const defaultOptions = {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  };
+  return new Intl.DateTimeFormat(locale, options || defaultOptions).format(
+    dateObj
+  );
+}
+function formatDateShort(date, locale) {
+  const dateObj = typeof date === "string" ? new Date(date) : date;
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric"
+  }).format(dateObj);
+}
+function isRTL(locale, config = defaultI18nConfig) {
+  const localeData = getLocaleByCode(locale, config);
+  return localeData?.direction === "rtl";
+}
+function getTextDirection(locale, config = defaultI18nConfig) {
+  return isRTL(locale, config) ? "rtl" : "ltr";
+}
+function isMultiLanguageEnabled(config = defaultI18nConfig) {
+  return config.locales.length > 1;
+}
+function getLocalePrefix(locale, config = defaultI18nConfig) {
+  if (locale === config.defaultLocale && !config.routing.prefixDefaultLocale) {
+    return "";
+  }
+  return `/${locale}`;
+}
+function getContentPathPrefix(locale, config = defaultI18nConfig) {
+  const localeConfig = config.localeConfigs[locale];
+  return localeConfig?.contentPathPrefix;
+}
+function filterPostsByLocale(posts, locale, config = defaultI18nConfig) {
+  const contentPathPrefix = getContentPathPrefix(locale, config);
+  if (!contentPathPrefix) {
+    return posts;
+  }
+  return posts.filter((post) => {
+    const postPath = post.id.toLowerCase();
+    const prefix = contentPathPrefix.toLowerCase();
+    return postPath.startsWith(prefix + "/") || postPath === prefix;
+  });
+}
+
+// src/utils/useI18n.ts
+import { inject, computed } from "vue";
+var I18N_LOCALE_KEY = /* @__PURE__ */ Symbol("i18n-locale");
+var I18N_CONFIG_KEY = /* @__PURE__ */ Symbol("i18n-config");
+var I18N_TRANSLATIONS_KEY = /* @__PURE__ */ Symbol("i18n-translations");
+function useI18n() {
+  const injectedLocale = inject(I18N_LOCALE_KEY, "zh-CN");
+  const injectedTranslations = inject(
+    I18N_TRANSLATIONS_KEY,
+    void 0
+  );
+  const injectedConfig = inject(I18N_CONFIG_KEY, void 0);
+  const locale = computed(() => injectedLocale);
+  const translations = computed(() => {
+    if (injectedTranslations) {
+      return injectedTranslations;
+    }
+    return getUITranslations(injectedLocale, injectedConfig);
+  });
+  function t2(key) {
+    return translations.value[key] || key;
+  }
+  function formatDate2(date, options) {
+    const dateObj = typeof date === "string" ? new Date(date) : date;
+    const defaultOptions = {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    };
+    return new Intl.DateTimeFormat(
+      locale.value,
+      options || defaultOptions
+    ).format(dateObj);
+  }
+  function formatDateShort2(date) {
+    const dateObj = typeof date === "string" ? new Date(date) : date;
+    return new Intl.DateTimeFormat(locale.value, {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric"
+    }).format(dateObj);
+  }
+  return {
+    locale,
+    t: t2,
+    formatDate: formatDate2,
+    formatDateShort: formatDateShort2,
+    translations
+  };
+}
+function createI18nContext(locale, config) {
+  return {
+    locale,
+    translations: getUITranslations(locale, config),
+    config
+  };
+}
 
 // src/index.ts
 function defineBlogConfig(config) {
@@ -41,10 +266,17 @@ function getAstroConfig(options) {
   };
 }
 export {
+  I18N_CONFIG_KEY,
+  I18N_LOCALE_KEY,
+  I18N_TRANSLATIONS_KEY,
   integration_default as astroBlog,
   astroBlogIntegration,
+  builtInTranslations,
+  createI18nContext,
   defaultFooterConfig,
+  defaultI18nConfig,
   defaultIcons,
+  defaultLocales,
   defaultMenu,
   defaultSEO,
   defaultSidebarConfig,
@@ -52,14 +284,34 @@ export {
   defaultSocialLinks,
   defineBlogConfig,
   defineFooterConfig,
+  defineI18nConfig,
   defineMenu,
   defineSidebarConfig,
   defineSiteConfig,
   defineSocialLinks,
+  enTranslations,
+  filterPostsByLocale,
   footerConfig,
+  formatDate,
+  formatDateShort,
+  getAlternateLinks,
   getAstroConfig,
+  getContentPathPrefix,
+  getLocaleByCode,
+  getLocaleConfig,
+  getLocaleFromPath,
+  getLocalePrefix,
+  getLocalizedPath,
+  getTextDirection,
+  getUITranslations,
+  isMultiLanguageEnabled,
+  isRTL,
   menu,
+  removeLocalePrefix,
   sidebarConfig,
   siteConfig,
-  socialLinks
+  socialLinks,
+  t,
+  useI18n,
+  zhCNTranslations
 };

package/dist/integration.d.ts

@@ -1,9 +1,13 @@
 import { AstroIntegration } from 'astro';
+import { I as I18nConfig } from './i18n-PgMCFBw0.js';
+import './types/index.js';
+import './sidebar-Da-W_4Lr.js';
 
 /**
  * @jet-w/astro-blog Integration
  *
  * This integration injects the blog pages into your Astro project
+ * with multi-language support.
  */
 
 interface AstroBlogIntegrationOptions {
@@ -19,7 +23,11 @@ interface AstroBlogIntegrationOptions {
         search?: boolean;
         rss?: boolean;
     };
+    /**
+     * i18n configuration for multi-language support
+     */
+    i18n?: I18nConfig;
 }
 declare function astroBlogIntegration(options?: AstroBlogIntegrationOptions): AstroIntegration;
 
-export { type AstroBlogIntegrationOptions, astroBlogIntegration, astroBlogIntegration as default };
+export { type AstroBlogIntegrationOptions, I18nConfig, astroBlogIntegration, astroBlogIntegration as default };

package/dist/integration.js

@@ -1,7 +1,8 @@
 import {
   astroBlogIntegration,
   integration_default
-} from "./chunk-MQXPSOYB.js";
+} from "./chunk-6D3XRDNY.js";
+import "./chunk-A2E2VSAQ.js";
 export {
   astroBlogIntegration,
   integration_default as default

package/dist/{sidebar-DNdiCKBw.d.ts → sidebar-Da-W_4Lr.d.ts}

@@ -89,4 +89,4 @@ declare const sidebarConfig: SidebarConfig;
 declare function defineSidebarConfig(config: Partial<SidebarConfig>): SidebarConfig;
 declare const defaultSidebarConfig: SidebarConfig;
 
-export { type DividerConfig as D, type ManualConfig as M, type PathMatchConfig as P, type SidebarConfig as S, defineSidebarConfig as a, type SidebarGroup as b, type SidebarItem as c, defaultSidebarConfig as d, type ScanConfig as e, type MixedConfig as f, sidebarConfig as s };
+export { type DividerConfig as D, type ManualConfig as M, type PathMatchConfig as P, type SidebarItem as S, type SidebarGroup as a, type SidebarConfig as b, defineSidebarConfig as c, defaultSidebarConfig as d, type ScanConfig as e, type MixedConfig as f, sidebarConfig as s };

package/dist/utils/sidebar.d.ts

@@ -1,4 +1,4 @@
-import { c as SidebarItem, b as SidebarGroup, S as SidebarConfig } from '../sidebar-DNdiCKBw.js';
+import { S as SidebarItem, a as SidebarGroup, b as SidebarConfig } from '../sidebar-Da-W_4Lr.js';
 
 /**
  * 侧边栏工具函数

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jet-w/astro-blog",
-  "version": "0.1.6",
+  "version": "0.2.1",
   "description": "A modern Astro blog theme with Vue and Tailwind CSS support",
   "type": "module",
   "exports": {

package/src/components/blog/FloatingToc.vue

@@ -9,7 +9,7 @@
       <button
         class="p-3 bg-white dark:bg-slate-800 rounded-full shadow-lg border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
         :class="{ 'bg-primary-50 dark:bg-primary-900/30': showToc }"
-        aria-label="显示目录"
+        :aria-label="tocTitle"
       >
         <svg class="w-5 h-5 text-slate-600 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
@@ -35,7 +35,7 @@
               <svg class="w-4 h-4 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
               </svg>
-              页面目录
+              {{ tocTitle }}
             </h3>
           </div>
 
@@ -66,7 +66,7 @@
           <!-- 进度条 -->
           <div class="px-4 py-2 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50">
             <div class="flex items-center justify-between text-xs text-slate-500 dark:text-slate-400 mb-1">
-              <span>阅读进度</span>
+              <span>{{ progressTitle }}</span>
               <span>{{ Math.round(progress * 100) }}%</span>
             </div>
             <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-1.5">
@@ -91,6 +91,14 @@ interface Heading {
   level: number
 }
 
+const props = withDefaults(defineProps<{
+  tocTitle?: string
+  progressTitle?: string
+}>(), {
+  tocTitle: 'Table of Contents',
+  progressTitle: 'Reading Progress',
+})
+
 const showToc = ref(false)
 const headings = ref<Heading[]>([])
 const activeId = ref('')

package/src/components/blog/Hero.astro

@@ -1,5 +1,20 @@
 ---
 import { siteConfig } from '@jet-w/astro-blog/config';
+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;
 ---
 
 <section class="py-16 mb-16">
@@ -89,7 +104,7 @@ import { siteConfig } from '@jet-w/astro-blog/config';
         href="/posts"
         class="btn-primary inline-flex items-center space-x-2"
       >
-        <span>浏览文章</span>
+        <span>{ui.browsePosts}</span>
         <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>
@@ -99,7 +114,7 @@ import { siteConfig } from '@jet-w/astro-blog/config';
         href="/about"
         class="btn-secondary inline-flex items-center space-x-2"
       >
-        <span>关于我</span>
+        <span>{ui.aboutMe}</span>
         <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
         </svg>

package/src/components/blog/NavigationTabs.vue

@@ -26,7 +26,7 @@
         <a
           v-for="tag in tags"
           :key="tag.name"
-          :href="`/tags/${encodeTag(tag.name)}`"
+          :href="`${props.localePrefix}/tags/${encodeTag(tag.name)}`"
           class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm transition-colors"
           :class="getTagColorClass(tag.count)"
         >
@@ -40,7 +40,7 @@
         <a
           v-for="archive in archives"
           :key="archive.key"
-          :href="`/archives/${archive.year}/${archive.month}`"
+          :href="`${props.localePrefix}/archives/${archive.year}/${archive.month}`"
           class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors group"
         >
           <div class="flex items-center gap-3">
@@ -48,11 +48,11 @@
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
             </svg>
             <span class="text-slate-700 dark:text-slate-300 group-hover:text-primary-600 dark:group-hover:text-primary-400">
-              {{ archive.year }}年{{ archive.month }}月
+              {{ formatArchiveDate(archive.year, archive.month) }}
             </span>
           </div>
           <span class="text-xs text-slate-400 bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-full">
-            {{ archive.count }}篇
+            {{ archive.count }} {{ props.ui?.postsCount || 'posts' }}
           </span>
         </a>
       </div>
@@ -62,7 +62,7 @@
         <a
           v-for="category in categories"
           :key="category.name"
-          :href="`/categories/${encodeCategory(category.name)}`"
+          :href="`${props.localePrefix}/categories/${encodeCategory(category.name)}`"
           class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors group"
         >
           <div class="flex items-center gap-3">
@@ -74,7 +74,7 @@
             </span>
           </div>
           <span class="text-xs text-slate-400 bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-full">
-            {{ category.count }}篇
+            {{ category.count }} {{ props.ui?.postsCount || 'posts' }}
           </span>
         </a>
       </div>
@@ -86,7 +86,7 @@
           <div v-for="item in timeline" :key="item.slug" class="relative pl-10">
             <div class="absolute left-2.5 w-3 h-3 rounded-full bg-primary-500 border-2 border-white dark:border-slate-800"></div>
             <a
-              :href="`/posts/${item.slug}`"
+              :href="`${props.localePrefix}/posts/${item.slug}`"
               class="block p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors group"
             >
               <div class="text-xs text-slate-400 mb-1">{{ formatDate(item.pubDate) }}</div>
@@ -97,10 +97,10 @@
           </div>
         </div>
         <a
-          href="/archives"
+          :href="`${props.localePrefix}/archives`"
           class="mt-4 flex items-center justify-center gap-2 py-2 text-sm text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
         >
-          <span>查看全部时间轴</span>
+          <span>{{ props.ui?.viewAllTimeline || 'View all timeline' }}</span>
           <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>
@@ -136,14 +136,37 @@ interface TimelineItem {
   pubDate: string
 }
 
+interface UIProps {
+  tags?: string
+  archives?: string
+  categories?: string
+  timeline?: string
+  viewAllTimeline?: string
+  postsCount?: string
+}
+
 interface Props {
   tags: TagItem[]
   archives: ArchiveItem[]
   categories: CategoryItem[]
   timeline: TimelineItem[]
+  localePrefix?: string
+  dateLocale?: string
+  ui?: UIProps
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  localePrefix: '',
+  dateLocale: 'en',
+  ui: () => ({
+    tags: 'Tags',
+    archives: 'Archives',
+    categories: 'Categories',
+    timeline: 'Timeline',
+    viewAllTimeline: 'View all timeline',
+    postsCount: 'posts',
+  })
+})
 
 const activeTab = ref('tags')
 
@@ -201,10 +224,10 @@ const TimelineIcon = {
 }
 
 const tabs = computed(() => [
-  { id: 'tags', name: '标签', count: props.tags.length, icon: TagIcon },
-  { id: 'archives', name: '归档', count: props.archives.length, icon: ArchiveIcon },
-  { id: 'categories', name: '分类', count: props.categories.length, icon: CategoryIcon },
-  { id: 'timeline', name: '时间轴', count: props.timeline.length, icon: TimelineIcon },
+  { id: 'tags', name: props.ui?.tags || 'Tags', count: props.tags.length, icon: TagIcon },
+  { id: 'archives', name: props.ui?.archives || 'Archives', count: props.archives.length, icon: ArchiveIcon },
+  { id: 'categories', name: props.ui?.categories || 'Categories', count: props.categories.length, icon: CategoryIcon },
+  { id: 'timeline', name: props.ui?.timeline || 'Timeline', count: props.timeline.length, icon: TimelineIcon },
 ])
 
 const encodeTag = (tag: string) => {
@@ -227,12 +250,20 @@ const getTagColorClass = (count: number) => {
 
 const formatDate = (dateStr: string) => {
   const date = new Date(dateStr)
-  return new Intl.DateTimeFormat('zh-CN', {
+  return new Intl.DateTimeFormat(props.dateLocale, {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit'
   }).format(date)
 }
+
+const formatArchiveDate = (year: string, month: string) => {
+  const date = new Date(parseInt(year), parseInt(month) - 1, 1)
+  return new Intl.DateTimeFormat(props.dateLocale, {
+    year: 'numeric',
+    month: 'long'
+  }).format(date)
+}
 </script>
 
 <style scoped>

package/src/components/blog/PostCard.astro

@@ -13,12 +13,25 @@ export interface Props {
   };
   featured?: boolean;
   layout?: 'vertical' | 'horizontal';
+  localePrefix?: string;
+  locale?: string;
+  ui?: {
+    readMore?: string;
+    minuteRead?: string;
+  };
 }
 
-const { post, featured = false, layout = 'vertical' } = Astro.props;
+const {
+  post,
+  featured = false,
+  layout = 'vertical',
+  localePrefix = '',
+  locale = 'zh-CN',
+  ui = { readMore: '阅读更多', minuteRead: '分钟' }
+} = Astro.props;
 
 const formattedDate = post.pubDate
-  ? new Intl.DateTimeFormat('zh-CN', {
+  ? new Intl.DateTimeFormat(locale, {
       year: 'numeric',
       month: 'long',
       day: 'numeric'
@@ -31,12 +44,17 @@ const isHorizontal = layout === 'horizontal';
 const tagToSlug = (tag: string) => tag.toLowerCase().replace(/\s+/g, '-');
 // 将分类名转换为 slug 格式
 const categoryToSlug = (category: string) => category.toLowerCase().replace(/\s+/g, '-');
+
+// Build URLs with locale prefix
+const postUrl = `${localePrefix}/posts/${post.slug}`;
+const tagUrl = (tag: string) => `${localePrefix}/tags/${tagToSlug(tag)}`;
+const categoryUrl = (category: string) => `${localePrefix}/categories/${categoryToSlug(category)}`;
 ---
 
 <article class={`group card hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ${isHorizontal ? 'flex gap-6 items-center' : 'block'}`}>
   <!-- 文章图片 -->
   {post.image && (
-    <a href={`/posts/${post.slug}`} class={`block overflow-hidden rounded-lg ${
+    <a href={postUrl} class={`block overflow-hidden rounded-lg ${
       isHorizontal ? 'w-48 h-32 flex-shrink-0' : 'w-full h-48 mb-4'
     }`}>
       <img
@@ -55,7 +73,7 @@ const categoryToSlug = (category: string) => category.toLowerCase().replace(/\s+
       <div class="flex flex-wrap gap-2 mb-2">
         {post.categories.slice(0, 2).map((category) => (
           <a
-            href={`/categories/${categoryToSlug(category)}`}
+            href={categoryUrl(category)}
             class="text-xs px-2 py-1 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 rounded-full hover:bg-amber-200 dark:hover:bg-amber-900/50 transition-colors"
             onclick="event.stopPropagation();"
           >
@@ -70,7 +88,7 @@ const categoryToSlug = (category: string) => category.toLowerCase().replace(/\s+
       <div class="flex flex-wrap gap-2 mb-3">
         {post.tags.slice(0, 3).map((tag) => (
           <a
-            href={`/tags/${tagToSlug(tag)}`}
+            href={tagUrl(tag)}
             class="text-xs px-2 py-1 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"
             onclick="event.stopPropagation();"
           >
@@ -86,7 +104,7 @@ const categoryToSlug = (category: string) => category.toLowerCase().replace(/\s+
     )}
 
     <!-- 标题 -->
-    <a href={`/posts/${post.slug}`}>
+    <a href={postUrl}>
       <h3 class={`font-bold text-slate-900 dark:text-slate-100 hover:text-primary-500 transition-colors line-clamp-2 mb-3 ${
         featured ? 'text-xl' : isHorizontal ? 'text-lg' : 'text-lg'
       }`}>
@@ -95,7 +113,7 @@ const categoryToSlug = (category: string) => category.toLowerCase().replace(/\s+
     </a>
 
     <!-- 描述 -->
-    <a href={`/posts/${post.slug}`}>
+    <a href={postUrl}>
       <p class={`text-slate-600 dark:text-slate-400 line-clamp-3 mb-4 hover:text-slate-700 dark:hover:text-slate-300 transition-colors ${
         isHorizontal ? 'text-sm' : 'text-base'
       }`}>
@@ -129,13 +147,13 @@ const categoryToSlug = (category: string) => category.toLowerCase().replace(/\s+
             <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>{post.readingTime}分钟</span>
+            <span>{post.readingTime} {ui.minuteRead}</span>
           </span>
         )}
       </div>
 
-      <a href={`/posts/${post.slug}`} class="flex items-center text-primary-500 hover:text-primary-600 transition-colors">
-        <span class="text-sm font-medium">阅读更多</span>
+      <a href={postUrl} class="flex items-center text-primary-500 hover:text-primary-600 transition-colors">
+        <span class="text-sm font-medium">{ui.readMore}</span>
         <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" 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>