fix: i18n title for themes

YunYouJun · YunYouJun · commit 051e7fcf5064 · 2025-07-12T21:07:12.000+08:00
diff --git a/demo/custom/valaxy-theme-custom/components/StarterArticle.vue b/demo/custom/valaxy-theme-custom/components/StarterArticle.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { useFrontmatter, usePostList } from 'valaxy'
+import { tObject, useFrontmatter, usePostList } from 'valaxy'
 import { computed } from 'vue'
 
+import { useI18n } from 'vue-i18n'
+
 import { useRoute } from 'vue-router'
 
 const frontmatter = useFrontmatter()
@@ -12,7 +14,7 @@ const posts = usePostList()
 function findCurrentIndex() {
   return posts.value.findIndex(p => p.path === route.path)
 }
-
+const { locale } = useI18n()
 const nextPost = computed(() => posts.value[findCurrentIndex() - 1])
 const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
 </script>
@@ -67,7 +69,7 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
           </h2>
           <div class="link">
             <RouterLink :to="nextPost.path">
-              {{ nextPost.title }}
+              {{ tObject(nextPost.title || '', locale) }}
             </RouterLink>
           </div>
         </div>
@@ -77,7 +79,7 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
           </h2>
           <div class="link">
             <RouterLink :to="prevPost.path">
-              {{ prevPost.title }}
+              {{ tObject(prevPost.title || '', locale) }}
             </RouterLink>
           </div>
         </div>
diff --git a/demo/custom/valaxy-theme-custom/components/StarterArticleCard.vue b/demo/custom/valaxy-theme-custom/components/StarterArticleCard.vue
@@ -1,9 +1,12 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
+import { tObject } from 'valaxy'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   post: Post
 }>()
+const { locale } = useI18n()
 </script>
 
 <template>
@@ -13,7 +16,7 @@ defineProps<{
       <div class="space-y-6">
         <h2 class="text-2xl leading-8 font-bold tracking-tight">
           <RouterLink class="st-text" :to="post.path || ''">
-            {{ post.title }}
+            {{ tObject(post.title || '', locale) }}
           </RouterLink>
         </h2>
         <div
diff --git a/packages/valaxy-theme-press/components/PressArticle.vue b/packages/valaxy-theme-press/components/PressArticle.vue
@@ -70,7 +70,7 @@ const $title = computed(() => tObject(frontmatter.value.title || '', locale.valu
           </h2>
           <div class="link">
             <RouterLink :to="nextPost.href">
-              {{ nextPost.title }}
+              {{ tObject(nextPost.title || '', locale) }}
             </RouterLink>
           </div>
         </div>
@@ -80,7 +80,7 @@ const $title = computed(() => tObject(frontmatter.value.title || '', locale.valu
           </h2>
           <div class="link">
             <RouterLink :to="prevPost.href">
-              {{ prevPost.title }}
+              {{ tObject(prevPost.title || '', locale) }}
             </RouterLink>
           </div>
         </div>
diff --git a/packages/valaxy-theme-press/components/PressArticleCard.vue b/packages/valaxy-theme-press/components/PressArticleCard.vue
@@ -1,9 +1,13 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
+import { tObject } from 'valaxy'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   post: Post
 }>()
+
+const { locale } = useI18n()
 </script>
 
 <template>
@@ -13,7 +17,7 @@ defineProps<{
       <div class="space-y-6">
         <h2 class="text-2xl leading-8 font-bold tracking-tight">
           <RouterLink class="text-gray-900" :to="post.path || ''">
-            {{ post.title }}
+            {{ tObject(post.title || '', locale) }}
           </RouterLink>
         </h2>
         <div
diff --git a/packages/valaxy-theme-yun/components/YunPostCard.vue b/packages/valaxy-theme-yun/components/YunPostCard.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
+import { tObject } from 'valaxy'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { usePostProperty } from '../composables'
@@ -8,7 +9,7 @@ const props = defineProps<{
   post: Post
 }>()
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 
 const { icon, styles, color } = usePostProperty(props.post.type)
 
@@ -19,6 +20,10 @@ const postTitleClass = computed(() => {
   }
   return props.post.postTitleClass || gradientClasses.value
 })
+
+const postTitle = computed(() => {
+  return tObject(props.post.title || '', locale.value)
+})
 </script>
 
 <template>
@@ -51,7 +56,7 @@ const postTitleClass = computed(() => {
             text="center" font="serif black"
           >
             <div v-if="post.type" class="inline-flex" m="r-1" :class="icon" />
-            <span>{{ post.title }}</span>
+            <span>{{ postTitle }}</span>
           </div>
         </AppLink>
 
diff --git a/packages/valaxy-theme-yun/components/YunPostCollapseItem.vue b/packages/valaxy-theme-yun/components/YunPostCollapseItem.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { Post } from 'valaxy'
 import { useMotion } from '@vueuse/motion'
-import { formatDate } from 'valaxy'
-import { ref } from 'vue'
+import { formatDate, tObject } from 'valaxy'
+import { computed, ref } from 'vue'
+
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{
   i: number
@@ -26,6 +28,11 @@ useMotion(itemRef, {
     },
   },
 })
+
+const { locale } = useI18n()
+const postTitle = computed(() => {
+  return tObject(props.post.title || '', locale.value)
+})
 </script>
 
 <template>
@@ -48,7 +55,7 @@ useMotion(itemRef, {
       </div>
       <h2 class="post-title w-full" inline-flex items-center font="serif black">
         <RouterLink :to="post.path || ''" class="post-title-link">
-          {{ post.title }}
+          {{ postTitle }}
         </RouterLink>
       </h2>
     </header>
