vitepress 记录与总结

包含 Markdown 文件

你可以使用 <!--@include: ./xxx.md--> 语法使一个 markdown 文件中包含另一个 markdown 文件：

<!--@include: ./parts/basics.md-->

支持选择行范围：

<!--@include: ./parts/basics.md{3,}-->

注意

{} 内不要有空格。

使用“注释高亮方法”高亮代码块的多行

// [!code hl:<行数>]

vitepress 插件

• https://vitepress-plugins.sapphi.red/tabs/

只引入文件的部分代码片段

使用 VS Code region 来仅包含被导入代码文件的相应部分。你可以在文件路径后面加上一个 # 跟着那个自定义的 region 名。

输入

<<< @/filepath.js#any

被引入文件

// #region any
function foo() {
  // ..
}
// #endregion any

export default foo

怎么隐藏 vitepress 的导航栏？

我有这样一个需求：文档的侧边栏、目录栏、导航栏都隐藏，让用户更沉浸式的阅读内容，如下图所示：

变成这样：

怎么实现呢？可以通过 frontmatter 来自定义某些区域的显示。但是通过 frontmatter 只能让 侧边栏、目录栏隐藏，不能让导航栏隐藏。所以我们只能自己修改源码，多增加一个 frontmatter 属性来配置导航栏的显示与隐藏。

  ---
  layout: doc
  sidebar: false
  navbar: false
  aside: false
  ---

修改源码：

<VPNav v-if="frontmatter.navbar !== false">

我还提了个 pr 。

修改 home 布局下的文字颜色

使用 vitepress 的默认主题，Layout 布局有三种：page、home、doc。

page 什么样式都没有，home 拥有更多的 frontmatter 配置选项，doc 使用 vitepress 的样式。

如果什么都不设置，默认布局为 doc。

这里学习一下 Layout 为 home 时，该如何配置 frontmatter。

---
# 默认布局
# layout: doc
# layout: page
layout: home

# 当 layout 设置为 home，下面这些配置会生效。
hero:
  name: my course # 标题
  text: vitepress 是一个静态站点生成器 # 标题描述
  tagline: 12345654341253134 # 标语
  image:
    src: /Gold.png
    alt: VitePress
  actions:
    - theme: brand
      text: 开始
      link: /guide/what-is-vitepress
    - theme: alt
      text: 查看 github
      link: https://github.com/vuejs/vitepress
---

那么我想修改 home 布局下的文字颜色，该怎么做呢？

可以先通过控制台查看要修改的文字颜色，值一般都是一个 css 变量。

或则查看源码。

在 src\client\theme-default\components\VPHero.vue 中查看：

然后，创建一个 style.css 文件，覆盖 css 变量。

:root {
  /* 标题 */
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  
  /* 图标背景 */
  --vp-home-hero-image-background-image: linear-gradient( 135deg, #FFA8A8 10%, #FCFF00 100%);
  --vp-home-hero-image-filter: blur(150px);
}

然后在 .vitepress/theme/index.js 文件中引入该 css 文件。

注册全局组件

.vitepress/theme/index.js

export default {
  ...Theme, // Layout NotFound enhanceApp
  enhanceApp(ctx) {
    // extend default theme custom behaviour.
    Theme.enhanceApp(ctx)
    
    // register your custom global components
    ctx.app.component('MyGlobalComponent', <Comp />) 
  }
}

修改代码块颜色

可修改的主题可在这里查看。

在这里在线预览。

  markdown: {
    theme: {
      light: "vitesse-light", // 浅色主题使用这种代码块
      dark: "vitesse-dark", // 暗色主题使用这种代码块
    },
    // theme: 'nord', // markdown 代码块主题。我觉得原本的比较好看，所以没有设置。
  },

或者，覆盖 css 变量：

:root {
    /* 代码块背景色 */
  --vp-code-block-bg: rgba(125,125,125,.04);
}