vitepress基础篇

VitePress是一个静态网站生成器（SSG），旨在构建快速，以内容为中心的网站。简单地说，VitePress获取您用Markdown编写的源内容，对其应用主题，并生成可以轻松部署在任何地方的静态HTML页面。

vitepress与vuePress

VitePress是VuePress的精神继承者。最初的VuePress基于Vue 2和Webpack。通过Vue 3和Vite，VitePress提供了更好的DX，更好的生产性能，更完善的默认主题和更灵活的定制API。VitePress和VuePress之间的API差异主要在于主题和自定义,VuePress 2也投入了大量的精力，它也支持Vue 3和Vite，与VuePress 1具有更多的兼容性。然而，并行维护两个SSG是不可持续的，因此Vue团队决定从长远来看将VitePress作为主要推荐的SSG

配置

在md文件中配置如下代码即可快速完成当前页面的布局。也可以自定义引入组件实现页面布局。 layout

方法一

---
layout: home # 选项配置页面可使页面主题内容自定义。

hero:
  name: VitePress
  text: Vite & Vue powered static site generator.
  tagline: Lorem ipsum...
  image:
    src: /logo.png
    alt: VitePress
  actions:
    - theme: brand
      text: Get Started
      link: /guide/what-is-vitepress
    - theme: alt
      text: View on GitHub
      link: https://github.com/vuejs/vitepress
---

方法二

---
layout: home
---

<script setup>
  import Layout from './views/layout.vue'
</script>
<ClientOnly>
  <Layout />
</ClientOnly
>

• 自定义样式 默认的CSS主题可以通过覆盖根级别的CSS变量进行自定义：

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import './custom.css'

export default DefaultTheme

/* .vitepress/theme/custom.css */
:root {
  --vp-c-brand: #646cff;
  --vp-c-brand-light: #747bff;
}

可以通过css设置一些全局样式。定制化的css

配置公共静态文件

官方文档-配置公共目录

有时您可能需要提供未在任何 Markdown 或主题组件中直接引用的静态资产，或者您可能希望使用原始文件名提供某些文件。此类文件的示例包括robots.txt、网站图标和 PWA 图标。

您可以将这些文件放在源目录public下的目录中。例如，如果您的项目根目录是并使用默认源目录位置，那么您的公共目录将为../docs./docs/public

放置的资产public将按原样复制到输出目录的根目录。

请注意，您应该引用放置在public根绝对路径中的文件 - 例如，public/icon.png在源代码中应始终引用为/icon.png.