CocoClassHelpDocs/components/CustomLayout.vue

<script setup lang="ts">
import { watchEffect } from "vue";

import DefaultTheme from "vitepress/theme";
import { useI18n } from "vue-i18n";
import { useData } from "vitepress";
import i18n from "@/plugins/i18n";

const Layout = DefaultTheme.Layout;

const { lang } = useData();
const { t } = useI18n();
watchEffect(() => {
  i18n.global.locale.value = lang.value;
});
</script>
<template>
  <Layout>
    <template #nav-bar-content-before>
      <div class="content-before">{{ t("帮助中心") }}</div>
    </template>
  </Layout>
</template>
<i18n locale="zh-HK">
{
  "帮助中心": "幫助中心"
}
</i18n>
<style scoped>
.content-before {
  color: #2e5aa8;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-left: 14px;
}
</style>