refactor: use for useValaxyI18n

demo/custom/valaxy-theme-custom/components/StarterArticle.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import { tObject, useFrontmatter, usePostList } from 'valaxy'
+import { useFrontmatter, usePostList, useValaxyI18n } from 'valaxy'
 import { computed } from 'vue'
-
-import { useI18n } from 'vue-i18n'
-
 import { useRoute } from 'vue-router'
 
 const frontmatter = useFrontmatter()
@@ -11,10 +8,12 @@ const frontmatter = useFrontmatter()
 const route = useRoute()
 const posts = usePostList()
 
+const { $tO } = useValaxyI18n()
+
 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>
@@ -34,7 +33,7 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
           md:text-5xl md:leading-14
         "
       >
-        {{ tObject(frontmatter.title || '', locale) }}
+        {{ $tO(frontmatter.title) }}
       </h1>
     </header>
 
@@ -69,7 +68,7 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
           </h2>
           <div class="link">
             <RouterLink :to="nextPost.path">
-              {{ tObject(nextPost.title || '', locale) }}
+              {{ $tO(nextPost.title) }}
             </RouterLink>
           </div>
         </div>
@@ -79,7 +78,7 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
           </h2>
           <div class="link">
             <RouterLink :to="prevPost.path">
-              {{ tObject(prevPost.title || '', locale) }}
+              {{ $tO(prevPost.title) }}
             </RouterLink>
           </div>
         </div>

demo/custom/valaxy-theme-custom/components/StarterArticleCard.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
-import { tObject } from 'valaxy'
-import { useI18n } from 'vue-i18n'
+import { useValaxyI18n } from 'valaxy'
 
 defineProps<{
   post: Post
 }>()
-const { locale } = useI18n()
+const { $tO } = useValaxyI18n()
 </script>
 
 <template>
@@ -16,7 +15,7 @@ const { locale } = useI18n()
       <div class="space-y-6">
         <h2 class="text-2xl leading-8 font-bold tracking-tight">
           <RouterLink class="st-text" :to="post.path || ''">
-            {{ tObject(post.title || '', locale) }}
+            {{ $tO(post.title) }}
           </RouterLink>
         </h2>
         <div

packages/devtools/src/client/components/VDPostListItem.vue

@@ -4,6 +4,8 @@ import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { tObject } from '../../../../valaxy/shared'
 import { activePath, devtoolsRouter } from '../composables/app'
 import { clientPageData } from '../stores/app'
 import { openInEditor } from '../utils'
@@ -12,6 +14,8 @@ const props = defineProps<{
   post: ClientPageData
 }>()
 
+const { locale } = useI18n()
+
 dayjs.extend(relativeTime)
 
 function onClickPost(post: ClientPageData) {
@@ -45,7 +49,7 @@ const active = computed(() => {
         class="inline-flex flex-grow cursor-pointer truncate"
         @click="onClickPost(post)"
       >
-        {{ post.frontmatter.title }}
+        {{ tObject(post.frontmatter.title || '', locale) }}
       </span>
 
       <div class="text-xs">

packages/valaxy-theme-press/components/PressArticle.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { tObject, useFrontmatter, useSiteStore } from 'valaxy'
+import { useFrontmatter, useSiteStore, useValaxyI18n } from 'valaxy'
 import { computed } from 'vue'
 
-import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
 const frontmatter = useFrontmatter()
@@ -17,8 +16,8 @@ function findCurrentIndex() {
 const nextPost = computed(() => site.postList[findCurrentIndex() - 1])
 const prevPost = computed(() => site.postList[findCurrentIndex() + 1])
 
-const { locale } = useI18n()
-const $title = computed(() => tObject(frontmatter.value.title || '', locale.value))
+const { $tO } = useValaxyI18n()
+const $title = computed(() => $tO(frontmatter.value.title))
 </script>
 
 <template>
@@ -70,7 +69,7 @@ const $title = computed(() => tObject(frontmatter.value.title || '', locale.valu
           </h2>
           <div class="link">
             <RouterLink :to="nextPost.href">
-              {{ tObject(nextPost.title || '', locale) }}
+              {{ $tO(nextPost.title) }}
             </RouterLink>
           </div>
         </div>
@@ -80,7 +79,7 @@ const $title = computed(() => tObject(frontmatter.value.title || '', locale.valu
           </h2>
           <div class="link">
             <RouterLink :to="prevPost.href">
-              {{ tObject(prevPost.title || '', locale) }}
+              {{ $tO(prevPost.title) }}
             </RouterLink>
           </div>
         </div>

packages/valaxy-theme-press/components/PressArticleCard.vue

@@ -1,13 +1,12 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
-import { tObject } from 'valaxy'
-import { useI18n } from 'vue-i18n'
+import { useValaxyI18n } from 'valaxy'
 
 defineProps<{
   post: Post
 }>()
 
-const { locale } = useI18n()
+const { $tO } = useValaxyI18n()
 </script>
 
 <template>
@@ -17,7 +16,7 @@ const { locale } = useI18n()
       <div class="space-y-6">
         <h2 class="text-2xl leading-8 font-bold tracking-tight">
           <RouterLink class="text-gray-900" :to="post.path || ''">
-            {{ tObject(post.title || '', locale) }}
+            {{ $tO(post.title) }}
           </RouterLink>
         </h2>
         <div

packages/valaxy-theme-press/components/PressCategory.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Category, Post } from 'valaxy'
-import { isCategoryList, tObject } from 'valaxy'
+import type { Category } from 'valaxy'
+import { isCategoryList, useValaxyI18n } from 'valaxy'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -19,12 +19,8 @@ const props = withDefaults(defineProps<{
 })
 
 const collapsable = ref(props.collapsable)
-const { t, locale } = useI18n()
-
-function getTitle(post: Post | any) {
-  const lang = locale.value
-  return tObject(post.title || '', lang)
-}
+const { t } = useI18n()
+const { $tO } = useValaxyI18n()
 </script>
 
 <template>
@@ -58,7 +54,7 @@ function getTitle(post: Post | any) {
           v-if="categoryItem.title" :to="categoryItem.path || ''"
           class="inline-flex items-center"
         >
-          <span class="text ml-1" text="sm">{{ getTitle(categoryItem) }}</span>
+          <span class="text ml-1" text="sm">{{ $tO(categoryItem.title) }}</span>
         </RouterLink>
       </template>
 

packages/valaxy-theme-press/components/ValaxyMain.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
-import { onClickHref, onContentUpdated, scrollTo, tObject, useFrontmatter, useLayout, useSidebar, useSiteConfig } from 'valaxy'
+import { onClickHref, onContentUpdated, scrollTo, useFrontmatter, useLayout, useSidebar, useSiteConfig, useValaxyI18n } from 'valaxy'
 import { computed, nextTick } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { targetPadding } from '../client'
 
@@ -18,8 +17,8 @@ const { hasSidebar } = useSidebar()
 const isHome = useLayout('home')
 const layout = useLayout()
 
-const { locale } = useI18n()
-const $title = computed(() => tObject(frontmatter.value.title || '', locale.value))
+const { $tO } = useValaxyI18n()
+const $title = computed(() => $tO(frontmatter.value.title))
 
 const route = useRoute()
 const router = useRouter()

packages/valaxy-theme-yun/components/YunCategoryChildItem.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import type { Post } from 'valaxy'
-import { isCategoryList, tObject } from 'valaxy'
+import { isCategoryList, useValaxyI18n } from 'valaxy'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
 defineProps<{
@@ -14,10 +12,8 @@ defineProps<{
 /**
  * i18n
  */
-const { locale } = useI18n()
-function getTitle(post: Post | any) {
-  return tObject(post.title || '', locale.value)
-}
+const { $tO } = useValaxyI18n()
+
 const route = useRoute()
 const categoryList = computed(() => {
   const c = (route.query.category as string) || ''
@@ -42,7 +38,7 @@ const categoryList = computed(() => {
       hover="bg-black/5"
     >
       <div i-ri-file-text-line />
-      <span font="serif black">{{ getTitle(categoryItem) }}</span>
+      <span class="st-text">{{ $tO(categoryItem.title) }}</span>
     </RouterLink>
   </template>
 </template>

packages/valaxy-theme-yun/components/YunPostCard.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
-import { tObject } from 'valaxy'
+import { useValaxyI18n } from 'valaxy'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { usePostProperty } from '../composables'
@@ -9,7 +9,8 @@ const props = defineProps<{
   post: Post
 }>()
 
-const { t, locale } = useI18n()
+const { t } = useI18n()
+const { $tO } = useValaxyI18n()
 
 const { icon, styles, color } = usePostProperty(props.post.type)
 
@@ -20,10 +21,6 @@ const postTitleClass = computed(() => {
   }
   return props.post.postTitleClass || gradientClasses.value
 })
-
-const postTitle = computed(() => {
-  return tObject(props.post.title || '', locale.value)
-})
 </script>
 
 <template>
@@ -56,7 +53,7 @@ const postTitle = computed(() => {
             text="center" font="serif black"
           >
             <div v-if="post.type" class="inline-flex" m="r-1" :class="icon" />
-            <span>{{ postTitle }}</span>
+            <span>{{ $tO(post.title) }}</span>
           </div>
         </AppLink>
 

packages/valaxy-theme-yun/components/YunPostCollapseItem.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import type { Post } from 'valaxy'
 import { useMotion } from '@vueuse/motion'
-import { formatDate, tObject } from 'valaxy'
-import { computed, ref } from 'vue'
-
-import { useI18n } from 'vue-i18n'
+import { formatDate, useValaxyI18n } from 'valaxy'
+import { ref } from 'vue'
 
 const props = defineProps<{
   i: number
@@ -29,10 +27,7 @@ useMotion(itemRef, {
   },
 })
 
-const { locale } = useI18n()
-const postTitle = computed(() => {
-  return tObject(props.post.title || '', locale.value)
-})
+const { $tO } = useValaxyI18n()
 </script>
 
 <template>
@@ -55,7 +50,7 @@ const postTitle = computed(() => {
       </div>
       <h2 class="post-title w-full" inline-flex items-center font="serif black">
         <RouterLink :to="post.path || ''" class="post-title-link">
-          {{ postTitle }}
+          {{ $tO(post.title) }}
         </RouterLink>
       </h2>
     </header>

packages/valaxy-theme-yun/components/YunSidebarLinks.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import { useValaxyI18n } from 'valaxy'
 import { useThemeConfig } from '../composables'
 
 const themeConfig = useThemeConfig()
+const { $t } = useValaxyI18n()
 </script>
 
 <template>
@@ -9,7 +11,8 @@ const themeConfig = useThemeConfig()
     <AppLink
       v-for="item, i in themeConfig.pages" :key="i"
       class="link-item yun-icon-btn" inline-flex
-      :to="item.url" :title="item.name"
+      :to="item.url"
+      :title="$t(item.name)"
       :style="`color:${item.color}`"
     >
       <div :class="item.icon" class="icon size-6" />

packages/valaxy-theme-yun/components/menu/YunNavMenuTitle.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { tObject, useFrontmatter, useSiteConfig, useValaxyI18n } from 'valaxy'
+import { useFrontmatter, useSiteConfig, useValaxyI18n } from 'valaxy'
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useYunAppStore } from '../../stores'
 
-const { $t, locale } = useValaxyI18n()
+const { $t, $tO } = useValaxyI18n()
 
 const yunApp = useYunAppStore()
 const fm = useFrontmatter()
@@ -63,10 +63,10 @@ function goToLink() {
           class="size-4"
           :class="fm.icon || 'i-ri-article-line'"
         />
-        <span class="truncate"> {{ tObject(fm.title || '', locale) }}</span>
+        <span class="truncate"> {{ $tO(fm.title || '') }}</span>
       </div>
       <span v-if="fm.subtitle" class="font-light op-80">
-        {{ tObject(fm.subtitle || '', locale) }}
+        {{ $tO(fm.subtitle || '') }}
       </span>
     </div>
     <span v-if="showSiteTitle" class="font-light truncate">

packages/valaxy-theme-yun/components/prologue/YunPrologueSquare.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import { useThemeConfig } from '../../composables'
 
 const themeConfig = useThemeConfig()
+const { t } = useI18n()
 
 const showContent = ref(false)
 </script>
@@ -79,7 +82,7 @@ const showContent = ref(false)
         >
           <YunSiteLinkItem
             :page="{
-              name: '博客文章',
+              name: t('menu.posts'),
               icon: 'i-ri-article-line',
               url: '/posts/',
             }"

packages/valaxy-theme-yun/components/site/YunSiteLinkItem.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import type { PageProps } from '../../types'
+import { useValaxyI18n } from 'valaxy'
 import { useYunAppStore } from '../../stores'
 
 defineProps<{
   page: PageProps
 }>()
 
+const { $t } = useValaxyI18n()
+
 const yunApp = useYunAppStore()
 </script>
 
@@ -14,14 +17,15 @@ const yunApp = useYunAppStore()
     class="link-item inline-flex-center gap-2 transition rounded-lg text-xl p-2 md:(text-lg p-2) lg:(text-xl p-3) text-$va-c-text"
     bg="white/5 dark:black/5"
     inline-flex
-    :to="page.url" :title="page.name"
+    :to="page.url"
+    :title="$t(page.name)"
     :style="`color:${page.color}`"
     hover="bg-white/80 dark:bg-black/80"
     @click="yunApp.fullscreenMenu.isOpen = false"
   >
     <div :class="page.icon" class="icon" />
     <span>
-      {{ page.name }}
+      {{ $t(page.name) }}
     </span>
   </AppLink>
 </template>

packages/valaxy-theme-yun/components/theme/nimbo/YunNimboNavMenu.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
-import { useAppStore, useSiteConfig } from 'valaxy'
+import { useAppStore, useSiteConfig, useValaxyI18n } from 'valaxy'
 import { onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import { useThemeConfig } from '../../../composables'
 import { useYunAppStore } from '../../../stores'
 
+const { t } = useI18n()
+const { $t } = useValaxyI18n()
+
 // const app = useAppStore()
 const yunApp = useYunAppStore()
 const siteConfig = useSiteConfig()
@@ -60,7 +64,7 @@ const app = useAppStore()
         <template v-if="yunApp.size.isLg">
           <YunNavMenuItem
             icon="i-ri-article-line" to="/posts/"
-            title="博客文章"
+            :title="t('menu.posts')"
           />
 
           <YunNavMenuItem
@@ -68,7 +72,7 @@ const app = useAppStore()
             :key="i"
             :icon="item.icon"
             :to="item.link"
-            :title="item.text"
+            :title="$t(item.text)"
           />
         </template>
       </div>

packages/valaxy-theme-yun/layouts/post.vue

@@ -2,18 +2,16 @@
 import { defineArticle, useSchemaOrg } from '@unhead/schema-org/vue'
 
 import dayjs from 'dayjs'
-import { tObject, useFrontmatter, useSiteConfig, useValaxyI18n } from 'valaxy'
-import { useI18n } from 'vue-i18n'
+import { useFrontmatter, useSiteConfig, useValaxyI18n } from 'valaxy'
 
 const siteConfig = useSiteConfig()
 const frontmatter = useFrontmatter()
 
-const { locale } = useI18n()
-const { $t } = useValaxyI18n()
+const { $t, $tO } = useValaxyI18n()
 const article: Parameters<typeof defineArticle>[0] = {
   '@type': 'BlogPosting',
-  'headline': tObject(frontmatter.value.title || '', locale.value),
-  'description': tObject(frontmatter.value.description || '', locale.value),
+  'headline': $tO(frontmatter.value.title),
+  'description': $tO(frontmatter.value.description),
   'author': [
     {
       name: $t(siteConfig.value.author.name),

packages/valaxy/client/components/ValaxyCopyright.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { useValaxyI18n } from 'valaxy'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useValaxyI18n } from '../composables'
 import { useSiteConfig } from '../config'
 
 withDefaults(defineProps<{

packages/valaxy/client/composables/app/useValaxyApp.ts

@@ -5,7 +5,6 @@ import { useSeoMeta } from '@unhead/vue'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { tObject } from '../../../shared/utils/i18n'
 import { useFrontmatter, useValaxyHead, useValaxyI18n } from '../../composables'
 
 import { useTimezone } from '../../composables/global'
@@ -20,9 +19,9 @@ export function useValaxyApp() {
   const fm = useFrontmatter()
 
   const { locale } = useI18n()
-  const { $t } = useValaxyI18n()
+  const { $t, $tO } = useValaxyI18n()
 
-  const title = computed(() => tObject(fm.value.title || '', locale.value))
+  const title = computed(() => $tO(fm.value.title))
 
   // seo
   // todo: get first image url from markdown
@@ -35,7 +34,7 @@ export function useValaxyApp() {
     ogLocale: computed(() => locale.value || fm.value.lang || siteConfig.value.lang || 'en'),
     ogLocaleAlternate: computed(() => siteConfig.value.languages.filter(l => l !== locale.value)),
     ogSiteName: computed(() => siteConfig.value.title),
-    ogTitle: computed(() => tObject(fm.value.title || siteConfig.value.title, locale.value)),
+    ogTitle: computed(() => $tO(fm.value.title || siteConfig.value.title)),
     ogImage: computed(() => fm.value.ogImage || fm.value.cover || siteConfig.value.favicon),
     ogType: 'website',
     ogUrl: siteUrl,

packages/valaxy/client/composables/app/useValaxyHead.ts

@@ -1,19 +1,16 @@
 import { useHead } from '@unhead/vue'
 import pkg from 'valaxy/package.json'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import { useFrontmatter, useValaxyI18n } from '../../composables'
 import { useSiteConfig } from '../../config'
-import { tObject } from '../../utils'
 
 export function useValaxyHead() {
-  const { locale } = useI18n()
-  const { $t } = useValaxyI18n()
+  const { $t, $tO } = useValaxyI18n()
 
   const fm = useFrontmatter()
   const siteConfig = useSiteConfig()
-  const $title = computed(() => tObject(fm.value.title || '', locale.value))
+  const $title = computed(() => $tO(fm.value.title))
 
   useHead({
     title: $title,

packages/valaxy/client/composables/locale.ts

@@ -73,14 +73,35 @@ export function useLocaleTitle(fm: Ref<{
 export function useValaxyI18n() {
   const { t, locale } = useI18n()
 
+  /**
+   * translate `$locale:key`
+   * @param key
+   */
+  const $t = (key: string) => {
+    if (key.startsWith(LOCALE_PREFIX)) {
+      return t(key.slice(LOCALE_PREFIX.length))
+    }
+    return key
+  }
+
+  /**
+   * translate object
+   *
+   * {
+   *   "zh-CN": "你好",
+   *   "en": "Hello"
+   * }
+   */
+  const $tO = (data?: string | Record<string, string>) => {
+    return tObject(data || '', locale.value)
+  }
+
   return {
     locale,
-
-    $t: (key: string) => {
-      if (key.startsWith(LOCALE_PREFIX)) {
-        return t(key.slice(LOCALE_PREFIX.length))
-      }
-      return key
-    },
+    /**
+     * vue-i18n t function
+     */
+    $t,
+    $tO,
   }
 }

packages/valaxy/client/locales/en.yml

@@ -25,6 +25,7 @@ menu:
   archives: Archives
   categories: Categories
   tags: Tags
+  posts: Posts
   about: About
   search: Search
 

packages/valaxy/client/locales/zh-CN.yml

@@ -25,6 +25,7 @@ menu:
   archives: 归档
   categories: 分类
   tags: 标签
+  posts: 博客文章
   about: 关于
   search: 搜索