vitepress

前身是 vuepress

静态站点服务器 Static Site Generator (SSG)

Rspack

字节

Rspress

静态站点生成器

应用场景

1. 博客
2. 文档
3. 营销页面
4. 档案

安装

npm i vitepress -D

执行

1. 创建项目

npx vitepress init

vitepress 特有的 formatter

三横杠必须写在头部 ---

配置页脚

写在路由对应的ma'rkdown

---

outline: deep prev: text: "上一页: 首页 1111ss" link: /markdown-examples next: text: "下一页: 首页 2222ss" link: /markdown-examples

---

config.mts中配置docFooter修改页脚

配置 head

增加 TDK, SEO 优化

爬虫机器人会抓取这三个值

---

head:

• • meta
  • name: title content: "Runtime API Examples"
• • meta
  • name: description content: "Runtime API Examples"

---

最后修改时间

必须配合git使用, git提交的这个时间, 它就会列为最后修改时间

// config.mts
lastUpdated: {
    text: "最后更改时间",
    formatOptions: {
      dateStyle: "full",
      timeStyle: "short",
    },
},

默认主题 > 团队页

vitepress的markdown语法支持vue

<script setup> import { VPTeamMembers } from 'vitepress/theme' const members = [ { avatar: 'https://www.github.com/yyx990803.png', name: 'Evan You', title: 'Creator', links: [ { icon: 'github', link: 'https://github.com/yyx990803' }, { icon: 'twitter', link: 'https://twitter.com/youyuxi' } ] }, ] </script>

GitHub 部署静态网站

1. 打开仓库的 Settings
2. 选择 pages
3. 在 Branch 选项里 选择 main 分支, 然后选择/docs
4. 点击 Save 保存

• 访问的地址 [github的名称].github.io/项目名称 https://cc-cgj.github.io/docs123

部署的目录只能选择根目录或者docs目录