网页标题切换 原创

创建

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

<template>
  <!-- 这是一个功能组件，不渲染任何DOM元素 -->
  <div style="display: none;"></div>
</template>

<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>