VitePress-05-文档中标题表toc的使用

说明

本文介绍一下标题表的使用。

什么是标题表

所谓的标题表,就是 当前文档的所有标题的一个集合,就是当前文档的一个快速索引
它和标题锚点的作用类似,可以快速的定位到某个标题。

标题表的使用语法

标题表的语法是固定的 :[[toc]]
只要写上,就会展示出当前文档中标题列表

注意 :
默认情况下,标题表只会展示第二级第三级 的标题,
如果想修改这个配置,请阅读下一小结。

标题表的自定义配置

vitepress 的配置中提供了对 markdown 的自定义配置的功能,
针对 标题表 toc 同样也提供了自定义配置的入口。
本小结主要介绍 标题表的层级的配置,使标题表支持 第一级第二级第三级 标题。

配置很简单,只需要在 vitepress 的配置文件中添加如下配置即可:

import { defineConfig } from 'vitepress'
export default defineConfig({
// 对 markdown 的配置
 markdown:{
   toc: {
     level: [1,2,3], // 指定标题的层级
   }
 }
})

使用案例

文档内容


[[toc]]

# 一级标题-01
> hello world for vitepress

# 一级标题-02
> hello world for vitepress - 02

## 2.1 二级标题-01
> hello toc 

### 2.1.1 第一个三级标题
> hello 

#### 这是个四级标题,不会被展示
> 这个四级标题不会被展示

### 2.1.2 第二个三级标题
> hello 

## 2.2 二级标题-02

效果展示

在这里插入图片描述

数据治理是确保数据准确性、可靠性、安全性、可用性和完整性的体系和框架。它定义了组织内部如何使用、存储、保护和共享数据的规则和流程。数据治理的重要性随着数字化转型的加速而日益凸显,它能够提高决策效率、增强业务竞争力、降低风险,并促进业务创新。有效的数据治理体系可以确保数据在采集、存储、处理、共享和保护等环节的合规性和有效性。 数据质量管理是数据治理的关键环节,它涉及数据质量评估、数据清洗、标准化和监控。高质量的数据能够提升业务决策的准确性,优化业务流程,并挖掘潜在的商业价值。随着大数据和人工智能技术的发展,数据质量管理在确保数据准确性和可靠性方面的作用愈发重要。企业需要建立完善的数据质量管理和校验机制,并通过数据清洗和标准化提高数据质量。 数据安全与隐私保护是数据治理的另一个重要领域。随着数据量的快速增长和互联网技术的迅速发展,数据安全与隐私保护面临前所未有的挑战。企业需要加强数据安全与隐私保护的法律法规和技术手段,采用数据加密、脱敏和备份恢复等技术手段,以及加强培训和教育,提高安全意识和技能水平。 数据流程管理与监控是确保数据质量、提高数据利用率、保护数据安全的重要环节。有效的数据流程管理可以确保数据流程的合规性和高效性,而实时监控则有助于及时发现并解决潜在问题。企业需要设计合理的数据流程架构,制定详细的数据管理流程规范,并运用数据审计和可视化技术手段进行监控。 数据资产管理是将数据视为组织的重要资产,通过有效的管理和利用,为组织带来经济价值。数据资产管理涵盖数据的整个生命周期,包括数据的创建、存储、处理、共享、使用和保护。它面临的挑战包括数据量的快速增长、数据类型的多样化和数据更新的迅速性。组织需要建立完善的数据管理体系,提高数据处理和分析能力,以应对这些挑战。同时,数据资产的分类与评估、共享与使用规范也是数据资产管理的重要组成部分,需要制定合理的标准和规范,确保数据共享的安全性和隐私保护,以及建立合理的利益分配和权益保障机制。
在 Vue 使用 Markdown 渲染文档时,如果文档内容比较长,我们需要为用户提供侧边栏目录导航,方便用户快速定位到所需部分。下面是一个简单的方法来实现自动生成 Markdown 文档的侧边栏目录。 首先,我们需要安装 `markdown-it` 和 `markdown-it-toc`: ```bash npm install markdown-it markdown-it-toc --save ``` 然后,在 Vue 组件引入并使用它们: ```javascript <template> <div> <!-- 目录导航 --> <div v-html="toc"></div> <!-- Markdown 内容 --> <div v-html="html"></div> </div> </template> <script> import MarkdownIt from 'markdown-it' import MarkdownItToc from 'markdown-it-toc' export default { data() { return { markdown: '# 一级标题\n\n## 二级标题\n\n### 三级标题', toc: '', // 目录导航 html: '', // 渲染后的 HTML } }, mounted() { // 解析 Markdown 文档 const md = new MarkdownIt() md.use(MarkdownItToc, { tocFirstLevel: 1 }) const result = md.render(this.markdown) // 生成目录导航 this.toc = md.toc // 渲染 Markdown 内容 this.html = result }, } </script> ``` 在上面的代码,我们使用了 `markdown-it-toc` 插件来自动生成目录导航,并将导航内容存储在 `toc` 变量。然后,我们使用 `v-html` 指令将导航和 Markdown 文档内容渲染到页面上。 注意,`markdown-it-toc` 插件需要在解析 Markdown 文档之前使用 `md.use(MarkdownItToc)` 方法来注册。在注册时,我们可以设置 `tocFirstLevel` 属性来指定目录导航的起始层级,默认为 `1`。 最后,我们需要使用 CSS 样式来美化目录导航和 Markdown 内容,以便更好地展示给用户。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值