fix: i18n title for themes

This commit is contained in:
YunYouJun 2025-07-12 21:07:12 +08:00
parent 240e113d26
commit 051e7fcf50
6 changed files with 34 additions and 13 deletions

View File

@ -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>

View File

@ -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

View File

@ -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>

View File

@ -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

View File

@ -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>

View File

@ -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>