网页标题切换 原创

创建

• 在docs\.vitepress\theme\components\目录下创建TitleChange.vue文件，并添加以下代码

<script setup lang="ts">
import { ref, onBeforeUnmount, onMounted } from "vue";
import { useEventListener } from "vitepress-theme-teek";

const props = defineProps({
  hiddenTitle: {
    type: String,
    default: "w(ﾟДﾟ)w 不要走！再看看嘛！",
  },
  returnTitle: {
    type: String,
    default: "♪(^∇^*)欢迎回来！",
  },
});

const originTitle = ref("");
const titleTimer = ref<ReturnType<typeof setTimeout>>();
const stopListener = ref<() => void>();

onMounted(() => {
  originTitle.value = document.title;

  const handleVisibilityChange = () => {
    if (document.hidden) {
      document.title = props.hiddenTitle;
      clearTimeout(titleTimer.value);
    } else {
      document.title = props.returnTitle;
      titleTimer.value = setTimeout(() => {
        document.title = originTitle.value;
      }, 2000);
    }
  };

  stopListener.value = useEventListener(
    document,
    "visibilitychange",
    handleVisibilityChange
  );
});

onBeforeUnmount(() => {
  stopListener.value?.();
  clearTimeout(titleTimer.value);
});
</script>

使用

• 在docs\.vitepress\theme\components\目录下的TeekLayoutProvider.vue引入并使用

<script setup lang="ts" name="TeekLayoutProvider">
// @ts-ignore
import TitleChange from "./TitleChange.vue"; //导入网页标题变化
</script>

<template>
  <Teek.Layout>
    <template #layout-top>
      <!--网页标题切换组件  -->
      <TitleChange />
    </template>
    其他组件...
  </Teek.Layout>
</template>