Lyirs的小屋

主题

安装与使用 ​

安装 vitepress ​

sh
$ npm add -D vitepress
sh
$ pnpm add -D vitepress
sh
$ yarn add -D vitepress
sh
$ bun add -D vitepress

生成 vitepress 基础配置 ​

sh
$ npx vitepress init
sh
$ pnpm vitepress init
sh
$ yarn vitepress init
sh
$ bun vitepress init
┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./
│
◇  Site title:
│  VitePress
│
◇  Site description:
│  A VitePress Site
│
◆  Theme:
│  ● Default Theme (Out of the box, good-looking docs)
│  ○ Default Theme + Customization
│  ○ Custom Theme
└

开发环境启动 ​

package.json

json
{
  "name": "ffffee",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npm run docs:dev", 
    "docs:dev": "vitepress dev",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vitepress": "^1.3.4"
  }
}
bash
npm start

修改配置文件 ​

ts
import { defineConfig } from "vitepress";

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "VitePress",
  description: "A VitePress Site",
  outDir: "dist", 
  srcDir: "src", 
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: "首页", link: "/" },
      { text: "Examples", link: "/markdown-examples" },
    ],

    sidebar: [
      {
        text: "Examples",
        items: [
          { text: "Markdown Examples", link: "/markdown-examples" },
          { text: "VitePress 快速入门", link: "/vitepress-quick-start.md" },
        ],
      },
    ],

    socialLinks: [
      { icon: "github", link: "https://github.com/vuejs/vitepress" },
    ],
    
    footer: { 
      message: "Released under the MIT License.", 
      copyright: "Copyright © 2019-present Evan You", 
    }, 
    docFooter: { 
      prev: "上一页", 
      next: "下一页", 
    }, 
    outline: { 
      level: [2, 3], 
      label: "页面导航", 
    }, 
    lastUpdated: { 
      text: "最后更新于", 
      formatOptions: { 
        dateStyle: "short", 
        timeStyle: "short", 
      }, 
    }, 
    langMenuLabel: "多语言", 
    returnToTopLabel: "回到顶部", 
    sidebarMenuLabel: "菜单", 
    darkModeSwitchLabel: "主题", 
    lightModeSwitchTitle: "切换到浅色模式", 
    darkModeSwitchTitle: "切换到深色模式", 
  },
});

TIP

你必须使用 git commit 提交 markdown 文件才能看到最后更新时间。

文件结构 ​

plaintext
.
├── .vitepress
│   ├── theme
│   └── config.mts
├── dist
├── public
├── src
│   ├── index.md
│   ├── api-examples.md
│   └── markdown-examples.md
├── .gitignore
├── .npmrc
└── package.json

.npmrc

registry=https://registry.npmmirror.com