@jet-w/astro-blog 0.2.0 → 0.2.2

package/dist/utils/i18n.d.ts

@@ -0,0 +1,133 @@
+import { I as I18nConfig, L as Locale, F as FooterConfig, U as UITranslations } from '../i18n-DYYPTq4o.js';
+export { n as LocaleConfig, j as builtInTranslations, g as defaultI18nConfig, h as defineI18nConfig, k as enTranslations, i as getUITranslations, z as zhCNTranslations } from '../i18n-DYYPTq4o.js';
+import { SiteConfig, NavigationItem } from '../types/index.js';
+import { S as SidebarConfig } from '../sidebar-DNdiCKBw.js';
+
+/**
+ * i18n Utility Functions
+ *
+ * Provides helper functions for multi-language support.
+ */
+
+/**
+ * Merged locale configuration with all defaults applied
+ */
+interface MergedLocaleConfig {
+    locale: Locale;
+    site: SiteConfig;
+    menu: NavigationItem[];
+    footer: FooterConfig;
+    sidebar: SidebarConfig;
+    ui: UITranslations;
+}
+/**
+ * Alternate link for SEO (hreflang)
+ */
+interface AlternateLink {
+    locale: string;
+    url: string;
+    hreflang: string;
+}
+/**
+ * Get current locale from URL pathname
+ *
+ * @example
+ * getLocaleFromPath('/en/posts', config) // 'en'
+ * getLocaleFromPath('/posts', config) // 'zh-CN' (default)
+ * getLocaleFromPath('/zh-CN/about', config) // 'zh-CN'
+ */
+declare function getLocaleFromPath(pathname: string, config?: I18nConfig): string;
+/**
+ * Get locale data by code
+ */
+declare function getLocaleByCode(code: string, config?: I18nConfig): Locale | undefined;
+/**
+ * Remove locale prefix from pathname
+ *
+ * @example
+ * removeLocalePrefix('/en/posts', config) // '/posts'
+ * removeLocalePrefix('/posts', config) // '/posts'
+ */
+declare function removeLocalePrefix(pathname: string, config?: I18nConfig): string;
+/**
+ * Get localized path for a given locale
+ *
+ * @example
+ * getLocalizedPath('/posts', 'en', config) // '/en/posts'
+ * getLocalizedPath('/en/posts', 'zh-CN', config) // '/posts' (if zh-CN is default)
+ */
+declare function getLocalizedPath(pathname: string, targetLocale: string, config?: I18nConfig): string;
+/**
+ * Get all alternate links for SEO (hreflang tags)
+ *
+ * @example
+ * getAlternateLinks('/posts', 'https://example.com', config)
+ * // Returns links for all locales
+ */
+declare function getAlternateLinks(pathname: string, baseUrl: string, config?: I18nConfig): AlternateLink[];
+/**
+ * Get merged configuration for a specific locale
+ * Combines default config with locale-specific overrides
+ */
+declare function getLocaleConfig(locale: string, config?: I18nConfig): MergedLocaleConfig;
+/**
+ * Translation function - get a UI translation string
+ *
+ * @example
+ * t('readMore', 'en') // 'Read more'
+ * t('readMore', 'zh-CN') // '阅读更多'
+ */
+declare function t(key: keyof UITranslations, locale: string, config?: I18nConfig): string;
+/**
+ * Format date according to locale
+ *
+ * @example
+ * formatDate(new Date(), 'en') // 'January 1, 2024'
+ * formatDate(new Date(), 'zh-CN') // '2024年1月1日'
+ */
+declare function formatDate(date: Date | string, locale: string, options?: Intl.DateTimeFormatOptions): string;
+/**
+ * Format date in short format
+ *
+ * @example
+ * formatDateShort(new Date(), 'en') // '1/1/2024'
+ * formatDateShort(new Date(), 'zh-CN') // '2024/1/1'
+ */
+declare function formatDateShort(date: Date | string, locale: string): string;
+/**
+ * Check if a locale is RTL (right-to-left)
+ */
+declare function isRTL(locale: string, config?: I18nConfig): boolean;
+/**
+ * Get the HTML dir attribute value
+ */
+declare function getTextDirection(locale: string, config?: I18nConfig): 'ltr' | 'rtl';
+/**
+ * Check if multi-language is enabled (more than one locale)
+ */
+declare function isMultiLanguageEnabled(config?: I18nConfig): boolean;
+/**
+ * Get prefix for a locale in routes
+ * Returns empty string for default locale if prefixDefaultLocale is false
+ */
+declare function getLocalePrefix(locale: string, config?: I18nConfig): string;
+/**
+ * Get content path prefix for a specific locale
+ * Returns the contentPathPrefix from locale config, or undefined if not set
+ */
+declare function getContentPathPrefix(locale: string, config?: I18nConfig): string | undefined;
+/**
+ * Filter posts by locale based on contentPathPrefix
+ * If contentPathPrefix is set, only return posts that start with that prefix
+ * If not set, return all posts (backward compatible)
+ *
+ * @example
+ * // If en locale has contentPathPrefix: 'blog_docs_en'
+ * filterPostsByLocale(posts, 'en', config)
+ * // Returns only posts with id starting with 'blog_docs_en/'
+ */
+declare function filterPostsByLocale<T extends {
+    id: string;
+}>(posts: T[], locale: string, config?: I18nConfig): T[];
+
+export { type AlternateLink, I18nConfig, Locale, type MergedLocaleConfig, UITranslations, filterPostsByLocale, formatDate, formatDateShort, getAlternateLinks, getContentPathPrefix, getLocaleByCode, getLocaleConfig, getLocaleFromPath, getLocalePrefix, getLocalizedPath, getTextDirection, isMultiLanguageEnabled, isRTL, removeLocalePrefix, t };

package/dist/utils/i18n.js

@@ -0,0 +1,49 @@
+import {
+  filterPostsByLocale,
+  formatDate,
+  formatDateShort,
+  getAlternateLinks,
+  getContentPathPrefix,
+  getLocaleByCode,
+  getLocaleConfig,
+  getLocaleFromPath,
+  getLocalePrefix,
+  getLocalizedPath,
+  getTextDirection,
+  isMultiLanguageEnabled,
+  isRTL,
+  removeLocalePrefix,
+  t
+} from "../chunk-Z3O3JK56.js";
+import "../chunk-DAH2XP4W.js";
+import {
+  builtInTranslations,
+  defaultI18nConfig,
+  defineI18nConfig,
+  enTranslations,
+  getUITranslations,
+  zhCNTranslations
+} from "../chunk-A2E2VSAQ.js";
+export {
+  builtInTranslations,
+  defaultI18nConfig,
+  defineI18nConfig,
+  enTranslations,
+  filterPostsByLocale,
+  formatDate,
+  formatDateShort,
+  getAlternateLinks,
+  getContentPathPrefix,
+  getLocaleByCode,
+  getLocaleConfig,
+  getLocaleFromPath,
+  getLocalePrefix,
+  getLocalizedPath,
+  getTextDirection,
+  getUITranslations,
+  isMultiLanguageEnabled,
+  isRTL,
+  removeLocalePrefix,
+  t,
+  zhCNTranslations
+};

package/dist/utils/sidebar.d.ts

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

package/dist/utils/useI18n.d.ts

@@ -0,0 +1,74 @@
+import { ComputedRef } from 'vue';
+import { U as UITranslations, I as I18nConfig } from '../i18n-DYYPTq4o.js';
+export { L as Locale } from '../i18n-DYYPTq4o.js';
+import '../types/index.js';
+import '../sidebar-DNdiCKBw.js';
+
+/**
+ * Vue Composable for i18n
+ *
+ * Provides i18n support for Vue components in the blog.
+ */
+
+/**
+ * i18n injection keys
+ */
+declare const I18N_LOCALE_KEY: unique symbol;
+declare const I18N_CONFIG_KEY: unique symbol;
+declare const I18N_TRANSLATIONS_KEY: unique symbol;
+/**
+ * i18n context provided to Vue components
+ */
+interface I18nContext {
+    locale: string;
+    translations: UITranslations;
+    config?: I18nConfig;
+}
+/**
+ * Return type of useI18n composable
+ */
+interface UseI18nReturn {
+    /** Current locale code */
+    locale: ComputedRef<string>;
+    /** Translation function */
+    t: (key: keyof UITranslations) => string;
+    /** Format date according to locale */
+    formatDate: (date: Date | string, options?: Intl.DateTimeFormatOptions) => string;
+    /** Format date in short format */
+    formatDateShort: (date: Date | string) => string;
+    /** All translations for current locale */
+    translations: ComputedRef<UITranslations>;
+}
+/**
+ * Vue composable for i18n support
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useI18n } from '@jet-w/astro-blog/utils/useI18n';
+ *
+ * const { t, formatDate, locale } = useI18n();
+ * </script>
+ *
+ * <template>
+ *   <h1>{{ t('postList') }}</h1>
+ *   <span>{{ formatDate(post.pubDate) }}</span>
+ * </template>
+ * ```
+ */
+declare function useI18n(): UseI18nReturn;
+/**
+ * Create i18n context for providing to Vue components
+ *
+ * @example
+ * ```astro
+ * ---
+ * import { createI18nContext } from '@jet-w/astro-blog/utils/useI18n';
+ * const i18nContext = createI18nContext('en', i18nConfig);
+ * ---
+ * <Component client:load {...i18nContext} />
+ * ```
+ */
+declare function createI18nContext(locale: string, config?: I18nConfig): I18nContext;
+
+export { I18N_CONFIG_KEY, I18N_LOCALE_KEY, I18N_TRANSLATIONS_KEY, I18nConfig, type I18nContext, UITranslations, type UseI18nReturn, createI18nContext, useI18n };

package/dist/utils/useI18n.js

@@ -0,0 +1,15 @@
+import {
+  I18N_CONFIG_KEY,
+  I18N_LOCALE_KEY,
+  I18N_TRANSLATIONS_KEY,
+  createI18nContext,
+  useI18n
+} from "../chunk-PZICDGJG.js";
+import "../chunk-A2E2VSAQ.js";
+export {
+  I18N_CONFIG_KEY,
+  I18N_LOCALE_KEY,
+  I18N_TRANSLATIONS_KEY,
+  createI18nContext,
+  useI18n
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jet-w/astro-blog",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "A modern Astro blog theme with Vue and Tailwind CSS support",
   "type": "module",
   "exports": {
@@ -24,6 +24,14 @@
     "./utils/sidebar": {
       "types": "./dist/utils/sidebar.d.ts",
       "import": "./dist/utils/sidebar.js"
+    },
+    "./utils/i18n": {
+      "types": "./dist/utils/i18n.d.ts",
+      "import": "./dist/utils/i18n.js"
+    },
+    "./utils/useI18n": {
+      "types": "./dist/utils/useI18n.d.ts",
+      "import": "./dist/utils/useI18n.js"
     }
   },
   "files": [

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>