动态网页标题

更新: 11/17/2024 字数: 0 字 时长: 0 分钟

普通动态标题

借助titleTemplate的能力，我们可以自定义 VitePress 的页面标题。

其中:title将替换为从页面的第一个 <h1> 标题推断出的文本。

TIP

此处文件已经过拆包，可查看文件结构一章

config.mts

import {defineConfig} from 'vitepress';
import dynamicTitle from './config/title';

export default defineConfig({
    title: "xxx", 
    titleTemplate: dynamicTitle(), 
});

config/title.ts

export default function dynamicTitle(): string {
    return `你好呀 | :title`;
}

运行中动态标题

titleTemplate 虽然可以动态拼接，但是标题在打包时已经确定了， 所以想要在浏览器动态变化标题，需要操作dom来修改

我们通过 VitePress 路由守卫来动态修改标题。这里我们实现一个按照时间变换的标题demo。

TIP

1. 此处文件已经过拆包，可查看文件结构一章
2. 因为 VitePress 需要兼容SSR，这些代码有可能运行在node环境中，使用Dom的组件我们要动态导入

theme/Layout.vue

<script setup lang="ts">
  import DefaultTheme from 'vitepress/theme';
  const {Layout} = DefaultTheme; 
  import {useRouter} from "vitepress";

  const router = useRouter();

  // 鼠标拖尾、动态标题 start
  if (!import.meta.env.SSR) {
    import('./src').then(module => {
      module.dynamicTitle();
    });
  }
  // 鼠标拖尾、动态标题 end

  // Subscribe to route changes to re-apply medium zoom effect
  router.onAfterRouteChanged = () => {
    if (!import.meta.env.SSR) {
      import('./src').then(module => {
        module.dynamicTitle();
      });
    }
  };
</script>
<template>
  <Layout>
  </Layout>
</template>

theme/src/title.ts

export function dynamicTitle() {
  const hour = new Date().getHours();
  let str: string;
  if (hour < 6) {
    str = "修仙中……";
  } else if (hour < 9) {
    str = "早上好！";
  } else if (hour < 12) {
    str = "上午好！";
  } else if (hour < 14) {
    str = "中午好！";
  } else if (hour < 17) {
    str = "下午好！";
  } else if (hour < 19) {
    str = "傍晚好！";
  } else if (hour < 22) {
    str = "晚上好！";
  } else {
    str = "夜深了，要早点休息哦！";
  }

  document.title = `${str}| ${document.title}`;
}

theme/src/index.ts

export * from './title';