CocoClassHelpDocs/components/CustomLayout.vue

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

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

const Layout = DefaultTheme.Layout;

const { lang, localeIndex } = useData();
const { t } = useI18n();
watchEffect(() => {
  i18n.global.locale.value = lang.value;
});
const docsLink = computed(() => {
  return withBase( `/${localeIndex.value === 'root' ? '' : localeIndex.value + '/'}docs` )
})
</script>
<template>
  <Layout>
    <template #nav-bar-content-before>
      <a :href="docsLink" class="content-before">{{ t("帮助中心") }}</a>
    </template>
    <template #nav-bar-content-after>
      <a :href="docsLink" class="content-after">{{ t("CocoClass") }}</a>
    </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;
}
.content-after {
  color: #2e5aa8;
  /* TODO */
}
</style>