@jet-w/astro-blog 0.1.6 → 0.2.1

package/src/components/blog/RelatedPosts.astro

@@ -6,9 +6,25 @@ export interface Props {
     tags?: string[];
     categories?: string[];
   };
+  ui?: {
+    relatedPosts?: string;
+    readMore?: string;
+    minuteRead?: string;
+    postList?: string;
+  };
+  localePrefix?: string;
 }
 
-const { currentPost } = Astro.props;
+const {
+  currentPost,
+  ui = {
+    relatedPosts: '相关文章',
+    readMore: '阅读更多',
+    minuteRead: '分钟',
+    postList: '查看更多文章',
+  },
+  localePrefix = '',
+} = Astro.props;
 
 // 模拟获取相关文章
 const allPosts = [
@@ -83,14 +99,14 @@ const formattedDate = (date: Date) => new Intl.DateTimeFormat('zh-CN', {
 {relatedPosts.length > 0 && (
   <section class="mt-16">
     <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
-      相关文章
+      {ui.relatedPosts}
     </h2>
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
       {relatedPosts.map((post) => (
         <article class="group">
           <a
-            href={`/posts/${post.slug}`}
+            href={`${localePrefix}/posts/${post.slug}`}
             class="card hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 block h-full"
           >
             <div class="flex flex-col h-full">
@@ -100,7 +116,7 @@ const formattedDate = (date: Date) => new Intl.DateTimeFormat('zh-CN', {
                   {formattedDate(post.pubDate)}
                 </time>
                 {post.readingTime && (
-                  <span>{post.readingTime}分钟</span>
+                  <span>{post.readingTime} {ui.minuteRead}</span>
                 )}
               </div>
 
@@ -132,7 +148,7 @@ const formattedDate = (date: Date) => new Intl.DateTimeFormat('zh-CN', {
 
               <!-- 阅读链接 -->
               <div class="flex items-center text-primary-500 group-hover:text-primary-600 transition-colors text-sm font-medium">
-                <span>阅读更多</span>
+                <span>{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>
@@ -146,10 +162,10 @@ const formattedDate = (date: Date) => new Intl.DateTimeFormat('zh-CN', {
     <!-- 查看更多按钮 -->
     <div class="text-center mt-8">
       <a
-        href="/posts"
+        href={`${localePrefix}/posts`}
         class="btn-secondary inline-flex items-center space-x-2"
       >
-        <span>查看更多文章</span>
+        <span>{ui.postList}</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>

package/src/components/blog/TableOfContents.astro

@@ -5,15 +5,21 @@ export interface Props {
     text: string;
     id: string;
   }>;
+  tocTitle?: string;
+  progressTitle?: string;
 }
 
-const { headings } = Astro.props;
+const {
+  headings,
+  tocTitle = 'Table of Contents',
+  progressTitle = 'Reading Progress',
+} = Astro.props;
 ---
 
 {headings.length > 0 && (
-  <nav class="sticky top-20 p-6" aria-label="目录">
+  <nav class="sticky top-20 p-6" aria-label={tocTitle}>
     <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4 border-b border-slate-200 dark:border-slate-700 pb-2">
-      目录
+      {tocTitle}
     </h3>
 
     <ol class="space-y-2 text-sm">
@@ -38,7 +44,7 @@ const { headings } = Astro.props;
 
     <!-- 进度指示器 -->
     <div class="mt-8 pt-4 border-t border-slate-200 dark:border-slate-700">
-      <div class="text-xs text-slate-500 dark:text-slate-400 mb-2">阅读进度</div>
+      <div class="text-xs text-slate-500 dark:text-slate-400 mb-2">{progressTitle}</div>
       <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2">
         <div class="bg-primary-500 h-2 rounded-full transition-all duration-300" id="reading-progress" style="width: 0%"></div>
       </div>

package/src/components/blog/TagCloud.astro

@@ -7,9 +7,10 @@ export interface Props {
   }>;
   maxSize?: number;
   minSize?: number;
+  localePrefix?: string;
 }
 
-const { tags, maxSize = 2.5, minSize = 0.8 } = Astro.props;
+const { tags, maxSize = 2.5, minSize = 0.8, localePrefix = '' } = Astro.props;
 
 // 计算字体大小
 const maxCount = Math.max(...tags.map(tag => tag.count));
@@ -48,10 +49,10 @@ const shuffledTags = [...tags].sort(() => Math.random() - 0.5);
   <div class="flex flex-wrap items-center justify-center gap-3 leading-relaxed">
     {shuffledTags.map((tag, index) => (
       <a
-        href={`/tags/${tag.slug}`}
+        href={`${localePrefix}/tags/${tag.slug}`}
         class={`inline-block font-medium transition-all duration-300 hover:scale-110 ${getColorClass(index)}`}
         style={`font-size: ${getFontSize(tag.count)}rem`}
-        title={`${tag.name} (${tag.count} 篇文章)`}
+        title={`${tag.name} (${tag.count})`}
       >
         {tag.name}
       </a>

package/src/components/home/FeaturedPostsSection.astro

@@ -4,19 +4,33 @@
  */
 import PostCard from '../../components/blog/PostCard.astro';
 import { getCollection } from 'astro:content';
+import type { I18nConfig } from '../../config/i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
+import { getLocaleFromPath, getLocaleConfig, getLocalePrefix, filterPostsByLocale } from '../../utils/i18n';
 
 export interface Props {
   count?: number;
+  i18nConfig?: I18nConfig;
 }
 
-const { count = 3 } = Astro.props;
+const { count = 3, 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;
+const localePrefix = getLocalePrefix(currentLocale, i18nConfig);
 
 const allPosts = await getCollection('posts');
 const publishedPosts = allPosts
   .filter(post => !post.data.draft)
   .sort((a, b) => (b.data.pubDate?.getTime() ?? 0) - (a.data.pubDate?.getTime() ?? 0));
 
-const featuredPosts = publishedPosts.slice(0, count).map(post => ({
+// Filter posts by current locale
+const localePosts = filterPostsByLocale(publishedPosts, currentLocale, i18nConfig);
+
+const featuredPosts = localePosts.slice(0, count).map(post => ({
   slug: post.id.toLowerCase(),
   title: post.data.title,
   description: post.data.description,
@@ -26,19 +40,21 @@ const featuredPosts = publishedPosts.slice(0, count).map(post => ({
   author: post.data.author,
   readingTime: 5
 }));
+
+const postsUrl = `${localePrefix}/posts`;
 ---
 
 {featuredPosts.length > 0 && (
   <section class="mb-16">
     <div class="flex items-center justify-between mb-8">
       <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
-        特色文章
+        {ui.posts}
       </h2>
       <a
-        href="/posts"
+        href={postsUrl}
         class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium text-sm flex items-center space-x-1 transition-colors"
       >
-        <span>查看全部</span>
+        <span>{ui.allPosts}</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>
@@ -47,7 +63,7 @@ const featuredPosts = publishedPosts.slice(0, count).map(post => ({
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
       {featuredPosts.map((post) => (
-        <PostCard post={post} featured={true} />
+        <PostCard post={post} featured={true} localePrefix={localePrefix} locale={localeConfig.locale.dateLocale} ui={ui} />
       ))}
     </div>
   </section>

package/src/components/home/QuickNavSection.astro

@@ -4,10 +4,29 @@
  */
 import NavigationTabs from '../../components/blog/NavigationTabs.vue';
 import { getCollection } from 'astro:content';
+import type { I18nConfig } from '../../config/i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
+import { getLocaleFromPath, getLocaleConfig, getLocalePrefix, filterPostsByLocale } from '../../utils/i18n';
 
-const allPosts = await getCollection('posts');
-const publishedPosts = allPosts
-  .filter(post => !post.data.draft)
+interface Props {
+  i18nConfig?: I18nConfig;
+}
+
+const { i18nConfig = virtualI18nConfig || defaultI18nConfig } = Astro.props;
+
+// Get current locale and translations
+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);
+
+// Filter posts by locale
+const localePosts = filterPostsByLocale(allPosts, currentLocale, i18nConfig);
+
+const publishedPosts = localePosts
   .sort((a, b) => (b.data.pubDate?.getTime() ?? 0) - (a.data.pubDate?.getTime() ?? 0));
 
 const posts = publishedPosts.map(post => ({
@@ -68,7 +87,7 @@ const timelineData = posts.slice(0, 10).map(post => ({
 <section class="mb-16">
   <div class="flex items-center justify-between mb-8">
     <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
-      快速导航
+      {ui.quickNavigation}
     </h2>
   </div>
   <NavigationTabs
@@ -77,5 +96,15 @@ const timelineData = posts.slice(0, 10).map(post => ({
     archives={archivesData}
     categories={categoriesData}
     timeline={timelineData}
+    localePrefix={localePrefix}
+    dateLocale={localeConfig.locale?.dateLocale || currentLocale}
+    ui={{
+      tags: ui.tags,
+      archives: ui.archives,
+      categories: ui.categories,
+      timeline: ui.timeline,
+      viewAllTimeline: ui.viewAllTimeline,
+      postsCount: ui.postsCount,
+    }}
   />
 </section>

package/src/components/home/RecentPostsSection.astro

@@ -4,19 +4,33 @@
  */
 import PostCard from '../../components/blog/PostCard.astro';
 import { getCollection } from 'astro:content';
+import type { I18nConfig } from '../../config/i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
+import { getLocaleFromPath, getLocaleConfig, getLocalePrefix, filterPostsByLocale } from '../../utils/i18n';
 
 export interface Props {
   count?: number;
+  i18nConfig?: I18nConfig;
 }
 
-const { count = 6 } = Astro.props;
+const { count = 6, 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;
+const localePrefix = getLocalePrefix(currentLocale, i18nConfig);
 
 const allPosts = await getCollection('posts');
 const publishedPosts = allPosts
   .filter(post => !post.data.draft)
   .sort((a, b) => (b.data.pubDate?.getTime() ?? 0) - (a.data.pubDate?.getTime() ?? 0));
 
-const recentPosts = publishedPosts.slice(0, count).map(post => ({
+// Filter posts by current locale
+const localePosts = filterPostsByLocale(publishedPosts, currentLocale, i18nConfig);
+
+const recentPosts = localePosts.slice(0, count).map(post => ({
   slug: post.id.toLowerCase(),
   title: post.data.title,
   description: post.data.description,
@@ -26,18 +40,20 @@ const recentPosts = publishedPosts.slice(0, count).map(post => ({
   author: post.data.author,
   readingTime: 5
 }));
+
+const postsUrl = `${localePrefix}/posts`;
 ---
 
 <section class="mb-16">
   <div class="flex items-center justify-between mb-8">
     <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
-      最新文章
+      {ui.recentPosts}
     </h2>
     <a
-      href="/posts"
+      href={postsUrl}
       class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium text-sm flex items-center space-x-1 transition-colors"
     >
-      <span>查看全部</span>
+      <span>{ui.allPosts}</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>
@@ -46,7 +62,7 @@ const recentPosts = publishedPosts.slice(0, count).map(post => ({
 
   <div class="space-y-6">
     {recentPosts.map((post) => (
-      <PostCard post={post} layout="horizontal" />
+      <PostCard post={post} layout="horizontal" localePrefix={localePrefix} />
     ))}
   </div>
 </section>

package/src/components/home/StatsSection.astro

@@ -3,13 +3,31 @@
  * 首页统计信息组件
  */
 import { getCollection } from 'astro:content';
+import type { I18nConfig } from '../../config/i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
+import { getLocaleFromPath, getLocaleConfig, filterPostsByLocale } 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;
 
 const allPosts = await getCollection('posts');
 const publishedPosts = allPosts.filter(post => !post.data.draft);
 
-const totalPosts = publishedPosts.length;
-const allTags = new Set(publishedPosts.flatMap(post => post.data.tags || []));
-const allCategories = new Set(publishedPosts.flatMap(post => post.data.categories || []));
+// Filter posts by current locale
+const localePosts = filterPostsByLocale(publishedPosts, currentLocale, i18nConfig);
+
+const totalPosts = localePosts.length;
+const allTags = new Set(localePosts.flatMap(post => post.data.tags || []));
+const allCategories = new Set(localePosts.flatMap(post => post.data.categories || []));
 const totalTags = allTags.size;
 const totalCategories = allCategories.size;
 ---
@@ -21,7 +39,7 @@ const totalCategories = allCategories.size;
         {totalPosts}
       </div>
       <div class="text-sm text-slate-600 dark:text-slate-400">
-        文章总数
+        {ui.posts}
       </div>
     </div>
     <div class="card text-center">
@@ -29,7 +47,7 @@ const totalCategories = allCategories.size;
         {totalTags}
       </div>
       <div class="text-sm text-slate-600 dark:text-slate-400">
-        标签数量
+        {ui.tags}
       </div>
     </div>
     <div class="card text-center">
@@ -37,7 +55,7 @@ const totalCategories = allCategories.size;
         {totalCategories}
       </div>
       <div class="text-sm text-slate-600 dark:text-slate-400">
-        分类数量
+        {ui.categories}
       </div>
     </div>
   </div>

package/src/components/layout/Footer.astro

@@ -1,5 +1,22 @@
 ---
 import { siteConfig, footerConfig, defaultIcons } from '@jet-w/astro-blog/config';
+import type { I18nConfig } from '../../config/i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { getLocaleFromPath, getLocaleConfig, getLocalePrefix } from '../../utils/i18n';
+
+export interface Props {
+  i18nConfig?: I18nConfig;
+}
+
+const { i18nConfig = defaultI18nConfig } = Astro.props;
+
+const currentLocale = getLocaleFromPath(Astro.url.pathname, i18nConfig);
+const localeConfig = getLocaleConfig(currentLocale, i18nConfig);
+const ui = localeConfig.ui;
+
+// Use locale-specific configs
+const localeSiteConfig = localeConfig.site;
+const localeFooterConfig = localeConfig.footer;
 
 const currentYear = new Date().getFullYear();
 
@@ -7,43 +24,44 @@ function getIcon(link: { type: string; icon?: string }): string {
   return link.icon || defaultIcons[link.type] || '';
 }
 
-// 替换版权信息中的占位符
-const copyright = footerConfig.copyright
+// Get locale prefix for RSS link
+const localePrefix = getLocalePrefix(currentLocale, i18nConfig);
+const rssUrl = localeFooterConfig.rssUrl || footerConfig.rssUrl || `${localePrefix}/rss.xml`;
+
+const copyright = (localeFooterConfig.copyright || footerConfig.copyright)
   .replace('{year}', String(currentYear))
-  .replace('{author}', siteConfig.author);
+  .replace('{author}', localeSiteConfig.author || siteConfig.author);
 ---
 
 <footer class="bg-slate-50 dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 mt-auto w-full min-w-0">
   <div class="container mx-auto px-4 py-6">
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-      <!-- 站点信息 -->
       <div>
         <div class="flex items-center space-x-3 mb-3">
-          {siteConfig.avatar && (
+          {(localeSiteConfig.avatar || siteConfig.avatar) && (
             <img
-              src={siteConfig.avatar}
-              alt={siteConfig.title}
+              src={localeSiteConfig.avatar || siteConfig.avatar}
+              alt={localeSiteConfig.title || siteConfig.title}
               class="w-8 h-8 rounded-full"
             />
           )}
           <div>
             <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100">
-              {siteConfig.title}
+              {localeSiteConfig.title || siteConfig.title}
             </h3>
             <p class="text-xs text-slate-600 dark:text-slate-400">
-              {siteConfig.description}
+              {localeSiteConfig.description || siteConfig.description}
             </p>
           </div>
         </div>
       </div>
 
-      <!-- 快速链接 -->
       <div>
         <h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-3">
-          {footerConfig.quickLinksTitle}
+          {localeFooterConfig.quickLinksTitle || footerConfig.quickLinksTitle || ui.quickLinks}
         </h4>
         <div class="flex flex-wrap gap-x-4 gap-y-1">
-          {footerConfig.quickLinks.map((item) => (
+          {(localeFooterConfig.quickLinks || footerConfig.quickLinks).map((item) => (
             <a
               href={item.href}
               class="text-sm text-slate-600 dark:text-slate-400 hover:text-primary-500 transition-colors"
@@ -54,13 +72,12 @@ const copyright = footerConfig.copyright
         </div>
       </div>
 
-      <!-- 社交链接 -->
       <div>
         <h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-3">
-          {footerConfig.contactTitle}
+          {localeFooterConfig.contactTitle || footerConfig.contactTitle || ui.contact}
         </h4>
         <div class="flex space-x-4">
-          {footerConfig.socialLinks.map((link) => (
+          {(localeFooterConfig.socialLinks || footerConfig.socialLinks).map((link) => (
             <a
               href={link.url}
               target={link.type === 'email' ? undefined : '_blank'}
@@ -74,11 +91,11 @@ const copyright = footerConfig.copyright
             </a>
           ))}
 
-          {footerConfig.showRss && (
+          {(localeFooterConfig.showRss ?? footerConfig.showRss) && (
             <a
-              href={footerConfig.rssUrl}
+              href={rssUrl}
               class="text-slate-600 dark:text-slate-400 hover:text-primary-500 transition-colors"
-              aria-label="RSS订阅"
+              aria-label={ui.rssFeed}
             >
               <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                 <path d="M3.429 2.486c9.36 0 16.943 7.583 16.943 16.943h-3.257c0-7.563-6.123-13.686-13.686-13.686V2.486zM3.429 9.114c5.647 0 10.229 4.581 10.229 10.229h-3.257c0-3.844-3.128-6.972-6.972-6.972V9.114zM6.686 16.486c0 1.8-1.457 3.257-3.257 3.257S0.172 18.286 0.172 16.486s1.457-3.257 3.257-3.257 3.257 1.457 3.257 3.257z"/>
@@ -89,12 +106,11 @@ const copyright = footerConfig.copyright
       </div>
     </div>
 
-    <!-- 版权信息 -->
     <div class="border-t border-slate-200 dark:border-slate-700 pt-4 mt-6">
       <div class="flex flex-col sm:flex-row justify-between items-center text-sm text-slate-600 dark:text-slate-400">
         <p>{copyright}</p>
         <p class="mt-2 sm:mt-0">
-          Powered by <a href={footerConfig.poweredBy.url} class="link" target="_blank" rel="noopener noreferrer">{footerConfig.poweredBy.text}</a>
+          Powered by <a href={(localeFooterConfig.poweredBy || footerConfig.poweredBy).url} class="link" target="_blank" rel="noopener noreferrer">{(localeFooterConfig.poweredBy || footerConfig.poweredBy).text}</a>
         </p>
       </div>
     </div>

package/src/components/layout/Header.astro

@@ -3,37 +3,72 @@ import { siteConfig } from '@jet-w/astro-blog/config';
 import ThemeToggle from '../ui/ThemeToggle.vue';
 import SearchBox from '../ui/SearchBox.vue';
 import MobileMenu from '../ui/MobileMenu.vue';
+import LanguageSwitcher from '../ui/LanguageSwitcher.vue';
+import type { I18nConfig } from '../../config/i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { i18nConfig as virtualI18nConfig } from 'virtual:astro-blog-i18n';
+import {
+  getLocaleFromPath,
+  getLocaleConfig,
+  removeLocalePrefix,
+  isMultiLanguageEnabled,
+} from '../../utils/i18n';
+
+export interface Props {
+  i18nConfig?: I18nConfig;
+}
+
+const { i18nConfig = virtualI18nConfig || defaultI18nConfig } = Astro.props;
 
 const currentPath = Astro.url.pathname;
+const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
+const localeConfig = getLocaleConfig(currentLocale, i18nConfig);
+const ui = localeConfig.ui;
+
+// Use locale-specific site config and menu
+const localeSiteConfig = localeConfig.site;
+const menu = localeConfig.menu;
+
+// Get base path without locale prefix for language switcher
+const basePath = removeLocalePrefix(currentPath, i18nConfig);
+
+// Check if multi-language is enabled
+const showLanguageSwitcher = isMultiLanguageEnabled(i18nConfig);
+
+// Prepare locales for language switcher
+const localesForSwitcher = i18nConfig.locales.map(l => ({
+  code: l.code,
+  name: l.name,
+}));
 ---
 
 <header class="sticky top-0 z-50 bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-b border-slate-200 dark:border-slate-700">
   <div class="container mx-auto px-4">
     <nav class="flex items-center justify-between h-16">
-      <!-- Logo 和站点名称 -->
       <div class="flex items-center space-x-4">
         <a href="/" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
-          {siteConfig.avatar && (
+          {(localeSiteConfig.avatar || siteConfig.avatar) && (
             <img
-              src={siteConfig.avatar}
-              alt={siteConfig.title}
+              src={localeSiteConfig.avatar || siteConfig.avatar}
+              alt={localeSiteConfig.title || siteConfig.title}
               class="w-8 h-8 rounded-full"
             />
           )}
           <div class="hidden sm:block">
             <h1 class="text-xl font-bold text-slate-900 dark:text-slate-100">
-              {siteConfig.title}
+              {localeSiteConfig.title ?? siteConfig.title}
             </h1>
-            <p class="text-xs text-slate-600 dark:text-slate-400 -mt-1">
-              技术博客
-            </p>
+            {(localeSiteConfig.description ?? siteConfig.description) && (
+              <p class="text-xs text-slate-600 dark:text-slate-400 -mt-1">
+                {localeSiteConfig.description ?? siteConfig.description}
+              </p>
+            )}
           </div>
         </a>
       </div>
 
-      <!-- 桌面端导航 -->
       <div class="hidden md:flex items-center space-x-8">
-        {siteConfig.menu.map((item) => (
+        {menu.map((item) => (
           <a
             href={item.href}
             class={`text-sm font-medium transition-colors hover:text-primary-500 ${
@@ -47,22 +82,45 @@ const currentPath = Astro.url.pathname;
         ))}
       </div>
 
-      <!-- 右侧功能区 -->
       <div class="flex items-center">
-        <!-- 搜索框 -->
         <div class="hidden sm:block mr-2">
-          <SearchBox client:load />
+          <SearchBox
+            client:load
+            placeholder={ui.searchPlaceholder}
+            searchLabel={ui.search}
+            noResultsText={ui.noResults}
+          />
         </div>
 
+        {showLanguageSwitcher && (
+          <div class="hidden sm:block mr-2">
+            <LanguageSwitcher
+              client:load
+              locales={localesForSwitcher}
+              currentLocale={currentLocale}
+              currentPath={basePath}
+              defaultLocale={i18nConfig.defaultLocale}
+              prefixDefaultLocale={i18nConfig.routing.prefixDefaultLocale}
+            />
+          </div>
+        )}
+
         <div class="hidden sm:block mr-2">
-          <!-- 主题切换 -->
           <ThemeToggle client:load />
         </div>
-        <!-- 移动端菜单 -->
+
         <div class="md:hidden">
-          <MobileMenu client:load navigation={siteConfig.menu} />
+          <MobileMenu
+            client:load
+            navigation={menu}
+            locales={showLanguageSwitcher ? localesForSwitcher : []}
+            currentLocale={currentLocale}
+            currentPath={basePath}
+            defaultLocale={i18nConfig.defaultLocale}
+            prefixDefaultLocale={i18nConfig.routing.prefixDefaultLocale}
+          />
         </div>
       </div>
     </nav>
   </div>
-</header>
+</header>