fix: dynamic page title with i18n menu config

src/hooks/usePageTitle.ts

@@ -0,0 +1,37 @@
+import { useAppStore } from '@/stores/app'
+import { useMetaStore } from '@/stores/meta'
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+export default function usePageTitle() {
+  const pageTitle = ref()
+  const appStore = useAppStore()
+  const metaStore = useMetaStore()
+  const route = useRoute()
+
+  const updateTitle = (locale?: string | undefined) => {
+    const currentLocale = (locale ?? appStore.locale) === 'cn' ? 'cn' : 'en'
+    const menuName = String(route.name)
+    const routeInfo =
+      appStore.themeConfig.menu.menus[
+        menuName.charAt(0).toUpperCase() + menuName.slice(1)
+      ]
+    pageTitle.value =
+      (routeInfo.i18n && routeInfo.i18n[currentLocale]) || routeInfo.name
+    metaStore.setTitle(pageTitle.value)
+  }
+
+  watch(
+    () => appStore.locale,
+    value => {
+      if (value) {
+        updateTitle(value)
+      }
+    }
+  )
+
+  return {
+    pageTitle,
+    updateTitle
+  }
+}

src/views/About.vue

@@ -1,39 +1,47 @@
 <template>
   <div>
-    <Breadcrumbs :current="t('menu.about')" />
-    <PageContent :post="pageData" />
+    <Breadcrumbs :current="pageTitle" />
+    <PageContent :post="pageData" :title="pageTitle" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, ref } from 'vue'
+import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue'
 import { useArticleStore } from '@/stores/article'
 import { Page } from '@/models/Article.class'
 import PageContent from '@/components/PageContent.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import { useI18n } from 'vue-i18n'
+import usePageTitle from '@/hooks/usePageTitle'
+import { useAppStore } from '@/stores/app'
 
 declare const Prism: any
 
 export default defineComponent({
   name: 'About',
   components: { PageContent, Breadcrumbs },
   setup() {
+    const appStore = useAppStore()
     const articleStore = useArticleStore()
     const pageData = ref(new Page())
     const { t } = useI18n()
+    const { pageTitle, updateTitle } = usePageTitle()
 
     const fetchArticle = async () => {
-      const response = await articleStore.fetchArticle('about')
+      pageData.value = await articleStore.fetchArticle('about')
 
-      pageData.value = response
+      updateTitle()
       await nextTick()
       Prism.highlightAll()
     }
 
     onMounted(fetchArticle)
 
-    return { pageData, t }
+    return {
+      pageTitle,
+      pageData,
+      t
+    }
   }
 })
 </script>

src/views/Archives.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex flex-col">
     <div class="post-header">
-      <Breadcrumbs :current="t('menu.archives')" />
-      <h1 class="post-title text-white uppercase">{{ t('menu.archives') }}</h1>
+      <Breadcrumbs :current="pageTitle" />
+      <h1 class="post-title text-white uppercase">{{ pageTitle }}</h1>
     </div>
     <div
       class="bg-ob-deep-800 px-14 py-16 rounded-2xl shadow-xl block min-h-screen"
@@ -48,7 +48,7 @@
         :pageSize="12"
         :pageTotal="pagination.pageTotal"
         :page="pagination.page"
-        @pageChange="pageChangeHanlder"
+        @pageChange="pageChangeHandler"
       />
     </div>
   </div>
@@ -63,6 +63,7 @@ import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import Paginator from '@/components/Paginator.vue'
 import { useCommonStore } from '@/stores/common'
 import defaultCover from '@/assets/default-cover.jpg'
+import usePageTitle from '@/hooks/usePageTitle'
 
 export default defineComponent({
   name: 'Archives',
@@ -76,16 +77,18 @@ export default defineComponent({
       pageTotal: 0,
       page: 1
     })
+    const { pageTitle, updateTitle } = usePageTitle()
 
-    const fetchData = () => {
-      postStore.fetchArchives(pagination.value.page).then(data => {
-        pagination.value.pageTotal = data.total
-        archives.value = data.data
-      })
+    const fetchData = async () => {
+      const data = await postStore.fetchArchives(pagination.value.page)
+
+      pagination.value.pageTotal = data.total
+      archives.value = data.data
       commonStore.setHeaderImage(defaultCover)
+      updateTitle()
     }
 
-    const pageChangeHanlder = (page: number) => {
+    const pageChangeHandler = (page: number) => {
       pagination.value.page = page
       window.scrollTo({
         top: 0,
@@ -99,7 +102,13 @@ export default defineComponent({
       commonStore.resetHeaderImage()
     })
 
-    return { pageChangeHanlder, pagination, archives, t }
+    return {
+      pageTitle,
+      pageChangeHandler,
+      pagination,
+      archives,
+      t
+    }
   }
 })
 </script>

src/views/Category.vue

@@ -1,24 +1,15 @@
 <template>
   <div class="flex flex-col">
     <div class="post-header">
-      <Breadcrumbs :current="t('menu.categories')" />
+      <Breadcrumbs :current="pageTitle" />
       <h1 class="post-title text-white uppercase">
-        {{ t('menu.categories') }}
+        {{ pageTitle }}
       </h1>
     </div>
     <div class="main-grid">
       <div class="relative">
         <div
-          class="
-            post-html
-            bg-ob-deep-800
-            px-14
-            py-16
-            rounded-2xl
-            shadow-xl
-            block
-            min-h-screen
-          "
+          class="post-html bg-ob-deep-800 px-14 py-16 rounded-2xl shadow-xl block min-h-screen"
         ></div>
       </div>
       <div class="col-span-1">
@@ -32,14 +23,14 @@
 import { defineComponent } from 'vue'
 import { Sidebar } from '@/components/Sidebar'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
-import { useI18n } from 'vue-i18n'
+import usePageTitle from '@/hooks/usePageTitle'
 
 export default defineComponent({
   name: 'Category',
   components: { Sidebar, Breadcrumbs },
   setup() {
-    const { t } = useI18n()
-    return { t }
+    const { pageTitle, updateTitle } = usePageTitle()
+    return { pageTitle }
   }
 })
 </script>

src/views/Links.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <Breadcrumbs :current="t('menu.about')" />
+    <Breadcrumbs :current="pageTitle" />
     <div class="flex flex-col">
       <div class="post-header">
-        <h1 v-if="pageData.title" class="post-title text-white uppercase">
-          {{ pageData.title }}
+        <h1 v-if="pageTitle" class="post-title text-white uppercase">
+          {{ pageTitle }}
         </h1>
         <ob-skeleton
           v-else
@@ -92,7 +92,15 @@
 
 <script lang="ts">
 import '@/styles/prism-aurora-future.css'
-import { Ref, computed, defineComponent, nextTick, onMounted, ref } from 'vue'
+import {
+  Ref,
+  computed,
+  defineComponent,
+  nextTick,
+  onMounted,
+  ref,
+  watch
+} from 'vue'
 import PostStats from '@/components/Post/PostStats.vue'
 import LinkBox from '@/components/Link/LinkBox.vue'
 import LinkCard from '@/components/Link/LinkCard.vue'
@@ -106,6 +114,9 @@ import { useRoute } from 'vue-router'
 import LinkCategoryList from '@/components/Link/LinkCategoryList.vue'
 import LinkList from '@/components/Link/LinkList.vue'
 import Comment from '@/components/Comment.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
+import { useMetaStore } from '@/stores/meta'
+import usePageTitle from '@/hooks/usePageTitle'
 
 interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
   getCommentCount(): void
@@ -123,7 +134,8 @@ export default defineComponent({
     Title,
     LinkCategoryList,
     LinkList,
-    Comment
+    Comment,
+    Breadcrumbs
   },
   setup() {
     const articleStore = useArticleStore()
@@ -134,10 +146,11 @@ export default defineComponent({
     const { t } = useI18n()
     const commentOffset = ref(0)
     const contentEl = ref()
+    const { pageTitle, updateTitle } = usePageTitle()
 
     const fetchArticle = async () => {
       pageData.value = await articleStore.fetchArticle('friends')
-
+      updateTitle(appStore.locale)
       await nextTick()
       postStatsRef.value?.getCommentCount()
       postStatsRef.value?.getPostView()
@@ -167,6 +180,7 @@ export default defineComponent({
       gradientBackground: computed(() => {
         return { background: appStore.themeConfig.theme.header_gradient_css }
       }),
+      pageTitle,
       jumpToComments,
       postStatsRef,
       pageData,

src/views/Tag.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex flex-col">
     <div class="post-header">
-      <Breadcrumbs :current="t('menu.tags')" />
-      <h1 class="post-title text-white uppercase">{{ t('menu.tags') }}</h1>
+      <Breadcrumbs :current="pageTitle" />
+      <h1 class="post-title text-white uppercase">{{ pageTitle }}</h1>
     </div>
     <div class="bg-ob-deep-800 px-14 py-16 rounded-2xl shadow-xl block">
       <TagList>
@@ -39,6 +39,7 @@ import { TagList, TagItem } from '@/components/Tag'
 import { useCommonStore } from '@/stores/common'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import defaultCover from '@/assets/default-cover.jpg'
+import usePageTitle from '@/hooks/usePageTitle'
 
 export default defineComponent({
   name: 'Tag',
@@ -47,9 +48,11 @@ export default defineComponent({
     const commonStore = useCommonStore()
     const { t } = useI18n()
     const tagStore = useTagStore()
+    const { pageTitle, updateTitle } = usePageTitle()
 
     const fetchData = async () => {
-      tagStore.fetchAllTags()
+      await tagStore.fetchAllTags()
+      updateTitle()
       commonStore.setHeaderImage(defaultCover)
     }
 
@@ -59,6 +62,7 @@ export default defineComponent({
     })
 
     return {
+      pageTitle,
       tags: computed(() => {
         if (tagStore.isLoaded && tagStore.tags.length === 0) return null
         return tagStore.tags