当前位置: 首页 > article >正文

VitePress-13- 配置-title的作用详解

作用描述

1、title 是当前站点的标题;
2、默认值是 :VitePress;
3、当使用默认主题时,会直接展示在 页面的【导航条】中;
4、一个特殊的作用 : 会作为单个页面的默认标题后缀!除非又指定了【titleTemplate】属性;
  ( 单个页面的最终标题将是其第一个 <h1> 标题的文本内容加上的全局 title)。

补充- useData API 的作用

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

案例

项目结构

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

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

配置文件内容

/**
 * 这是整个项目的配置文件
 */
import { defineConfig } from 'vitepress'

export default defineConfig({
  title: "体会自定义的站点标题",
  注意 : 这里没有配置 titleTemplate 属性,因此页面的标题后缀会使用title作为默认的
  ... 其他的项目配置

})

文档内容

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

效果

在这里插入图片描述

至此,title 的作用与效果就展示完毕了。


http://www.kler.cn/a/233588.html

相关文章:

  • 实验一:自建Docker注册中心
  • 安全生产管理的重要性:现状、痛点与改进之路
  • 开源 2 + 1 链动模式、AI 智能名片、S2B2C 商城小程序在用户留存与品牌发展中的应用研究
  • ubuntu cmake CPack将第三方库进行打包
  • Go开发指南-Gin与Web开发
  • sql专题 之 sql的执行顺序
  • 微服务介绍、使用 Nacos 实现远程调用以及 OpenFeign 的使用
  • containerd中文翻译系列(二十)快照器
  • OnlyOffice-8.0版本深度测评
  • 鸿蒙开发系列教程(十四)--组件导航:Tabs 导航
  • codeforces 126B password
  • CSS中的继承是什么?哪些属性可以继承,哪些不能继承?
  • Blazor入门100天 : 自做一个手势滑动组件
  • 计算机视觉 | OpenCV 实现手势虚拟控制亮度和音量
  • 【Python 千题 —— 基础篇】查找年龄
  • C++ static 修饰全局变量时的作用探究
  • ARM PAC/BTI/MTE三剑客精讲与实战
  • 【2024-01-20】 瑞幸咖啡小程序-blackbox
  • 视觉开发板—K210自学笔记(二)
  • centos中docker操作
  • Android性能调优 - 应用安全问题
  • Redis(三)主从架构、Redis哨兵架构、Redis集群方案对比、Redis高可用集群搭建、Redis高可用集群之水平扩展
  • 018 Linux
  • SQL 使用大全
  • 【Linux笔记】动静态库的封装和加载
  • C++ 中->成员访问运算符