在vitepress中使用vue组建,然后引入到markdown

在 VitePress 中,每个 Markdown 文件都被编译成 HTML,而且将其作为 Vue 单文件组件处理。这意味着可以在 Markdown 中使用任何 Vue 功能,包括动态模板、使用 Vue 组件或通过添加 <script> 标签为页面的 Vue 组件添加逻辑。

值得注意的是,VitePress 利用 Vue 的编译器自动检测和优化 Markdown 内容的纯静态部分。静态内容被优化为单个占位符节点,并从页面的 JavaScript 负载中删除以供初始访问。在客户端激活期间也会跳过它们。简而言之,只需注意任何给定页面上的动态部分。

使用组件​

可以直接在 Markdown 文件中导入和使用 Vue 组件。

在 Markdown 中导入组件​

如果一个组件只被几个页面使用,建议在使用它们的地方显式导入它们。这使它们可以正确地进行代码拆分,并且仅在显示相关页面时才加载:

<script setup>
import CustomComponent from '../../components/CustomComponent.vue'
</script># DocsThis is a .md using a custom component<CustomComponent />## More docs...

注册全局组件​

如果一个组件要在大多数页面上使用,可以通过自定义 Vue 实例来全局注册它们。有关示例,请参见扩展默认主题中的相关部分。

重要

确保自定义组件的名称包含连字符或采用 PascalCase。否则,它将被视为内联元素并包裹在 <p> 标签内,这将导致激活不匹配,因为 <p> 不允许将块元素放置在其中。

在标题中使用组件 ⚡​

可以在标题中使用 Vue 组件,但请注意以下语法之间的区别:

Markdown输出的 HTML被解析的标题
 # text <Tag/> 
<h1>text <Tag/></h1>text
 # text `<Tag/>` 
<h1>text <code>&lt;Tag/&gt;</code></h1>text <Tag/>

被 <code> 包裹的 HTML 将按原样显示,只有未包裹的 HTML 才会被 Vue 解析。

输出 HTML 由 Markdown-it 完成,而解析的标题由 VitePress 处理 (并用于侧边栏和文档标题)。

转义​

可以通过使用 v-pre 指令将它们包裹在 <span> 或其他元素中来转义 Vue 插值:

输入

This <span v-pre>{{ will be displayed as-is }}</span>

输出

This {{ will be displayed as-is }}

也可以将整个段落包装在 v-pre 自定义容器中:

::: v-pre
{{ This will be displayed as-is }}`
:::

输出

{{ This will be displayed as-is }}

代码块中不转义​

默认情况下,代码块是受到保护的,都会自动使用 v-pre 包装,因此内部不会处理任何 Vue 语法。要在代码块内启用 Vue 插值语法,可以在代码语言后附加 -vue 后缀,例如 js-vue

输入

```js-vue
Hello {{ 1 + 1 }}
```

输出

Hello 2

请注意,这可能会让某些字符不能正确地进行语法高亮显示。

使用 CSS 预处理器​

VitePress 内置支持 CSS 预处理器:.scss.sass、.less.styl 和 .stylus 文件。无需为它们安装 Vite 专用插件,但必须安装相应的预处理器:

# .scss and .sass
npm install -D sass# .less
npm install -D less# .styl and .stylus
npm install -D stylus

然后可以在 Markdown 和主题组件中使用以下内容:

<style lang="sass">
.titlefont-size: 20px
</style>

使用 teleport 传递组件内容​

VitePress 目前只有使用 teleport 传送到 body 的 SSG 支持。对于其他地方,可以将它们包裹在内置的 <ClientOnly> 组件中,或者通过 postRender 钩子将 teleport 标签注入到最终页面 HTML 中的正确位置。

<ClientOnly><Teleport to="#modal"><div>// ...</div></Teleport>
</ClientOnly>

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

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

相关文章

Jupyter Notebook 常用命令(自用)

最近有点忘记了一些常见命令&#xff0c;这里就记录一下&#xff0c;懒得找了。 文章目录 一、文件操作命令1. %cd 工作目录2. %pwd 显示路径3. !ls 列出文件4. !cp 复制文件5. !mv 移动或重命名6. !rm 删除 二、代码调试1. %time 时间2. %timeit 平均时长3. %debug 调试4. %ru…

Java面试黄金宝典12

1. 什么是 Java 类加载机制 定义 Java 类加载机制是 Java 程序运行时的关键环节&#xff0c;其作用是把类的字节码文件&#xff08;.class 文件&#xff09;加载到 Java 虚拟机&#xff08;JVM&#xff09;中&#xff0c;并且将字节码文件转化为 JVM 能够识别的类对象。整个类…

第十四章:模板实例化_《C++ Templates》notes

模板实例化 核心知识点解析多选题设计题关键点总结 核心知识点解析 两阶段查找&#xff08;Two-Phase Lookup&#xff09; 原理&#xff1a; 模板在编译时分两个阶段处理&#xff1a; 第一阶段&#xff08;定义时&#xff09;&#xff1a;检查模板语法和非依赖名称&#xff0…

LSM-Tree(Log-Structured Merge-Tree)详解

1. 什么是 LSM-Tree? LSM-Tree(Log-Structured Merge-Tree)是一种 针对写优化的存储结构,广泛用于 NoSQL 数据库(如 LevelDB、RocksDB、HBase、Cassandra)等系统。 它的核心思想是: 写入时只追加写(Append-Only),将数据先写入内存缓冲区(MemTable)。内存数据满后…

LangChain组件Tools/Toolkits详解(6)——特殊类型注解Annotations

LangChain组件Tools/Toolkits详解(6)——特殊类型注解Annotations 本篇摘要14. LangChain组件Tools/Toolkits详解14.6 特殊类型注解Annotations14.6.1 特殊类型注解分类14.6.1 InjectedToolArg构建运行时绑定值工具14.6.3 查看并传入参数14.6.4 在运行时注入参数14.6.5 其它特…

openharmony中hilog实证记录说明(3.1和5.0版本)

每次用这个工具hilog都有一些小用法记不清&#xff0c;需要花一些时间去查去分析使用方法&#xff0c;为了给丰富多彩的生活留出更多的时间&#xff0c;所以汇总整理共享来了&#xff0c;它来了它来了~~~~~~~~~ 开始是想通过3.1来汇总的&#xff0c;但实际测试发现openharmony…

NVIDIA nvmath-python:高性能数学库的Python接口

NVIDIA nvmath-python&#xff1a;高性能数学库的Python接口 NVIDIA nvmath-python是一个高性能数学库的Python绑定&#xff0c;它为Python开发者提供了访问NVIDIA优化数学算法的能力。这个库特别适合需要高性能计算的科学计算、机器学习和数据分析应用。 文章目录 NVIDIA nv…

【euclid】20 2D包围盒模块(box2d.rs)

box2d.rs文件定义了一个二维轴对齐矩形&#xff08;Box2D&#xff09;&#xff0c;使用最小和最大坐标来表示。矩形在坐标类型&#xff08;T&#xff09;和单位&#xff08;U&#xff09;上是泛型的。代码提供了多种方法来操作和查询矩形&#xff0c;包括求交集、并集、平移、缩…

ChatTTS 开源文本转语音模型本地部署 API 使用和搭建 WebUI 界面

ChatTTS&#xff08;Chat Text To Speech&#xff09;&#xff0c;专为对话场景设计的文本生成语音(TTS)模型&#xff0c;适用于大型语言模型(LLM)助手的对话任务&#xff0c;以及诸如对话式音频和视频介绍等应用。支持中文和英文&#xff0c;还可以穿插笑声、说话间的停顿、以…

链表相关知识总结

1、数据结构 基本概念&#xff1a; 数据项&#xff1a;一个数据元素可以由若干个数据项组成数据对象&#xff1a;有相同性质的数据元素的集合&#xff0c;是数据的子集数据结构&#xff1a;是相互之间存在一种或多种特定关系的数据元素的集合 逻辑结构和物理结构&#xff1a…

蓝桥杯备考-》单词接龙

很明显&#xff0c;这道题是可以用DFS来做的&#xff0c;我们直接暴力搜索&#xff0c;但是这里有很多点是我们需要注意的。 1.我们如何确定两个单词能接上&#xff1f; 比如touch和choose 应该合成为touchoose 就是这样两个单词&#xff0c;我们让一个指针指着第一个字符串…

C语言-访问者模式详解与实践

C语言访问者模式详解与实践 - 传感器数据处理系统 1. 什么是访问者模式&#xff1f; 在嵌入式系统中&#xff0c;我们经常需要对不同传感器的数据进行多种处理&#xff0c;如数据校准、过滤、存储等。访问者模式允许我们在不修改传感器代码的情况下&#xff0c;添加新的数据处…

(UI自动化测试web端)第二篇:元素定位的方法_xpath路径定位

1、第一种xpath路径定位&#xff1a; 绝对路径&#xff1a;表达式是以 /html开头&#xff0c;元素的层级之间是以 / 分隔相同层级的元素可以使用下标&#xff0c;下标是从1开始的需要列出元素所经过的所有层级元素&#xff0c;工作当中一般不使用绝对路径 例&#xff1a;/html/…

设置GeoJSONVectorTileLayer中的line填充图片

设置GeoJSONVectorTileLayer中的line填充图片 关键&#xff1a;linePatternFile const style [{filter: true,renderPlugin: {dataConfig: {type: "line",},type: "line",},symbol: {linePatternFile: "http://examples.maptalks.com/resources/pat…

electron框架(4.0)electron-builde和electron Forge的打包方式

----使用electron-builder打包&#xff08;需要魔法&#xff09; --安装electron-builder: npm install electron-builder -D--package.json中进行相关配置&#xff1a; {"name": "video-tools","version": "1.0.0","main&quo…

让 MGR 不从 Primary 的节点克隆数据?

问题 MGR 中&#xff0c;新节点在加入时&#xff0c;为了与组内其它节点的数据保持一致&#xff0c;它会首先经历一个分布式恢复阶段。在这个阶段&#xff0c;新节点会随机选择组内一个节点&#xff08;Donor&#xff09;来同步差异数据。 在 MySQL 8.0.17 之前&#xff0c;同…

第三十二篇 深入解析Kimball维度建模:构建企业级数据仓库的完整框架

目录 一、维度建模设计原则深度剖析1.1 业务过程驱动设计1.2 星型模式VS雪花模式 二、维度建模五步法实战&#xff08;附完整案例&#xff09;2.1 业务需求映射2.2 模型详细设计2.3 缓慢变化维处理 三、高级建模技术解析3.1 渐变维度桥接表3.2 快照事实表设计 四、性能优化体系…

IntelliJ IDEA 中 Maven 的 `pom.xml` 变灰带横线?一文详解解决方法

前言 在使用 IntelliJ IDEA 进行 Java 开发时&#xff0c;如果你发现项目的 pom.xml 文件突然变成灰色并带有删除线&#xff0c;这可能是 Maven 的配置或项目结构出现了问题。 一、问题现象与原因分析 现象描述 文件变灰&#xff1a;pom.xml 在项目资源管理器中显示为灰色。…

缓存过期时间之逻辑过期

1. 物理不过期&#xff08;Physical Non-Expiration&#xff09; 定义&#xff1a;在Redis中不设置EXPIRE时间&#xff0c;缓存键永久存在&#xff08;除非主动删除或内存淘汰&#xff09;。目的&#xff1a;彻底规避因缓存自动过期导致的击穿&#xff08;单热点失效&#xff…

基于WebAssembly的浏览器密码套件

目录 一、前言二、WebAssembly与浏览器密码套件2.1 WebAssembly技术概述2.2 浏览器密码套件的需求三、系统设计思路与架构3.1 核心模块3.2 系统整体架构图四、核心数学公式与算法证明4.1 AES-GCM加解密公式4.2 SHA-256哈希函数五、异步任务调度与GPU加速设计5.1 异步任务调度5.…