VitePress-14- 配置-titleTemplate 的作用详解

作用描述

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 的作用与效果就展示完毕了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/680026.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS 鸿蒙 ArkTS ArkUI 页面之间切换转换动画设置

第一步&#xff1a;导入 import promptAction from ohos.promptAction 第二步&#xff1a;在build下方写入 pageTransition(){PageTransitionEnter({ duration: 1200 }).slide(SlideEffect.Right)PageTransitionExit({ delay: 100 }).translate({ x: 100.0, y: 100.0 }).opac…

统计数字出现次数的数位动态规划解法-数位统计DP

在处理数字问题时,我们经常遇到需要统计一定范围内各个数字出现次数的情况。这类问题虽然看起来简单,但当数字范围较大时,直接遍历统计的方法就变得不再高效。本文将介绍一种利用数位动态规划(DP)的方法来解决这一问题,具体来说,是统计两个整数a和b之间(包含a和b)所有…

ChatGPT在医疗领域的革命性应用与挑战

ChatGPT的进入医疗领域&#xff0c;正预示着技术与医学的深度融合&#xff0c;为医疗保健行业带来前所未有的变革。本文将探讨ChatGPT在医疗领域中的潜在好处与面临的挑战。 医疗文档工作繁琐且易出错&#xff0c;ChatGPT的自动化文档处理功能&#xff0c;有望减轻医疗保健专业…

掌握Go的加密技术:crypto/rsa库的高效使用指南

掌握Go的加密技术&#xff1a;crypto/rsa库的高效使用指南 引言crypto/rsa 库概览RSA 加密算法基本原理crypto/rsa 库的功能和应用 安装和基本设置在 Go 项目中引入 crypto/rsa 库基本环境设置和配置 密钥生成与管理生成 RSA 密钥对密钥存储和管理 加密和解密操作使用 RSA 加密…

代码随想录算法训练营第五十天|518. 零钱兑换Ⅱ

518. 零钱兑换Ⅱ 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 思路 本题相当于求装满容量为amount的背包有多少种方法&#xff0c;又由于零钱可以重复使用&#xff0c;属于完全背包的题型。将01背包完全装满的思路在494. 目…

【Redis快速入门】初识Redis、Redis安装、图形化界面

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️…

【Java程序设计】【C00259】基于Springboot的人事管理系统(有论文)

基于Springboot的人事管理系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的人事管理系统 本系统分为管理员功能模块以及员工功能模块。 管理员功能模块&#xff1a;管理员登录系统后&#xff0c;可以对首页&a…

【PTA|期末复习|编程题】数组相关编程题(二)

目录 7-1 数组元素循环右移问题(20分) 输入格式: 输出格式: 输入样例: 输出样例: 代码 7-2 找出不是两个数组共有的元素(20分) 输入格式: 输出格式: 输入样例: 输出样例: 代码 7-3 方阵循环右移(20分) 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&…

在vscode 中配置 pyside6 环境

在vscode中编写pyside环境配置 start 记录一下在 vscode 中编写 pyside6 程序&#xff0c;环境如何配置。 前提 请自行安装好 python。请自行安装好 vscode。安装 vscode 插件 Python&#xff0c;PYQT Integration。 配置环境 1.借助 pip 安装我们的pyside6 pip install…

Python@setter用法介绍

Pythonsetter是Python编程语言中的一个关键属性&#xff0c;它简化了Python开发者的编程过程&#xff0c;提高了编程效率。 一、Pythonsetter是什么 Pythonsetter是Python语言中的一个属性&#xff0c;它允许程序员设置Python中的类成员变量。在Python中&#xff0c;属性&…

【PowerShell】修改Windows网络配置的常用命令

PowerShell&#xff08;PS&#xff09;是一种强大的任务自动化和管理框架&#xff0c;具有丰富的命令和语法&#xff0c;可以用于编写脚本来管理Windows操作系统和其他应用程序。它的开放式架构和跨平台支持使得它成为一个灵活和可扩展的工具。 在网络配置方面&#xff0c;Powe…

python - 模块使用详解

前言 Python有非常强大的第三方库&#xff0c;也有非常多的内置模块帮助开发人员实现某些功能&#xff0c;无需开发人员自己造轮子。本文介绍Python的模块。 什么是模块 模块简单来说就是一系列功能的集合体&#xff0c;如果将程序的开发比喻成拼图&#xff0c;模块就是各种…

PHP特性知识点总结

如果想观感更好看到图片,可以去我的gitbook或者github去看 github:https://github.com/kakaandhanhan/cybersecurity_knowledge_book-gitbook.22kaka.fun gitbook:http://22kaka.fun description: 专门出的关于php的特性比较,后面好像也有java的特性。 🏀 PHP特性知识点…

【开源】JAVA+Vue.js实现森林火灾预警系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 系统基础模块2.3 烟雾传感器模块2.4 温度传感器模块2.5 历史记录模块2.6 园区数据模块 三、系统设计3.1 用例设计3.1.1 森林园区基础系统用例设计3.1.2 森林预警数据用例设计 3.2 数据库设计3.2.1 烟雾…

如果把vue组件动态添加到body上?

tools.js: import Vue from vue/*** param Component 组件实例的选项对象* param props 组件实例中的prop*/ export function create(Component, props) {const comp new (Vue.extend(Component))({ propsData: props }).$mount()document.body.appendChild(comp.$el)comp.re…

中国电子学会2019年12月份青少年软件编程Scratch图形化等级考试试卷三级真题(选择题、判断题)

一、单选题(共 25 题&#xff0c;每题 2 分&#xff0c;共 50 分) 1.怎样修改图章的颜色&#xff1f;&#xff08; &#xff09; A. 只需要一个数字来设置颜色 B. 设置 RGB 的值 C. 在画笔中设置颜色、饱和度、亮度 D. 在外观中设置或修改角色颜色特效 2.以下程序的执…

用code去探索理解Llama架构的简单又实用的方法

除了白月光我们也需要朱砂痣 我最近也在反思&#xff0c;可能有时候算法和论文也不是每个读者都爱看&#xff0c;我也会在今后的文章中加点code或者debug模型的内容&#xff0c;也许还有一些好玩的应用demo&#xff0c;会提升这部分在文章类型中的比例 今天带着大家通过代码角度…

数据库管理-第149期 Oracle Vector DB AI-01(20240210)

数据库管理149期 2024-02-10 数据库管理-第149期 Oracle Vector DB & AI-01&#xff08;20240210&#xff09;1 机器学习2 向量3 向量嵌入4 向量检索5 向量数据库5 专用向量数据库的问题总结 数据库管理-第149期 Oracle Vector DB & AI-01&#xff08;20240210&#xf…

每日五道java面试题之java基础篇(六)

第一题&#xff1a;Java 创建对象有哪⼏种⽅式&#xff1f; Java 中有以下四种创建对象的⽅式: new 创建新对象通过反射机制采⽤ clone 机制通过序列化机制 前两者都需要显式地调⽤构造⽅法。对于 clone 机制,需要注意浅拷⻉和深拷⻉的区别&#xff0c;对于序列化机制需要明…

2.3 Binance_interface APP 现货行情-实时行情

Binance_interface APP 现货行情-实时行情 Github地址PyTed量化交易研究院 目录 Binance_interface APP 现货行情-实时行情1. APP 现货行情-实时行情函数总览2. 模型实例化3. 获取一个产品的最优挂单 get_bookTicker4. 获取全部产品的最优挂单&#xff08;列表格式&#xff09…