vitepress

配置

配置静态资源

放入public <image src="/narcissus/vitepress1.png" />
外链静态资源

配置页面路由跳转

[快速生成代码片段](/front-end/vue/vue#ref)

使用

表格

Left	Middle	right
-------------	:-----------:	---------:
Left	Middle	right

emoji

🎉 - :tada:

emojy list

目录结构

[[toc]]

Card

INFO

This is an info box. [info]

TIP

This is a tip. [tip]

WARNING

This is a warning. [warning]

DANGER

This is a dangerous warning. [danger]

Details

This is a details block. [details]

行高亮

js{4}

// [!code highlight]

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

行聚焦

TIP

在某一行上添加 // [!code focus] 注释将聚焦它并模糊代码的其他部分。

此外，可以使用 // [!code focus:<行数>] 定义要聚焦的行数。

export default {
  data () {
    return {
      msg: 'Focused!'
    }
  }
}

行Diff

在某一行添加 // [!code --] 或 // [!code ++] 注释将会为该行创建 diff，同时保留代码块的颜色。

export default {
  data () {
    return {
      msg: 'Removed'
      msg: 'Added'
    }
  }
}

行高亮,行警告

在某一行添加 // [!code warning] 或 // [!code error] 注释将会为该行相应的着色。

export default {
  data () {
    return {
      msg: 'Error', 
      msg: 'Warning'
    }
  }
}

行号

// 默认禁用行号 ts {1}
const line2 = 'This is line 2'
const line3 = 'This is line 3'

// 启用行号 ts:line-numbers {1}
const line2 = 'This is line 2'
const line3 = 'This is line 3'

// 行号已启用，并从 2 开始 ts:line-numbers=2 {1}
const line3 = 'This is line 3'
const line4 = 'This is line 4'

代码组

::: code-group

cmdcmd

cmd

npm install vitepress

cmd

pnpm install vitepress

Runtime API

useData

<script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

## Results

### Theme Data
<pre>{{ theme }}</pre>

### Page Data
<pre>{{ page }}</pre>

### Page Frontmatter
<pre>{{ frontmatter }}</pre>

Theme Data

{
  "logo": "./yushi.png",
  "search": {
    "provider": "local"
  },
  "siteTitle": "Narcissus",
  "nav": [
    {
      "text": "前端",
      "items": [
        {
          "text": "HTML",
          "collapsed": true,
          "link": "/front-end/html/label"
        },
        {
          "text": "CSS",
          "link": "/front-end/css/animation"
        },
        {
          "text": "JS",
          "link": "front-end/js/es6"
        },
        {
          "text": "tool",
          "items": [
            {
              "text": "Vue",
              "link": "/front-end/vue/vue"
            },
            {
              "text": "Taro",
              "link": "/front-end/taro/taro"
            },
            {
              "text": "Three",
              "link": "/front-end/taro/taro"
            }
          ]
        },
        {
          "text": "Design pattern",
          "link": "/front-end/design-pattern/singleton"
        },
        {
          "text": "Micro frontend",
          "link": "/front-end/micro-frontend/preface"
        }
      ]
    },
    {
      "text": "后端",
      "items": [
        {
          "text": "Bootstrap",
          "link": "/back-end/bootstrap"
        },
        {
          "text": "EF6",
          "link": "/back-end/EF6"
        },
        {
          "text": "NestJS",
          "link": "/back-end/NestJS"
        }
      ]
    },
    {
      "text": "日常",
      "items": [
        {
          "text": "书籍",
          "link": "/daily/book"
        },
        {
          "text": "电影",
          "link": "/daily/movie"
        },
        {
          "text": "音乐",
          "link": "/daily/music"
        },
        {
          "text": "web",
          "link": "/daily/web"
        },
        {
          "text": "experience",
          "link": "/daily/experience"
        }
      ]
    },
    {
      "text": "工作",
      "items": [
        {
          "text": "Bug",
          "link": "/work/bug"
        },
        {
          "text": "Efficiency",
          "link": "/work/efficiency"
        },
        {
          "text": "Tools",
          "items": [
            {
              "text": "VitePress",
              "link": "/work/tools/vitepress"
            },
            {
              "text": "Git",
              "link": "/work/tools/git"
            },
            {
              "text": "SQL",
              "link": "/work/tools/sql"
            },
            {
              "text": "Linux",
              "link": "/work/tools/linux"
            },
            {
              "text": "Node",
              "link": "/work/tools/node"
            }
          ]
        },
        {
          "text": "Team",
          "link": "/work/team"
        }
      ]
    }
  ],
  "sidebar": {
    "/front-end/html/": [
      {
        "text": "HTML",
        "collapsed": true,
        "items": [
          {
            "text": "HTML基础",
            "link": "/front-end/html/label"
          },
          {
            "text": "HTML5",
            "link": "/front-end/html/html5"
          }
        ]
      }
    ],
    "/front-end/css/": [
      {
        "text": "CSS",
        "items": [
          {
            "text": "Amimation",
            "link": "/front-end/css/animation"
          }
        ]
      }
    ],
    "/front-end/js/": [
      {
        "text": "JS",
        "items": [
          {
            "text": "ES6",
            "link": "/front-end/js/es6"
          },
          {
            "text": "WebAPI",
            "link": "/front-end/js/webAPI"
          },
          {
            "text": "Principle",
            "link": "/front-end/js/principle"
          },
          {
            "text": "Wheels",
            "link": "/front-end/js/wheels"
          }
        ]
      }
    ],
    "/front-end/vue/": [
      {
        "text": "vue",
        "items": [
          {
            "text": "vue start",
            "link": "/front-end/vue/vue"
          },
          {
            "text": "vue base",
            "link": "/front-end/vue/vue-base"
          }
        ]
      }
    ],
    "/front-end/design-pattern/": [
      {
        "text": "Design Pattern",
        "items": [
          {
            "text": "singleton",
            "link": "/front-end/design-pattern/singleton"
          },
          {
            "text": "strategy",
            "link": "/front-end/design-pattern/strategy"
          },
          {
            "text": "proxy",
            "link": "/front-end/design-pattern/proxy"
          },
          {
            "text": "subscribe",
            "link": "/front-end/design-pattern/subscribe"
          }
        ]
      }
    ],
    "/front-end/micro-frontend/": [
      {
        "text": "Micro Frontend",
        "items": [
          {
            "text": "preface",
            "link": "/front-end/micro-frontend/preface"
          },
          {
            "text": "Iframe",
            "link": "/front-end/micro-frontend/iframe"
          },
          {
            "text": "Single-spa",
            "link": "/front-end/micro-frontend/single-spa"
          },
          {
            "text": "Qiankun",
            "link": "/front-end/micro-frontend/qiankun"
          },
          {
            "text": "Wujie",
            "link": "/front-end/micro-frontend/wujie"
          },
          {
            "text": "EMP",
            "link": "/front-end/micro-frontend/emp"
          },
          {
            "text": "Postscript",
            "link": "/front-end/micro-frontend/postscript"
          }
        ]
      }
    ]
  },
  "aside": true,
  "outline": [
    1,
    3
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/formattor"
    },
    {
      "icon": {
        "svg": "<svg t=\"1712666390765\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"4281\" width=\"200\" height=\"200\"><path d=\"M512 0c282.784 0 512 229.216 512 512s-229.216 512-512 512S0 794.784 0 512 229.216 0 512 0z m189.952 752l11.2-108.224c-31.904 9.536-100.928 16.128-147.712 16.128-134.464 0-205.728-47.296-195.328-146.304 11.584-110.688 113.152-145.696 232.64-145.696 54.784 0 122.432 8.8 151.296 18.336L768 272.704C724.544 262.24 678.272 256 599.584 256c-203.2 0-388.704 94.88-406.4 263.488C178.336 660.96 303.584 768 535.616 768c80.672 0 138.464-6.432 166.336-16z\" fill=\"#707070\" p-id=\"4282\"></path></svg>"
      },
      "link": "https://blog.csdn.net/Formattor"
    },
    {
      "icon": {
        "svg": "<svg t=\"1712666459139\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"5420\" width=\"200\" height=\"200\"><path d=\"M278.8864 148.1728c14.336-8.192 32.6144-9.3696 47.8208-2.6624 11.3664 4.6592 19.968 13.824 29.184 21.6064 38.144 32.9216 75.9808 66.304 114.2784 99.0208h80.4352c38.2976-32.768 76.0832-66.048 114.2272-98.9696 9.2672-7.7824 17.8688-16.896 29.2864-21.6576 14.7456-6.5024 32.4608-5.632 46.592 2.048 16.5888 8.5504 28.1088 26.2656 28.8256 44.9536 1.024 13.568-3.84 27.2896-12.3392 37.7856-7.5264 8.3456-16.5376 15.2064-24.8832 22.6816-5.3248 4.4032-10.1376 9.5232-16.0256 13.2096 23.6544 0 47.2576-0.256 70.912 0.1536 31.1296 0.8192 61.44 14.592 82.8928 37.1712 22.6304 22.2208 35.5328 53.5552 35.4816 85.1968 0.1024 108.4416 0 216.9344 0.0512 325.376-0.1024 16.384 0.8192 33.024-2.816 49.152-6.656 32.9728-28.8256 61.5936-56.9856 79.36a121.344 121.344 0 0 1-64.7168 17.7664H263.2704c-16.9984-0.1024-34.2528 0.8704-50.9952-2.8672-32.1024-6.4512-60.0064-27.648-77.824-54.6304a121.088 121.088 0 0 1-19.2512-66.9696v-321.536c0.1024-16.5376-0.9216-33.1776 2.4576-49.408 10.24-52.9408 58.9312-96.1024 112.9984-98.4576 24.6272-0.768 49.3056-0.2048 73.9328-0.3072-11.6224-8.3968-21.8112-18.5344-32.768-27.7504a55.04 55.04 0 0 1-20.5312-45.9264c0.7168-18.2272 11.6736-35.584 27.648-44.3392m-13.056 221.7984c-20.992 3.7376-38.912 20.3264-44.7488 40.7552a76.4928 76.4928 0 0 0-2.3552 21.7088c0.1024 89.0368-0.0512 178.0736 0.0512 267.1616-0.4096 24.2176 16.3328 47.1552 39.1168 54.8864 8.1408 2.9696 16.896 3.0208 25.3952 3.072 153.1904-0.1024 306.432 0.0512 459.6224-0.0512 22.4768 0.8704 44.0832-13.1072 53.5552-33.28 5.7856-11.5712 5.6832-24.7296 5.4784-37.376v-248.832c0-9.1136 0.3072-18.4832-2.304-27.2896a58.7776 58.7776 0 0 0-36.864-38.656c-9.7792-3.584-20.4288-3.0208-30.6688-3.072H292.5056c-8.8576 0-17.8176-0.3072-26.624 0.9728z\" fill=\"#707070\" p-id=\"5421\"></path><path d=\"M358.7072 455.5264c14.6432-1.4848 29.8496 3.2768 41.0112 12.8 12.4416 10.24 19.5584 26.112 19.7632 42.1376 0.3584 19.4048 0.1024 38.8608 0.1024 58.2656 0 12.8-3.3792 25.8048-11.3152 35.9424a54.9888 54.9888 0 0 1-48.4864 21.76 54.9376 54.9376 0 0 1-44.032-28.2624c-6.8096-11.6736-7.3728-25.4976-7.168-38.6048 0.4096-18.8416-1.024-37.7856 0.8704-56.576a55.296 55.296 0 0 1 49.2544-47.4624z m292.4544 0a55.2448 55.2448 0 0 1 60.7232 53.0432c0.8192 18.2272 0.1024 36.4544 0.4096 54.6816 0.1024 12.8-1.4336 26.112-8.4992 37.12-10.24 17.0496-30.3104 27.5456-50.176 26.112a55.04 55.04 0 0 1-43.3664-24.9856c-7.936-11.776-9.472-26.2656-9.1136-40.0896 0.3584-18.7392-0.6656-37.4784 0.6144-56.1664 1.8432-25.6 23.9104-47.5136 49.408-49.664z\" fill=\"#707070\" p-id=\"5422\"></path></svg>"
      },
      "link": "https://space.bilibili.com/173887579"
    }
  ],
  "footer": {
    "message": "我的页脚",
    "copyright": "yushi © 2024-present"
  },
  "editLink": {
    "pattern": "https://github.com/formattor/narcissus/tree/main/docs/:path",
    "text": "Edit this page on GitHub"
  },
  "lastUpdated": {
    "text": "Updated at",
    "formatOptions": {
      "dateStyle": "full",
      "timeStyle": "medium"
    }
  },
  "docFooter": {
    "prev": "往前",
    "next": "往后"
  },
  "returnToTopLabel": "往上"
}

Page Data

{
  "title": "配置",
  "description": "",
  "frontmatter": {},
  "headers": [],
  "relativePath": "work/tools/vitepress.md",
  "filePath": "work/tools/vitepress.md",
  "lastUpdated": 1713371045000
}

Page Frontmatter

{}

useRoute

<script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

## Results

### path
<pre>{{ path }}</pre>

### data
<pre>{{ data }}</pre>

### component
<pre>{{ component }}</pre>

path

/narcissus/work/tools/vitepress.html

data

{
  "title": "配置",
  "description": "",
  "frontmatter": {},
  "headers": [],
  "relativePath": "work/tools/vitepress.md",
  "filePath": "work/tools/vitepress.md",
  "lastUpdated": 1713371045000
}

component

{
  "name": "work/tools/vitepress.md",
  "__ssrInlineRender": true
}

useRouter

<script setup>
import { useRouter } from 'vitepress'

const { route, go, onBeforeRouteChange, onBeforePageLoad, onAfterRouteChanged } = useRouter()
</script>

## Results

### route
<pre>{{ route }}</pre>

### go
<pre>{{ go }}</pre>

### onBeforeRouteChange
<pre>{{ onBeforeRouteChange }}</pre>

### onBeforePageLoad
<pre>{{ onBeforePageLoad }}</pre>

### onAfterRouteChanged
<pre>{{ onAfterRouteChanged }}</pre>

route

{
  "path": "/narcissus/work/tools/vitepress.html",
  "component": {
    "name": "work/tools/vitepress.md",
    "__ssrInlineRender": true
  },
  "data": {
    "title": "配置",
    "description": "",
    "frontmatter": {},
    "headers": [],
    "relativePath": "work/tools/vitepress.md",
    "filePath": "work/tools/vitepress.md",
    "lastUpdated": 1713371045000
  }
}

async function go(href = inBrowser ? location.href : "/") {
    var _a, _b;
    href = normalizeHref(href);
    if (await ((_a = router.onBeforeRouteChange) == null ? void 0 : _a.call(router, href)) === false)
      return;
    if (inBrowser && href !== normalizeHref(location.href)) {
      history.replaceState({ scrollPosition: window.scrollY }, "");
      history.pushState({}, "", href);
    }
    await loadPage(href);
    await ((_b = router.onAfterRouteChanged) == null ? void 0 : _b.call(router, href));
  }

onBeforeRouteChange

onBeforePageLoad

onAfterRouteChanged

一分钟建站

本地搭建环境

创建文件夹doc
文件夹下安装vitepress

npm add -D vitepress

初始化vitepress

npx vitepress init

选择建在docs文件夹下

◇  Where should VitePress initialize the config?
│  ./docs

本地下载完成，使用npm run docs:dev启动

在config.mts中配置base文件路径

base: "/test/"

远程仓库与部署

创建远程public仓库test

和base文件名称保持一致

连接本地与远程仓库

git init

创建.gitignore文件

node_modules/

page页面配置

Action页面创建deploy.yml文件

注意事项

path路径填写docs

node版本与本地一致

npm版本与本地一致

deploy.yml

yml

# 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程
#
name: Deploy VitePress site to Pages

on:
  # 在针对 `main` 分支的推送上运行。如果你
  # 使用 `master` 分支作为默认分支，请将其更改为 `master`
  push:
    branches: [main]

  # 允许你从 Actions 选项卡手动运行此工作流程
  workflow_dispatch:

# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  # 构建工作
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
      # - uses: pnpm/action-setup@v3 # 如果使用 pnpm，请取消注释
      # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm # 或 pnpm / yarn
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Install dependencies
        run: npm ci # 或 pnpm install / yarn install / bun install
      - name: Build with VitePress
        run: npm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: docs/.vitepress/dist

  # 部署工作
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

成功！

配置 ​

使用 ​

表格 ​

emoji ​

目录结构 ​

Card ​

行高亮 ​

行聚焦 ​

行Diff ​

行高亮,行警告 ​

行号 ​

代码组 ​

Runtime API ​

useData ​

useRoute ​

useRouter ​

一分钟建站 ​

本地搭建环境 ​

远程仓库与部署 ​

配置

使用

表格