Shiki24 是一个基于 VitePress 构建的主题，本文专门介绍如何快速安装 Shiki24。

插入视频:: 插入视频:: 插入文档:: 插入文档:: 插入音频:: 插入视频:: Shiki24 提供了非常丰富的功能，但是很多功能默认是不开启的，需要通过配置项来选择开启或者关闭。 所有 Shiki24 配置项不会影响 VitePress 本身的配置，两者是独立生效的。 VitePress 的配置通常添加在 文件中（没有请创建），而为了区分 Shiki24 的配置项，我们需要在 同级创建 文件，即路径为 。 第一个代码块介绍如何添加 Shiki24 配置项，第二个代码块介绍在 VitePress 配置中通过 可以将主题配置合并到 VitePress 配置里，这两步必不可少。 Shiki24

VitePress 使用 来对 Markdown 进行解析和渲染，最终转为 Vue 组件。 是一款功能强大的 Markdown 解析器，支持丰富的 Markdown 语法，能够轻松将 Markdown 文本转换为 HTML 格式，并提供了许多语法扩展和插件。如果希望文章页拓展一些新的功能、UI，那么可以利用它拦截并处理 Markdown 生成的 HTML。 阅读 VitePress 的代码可以发现，它利用 添加了代码块高亮、代码块行号、Tip 容器等功能，在 VitePress 官网的 Markdown 拓展 里，已经详细介绍了 VitePress 支持 Markdown 额外拓展的功能。 下

什么是日历卡片？您可以在博客风格首页的卡片栏看到效果。 创建日历卡片组件 在 目录下创建 文件，并添加以下代码： 使用日历卡片组件 在 中通过 Shiki24 提供的卡片栏插槽插入日历卡片组件。

文章页顶部的 Banner 组件，仅在没有侧边栏的文章页生效，可以添加封面图或者背景色。 基础使用

页面加载 Loading 组件，在切换路由前显示，在切换路由后消失。 基础使用

什么是 Frontmatter 是 YAML 格式的 Markdown 文件头，如： 之间的语法，就是 。通过 可以给 Markdown 文件添加元数据，如：标题、作者、日期、链接等等。 如果只是单纯查看 Markdown 文件， 的作用仅仅是添加标识，并没实际作用，但是在某些主题、框架、工具库中， 的作用就变得很重要了，部分的主题、框架、工具库会根据 的内容，进行一些特殊处理或开启特殊功能，如 Shiki24 的 配置代表给该文件添加一个一级标题，在启动 Shiki24 后，文章页的一级标题会变成 的值。 Frontmatter 拓展 Shiki24 提供了丰富的 配置，如常用的 、 、 、

永久链接 VitePress 默认以 Markdown 文件路径作为链接访问，这会存在一个缺陷，当文件路径改变时，链接也会改变（再访问原来链接就会 404），在配置侧边栏、导航栏、各个文档链接引用、分享等场景时造成很大困扰。 因此需要给文件添加一个 永久链接，无论文件路径改变，访问链接不会改变。 Shiki24 使用 vitepress-plugin-permalink 来实现永久链接功能。 插件已经内置到 Shiki24 中，你只需要在 Markdown 文件的 中添加如下内容： 这样就可以通过 访问该页面了。 如果您不需要永久链接功能，请不配置 或者直接禁用该插件： 永久链接方式 插件提供

什么是归档页贡献图？您可以在导航栏 功能页 -> 归档页 点击查看。 安装 Echarts 依赖 首先需要安装 Echarts 依赖，根据您项目的包管理器选择安装方式： 创建贡献图组件 在 目录下创建 文件，并添加以下代码： 组件默认时间是近一年，且颜色已在代码里体现，您可以自行修改为你喜欢的风格。 使用贡献图组件 在 中通过 Shiki24 提供的归档页顶部插槽插入贡献图组件。

本专题介绍一些基于 Shiki24 的扩展功能，这些功能并没有内置到 Shiki24 里，需要自行在自己的项目实现。 什么功能不会在 Shiki24 实现呢？ - 需要安装额外依赖的功能，因为 Shiki24 主打轻量，因此只保留运行时或者核心功能需要的依赖 - 只能在项目里实现的功能，如导航栏添加图标