作用描述

1、titleTemplate 是标题的后缀；

2、可以自定义标题的后缀；

3、可以自定义整个的标题以及后缀，语法如下：
titleTemplate: ':title 链接符号 自己定义的后缀'
【:title】：从页面的第一个 <h1> 标题推断出的文本

4、可以给 titleTemplate 指定值为 false，表示取消标题的后缀。

补充- useData API 的作用

简单理解 ： 这个方法可以获取到页面相关的一些数据。
本文会通过这个方法进行 title 标题效果的一个验证。

案例

项目结构

为了更好的理解项目，下面只展示相关的内容。

projectName| -- .vitepress     # 项目配置相关的目录| -- config.mts # 项目的配置文件| -- helloworld.md  # 本文用到的文档

情境一 ： 常规的自定义标题后缀

配置文件内容

/*** 这是整个项目的配置文件*/
import { defineConfig } from 'vitepress'export default defineConfig({title: "体会自定义的站点标题",titleTemplate:'自己定义的页面标题的后缀',... 其他的项目配置})

文档内容

	# 站点配置 - titleTemplate 属性的作用站点的标题是 ：{{ title }}<script setup>import { useData } from 'vitepress'const { title }= useData()</script>

效果

情景二 ：完整的自定义标题与后缀

配置文件内容

/*** 这是整个项目的配置文件*/
import { defineConfig } from 'vitepress'export default defineConfig({title: "体会自定义的站点标题",titleTemplate:':title xxx+++ 自己定义的页面标题的后缀2',... 其他的项目配置})

文档内容

	# 站点配置 - titleTemplate 属性的作用2站点的标题是 ：{{ title }}<script setup>import { useData } from 'vitepress'const { title }= useData()</script>

效果

情景三 ：取消标题后缀

配置文件内容

/*** 这是整个项目的配置文件*/
import { defineConfig } from 'vitepress'export default defineConfig({title: "体会自定义的站点标题",titleTemplate:false,... 其他的项目配置})

文档内容

	# 站点配置 - titleTemplate 属性的作用3站点的标题是 ：{{ title }}<script setup>import { useData } from 'vitepress'const { title }= useData()</script>

效果

至此，titleTemplate 的作用与效果就展示完毕了。