refactor: refactor article list component and routing logic, optimize multilingual article display

src/components/Footer.astro

@@ -9,9 +9,9 @@ const { class: className } = Astro.props
 const { author } = themeConfig.site
 const {
   startYear,
-  linkA: { name: linkAName, url: linkAUrl },
-  linkB: { name: linkBName, url: linkBUrl },
-  linkC: { name: linkCName, url: linkCUrl },
+  linkA: { name: nameA, url: urlA },
+  linkB: { name: nameB, url: urlB },
+  linkC: { name: nameC, url: urlC },
 } = themeConfig.footer
 
 const currentYear = new Date().getFullYear()
@@ -27,13 +27,15 @@ const year = Number(startYear) === currentYear
   ]}
 >
   <p>
-    <a class="hover:(c-primary transition-colors)" href={linkAUrl}>{linkAName}</a> /
-    <a class="hover:(c-primary transition-colors)" href={linkBUrl}>{linkBName}</a> /
-    <a class="hover:(c-primary transition-colors)" href={linkCUrl}>{linkCName}</a>
+    <a class="hover:(c-primary transition-colors)" href={urlA}>{nameA}</a> /
+    <a class="hover:(c-primary transition-colors)" href={urlB}>{nameB}</a> /
+    <a class="hover:(c-primary transition-colors)" href={urlC}>{nameC}</a>
   </p>
+
   <p>
     Powered by <a class="hover:(c-primary transition-colors)" href="https://astro.build/">Astro</a> and <a class="hover:(c-primary transition-colors)" href="https://github.com/radishzzz/astro-theme-retypeset">Retypeset</a>
   </p>
+  
   <p>
     © {year} {author}
   </p>

src/components/MainHeader.astro

@@ -19,7 +19,7 @@ const marginBottom = {
   lg="fixed"
 >
   <h1 class={`${marginBottom} text-8 c-primary font-bold font-title lg:text-9`}>
-    <!-- Fix text cut issue on ios by adding a div tag -->
+    <!-- Fix text cropping issues during view transition on ios by adding a div tag -->
     <div
       class="box-content inline-block pr-1.25"
       transition:name="site-title"
@@ -28,7 +28,7 @@ const marginBottom = {
       <a href={getLocalizedPath('/')}>
         {title}
       </a>
-      </div>
+    </div>
   </h1>
 
   {subtitle && (

src/components/MobileHeader.astro

@@ -16,7 +16,7 @@ const marginBottom = {
 
 <header class="mb-10.625 lg:hidden">
   <h3 class={`${marginBottom} mt-2.9375 text-5.375 c-secondary font-bold font-title`}>
-    <!-- Fix text cut issue on ios by adding a div tag -->
+    <!-- Fix text cropping issues during view transition on ios by adding a div tag -->
     <div
       class="box-content inline-block pr-1.25"
       transition:name="site-title"

src/components/Navbar.astro

@@ -9,7 +9,29 @@ const currentUI = ui[currentLang as keyof typeof ui]
 
 const isPostActive = isHome || isPost
 const isTagActive = isTag
-const isAboutActive = isAbout;
+const isAboutActive = isAbout
+
+function getNavItemClass(isActive: boolean) {
+  return isActive ? 'font-bold c-primary' : 'hover:c-primary hover:font-bold'
+}
+
+const navItems = [
+  {
+    href: '/',
+    label: currentUI.posts,
+    className: getNavItemClass(isPostActive),
+  },
+  {
+    href: '/tags/',
+    label: currentUI.tags,
+    className: getNavItemClass(isTagActive),
+  },
+  {
+    href: '/about/',
+    label: currentUI.about,
+    className: getNavItemClass(isAboutActive),
+  },
+]
 ---
 
 <nav
@@ -17,41 +39,15 @@ const isAboutActive = isAbout;
   lg="fixed bottom-40 text-4 leading-9.72"
 >
   <ul>
-    <li>
-      <a
-        href={getLocalizedPath('/')}
-        class:list={[
-          isPostActive
-            ? 'font-bold c-primary'
-            : 'hover:c-primary hover:font-bold',
-        ]}
-      >
-        {currentUI.posts}
-      </a>
-    </li>
-    <li>
-      <a
-        href={getLocalizedPath('/tags')}
-        class:list={[
-          isTagActive
-            ? 'font-bold c-primary'
-            : 'hover:c-primary hover:font-bold',
-        ]}
-      >
-        {currentUI.tags}
-      </a>
-    </li>
-    <li>
-      <a
-        href={getLocalizedPath('/about')}
-        class:list={[
-          isAboutActive
-            ? 'font-bold c-primary'
-            : 'hover:c-primary hover:font-bold',
-        ]}
-      >
-        {currentUI.about}
-      </a>
-    </li>
+    {navItems.map(item => (
+      <li>
+        <a
+          href={getLocalizedPath(item.href)}
+          class={item.className}
+        >
+          {item.label}
+        </a>
+      </li>
+    ))}
   </ul>
 </nav>

src/components/PostList.astro

@@ -5,6 +5,7 @@ interface Post {
     title: string
     abbrlink?: string
     published: Date
+    lang?: string
   }
   slug?: string
   remarkPluginFrontmatter?: {
@@ -13,11 +14,19 @@ interface Post {
 }
 
 // Receive posts parameter passed from outside
-const { posts } = Astro.props
+const { posts, lang: pageLang } = Astro.props
 
 // Declare the type of props
 export interface Props {
   posts: Post[]
+  lang?: string
+}
+
+// 构建正确的链接路径
+function getPostUrl(post: Post) {
+  const postPath = post.data.abbrlink || post.slug
+  // 如果是在语言文件夹下的页面，添加语言前缀
+  return pageLang ? `/${pageLang}/posts/${postPath}/` : `/posts/${postPath}/`
 }
 ---
 <ul>
@@ -27,7 +36,7 @@ export interface Props {
 
       <a
         class="hover:c-primary"
-        href={`/posts/${post.data.abbrlink || post.slug}/`}
+        href={getPostUrl(post)}
         transition:name={`post-${post.data.abbrlink || post.slug}`}
         data-disable-transition-on-theme
       >