网页标题切换 原创

创建

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

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

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

const originTitle = ref(document.title);
const titleTimer = ref<ReturnType<typeof setTimeout>>();
const stopListener = ref<() => void>();

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>