# 介绍

VPX 是 VuePress 的一个主题，默认主题基础上做了些扩展功能；
主要添加 icon 图标、Markdown 自定义容器、Git 仓库和编辑链接扩展等功能；
主题追求：默认主题的提供下添加所需功能，官方的主题配置几乎完全一样。
使用本主题请先学习 VuePress 默认主题 (opens new window)配置，然后再使用本主题。

# 扩展功能

添加的功能主要有：

暗黑主题
滚动条美化
导航栏、侧边栏 icon 图标
侧边广告栏
Markdown 容器
Git 仓库和编辑链接扩展
页脚扩展信息
等等

# 快速上手

本文会帮助你从头搭建一个简单的 VuePress 文档。

mkdir vuepress-starter && cd vuepress-starter

使用你喜欢的包管理器进行初始化

yarn init

npm init

// Make sure to add code blocks to your code group

将 VuePress 安装为本地依赖，我们已经不再推荐全局安装 VuePress

yarn add -D vuepress

npm install -D vuepress

cnpm install -D vuepress

// Make sure to add code blocks to your code group

将 VPX 主题安装为本地依赖

yarn add -D @qcyblm/vuepress-theme-vpx

npm install -D @qcyblm/vuepress-theme-vpx

cnpm install -D @qcyblm/vuepress-theme-vpx

// Make sure to add code blocks to your code group

创建你的第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

创建 .vuepress/config.js 并引用 VPX 主题

mkdir docs/.vuepress && touch docs/.vuepress/confing.js

// .vuepress/config.js

module.exports = {
  ...
  theme: '@qcyblm/vpx',
  ...
}

在 package.json 中添加一些 scripts 这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

在本地启动服务器

yarn dev

npm run dev

// Make sure to add code blocks to your code group

VuePress 会在 http://localhost:8080 (opens new window) 启动一个热重载的开发服务器。

现在，你应该已经有了一个简单可用的 VuePress 文档。接下来，了解一下推荐的 VuePress 中的目录结构 (opens new window)、基本配置 (opens new window)和 VPX 扩展配置。

编辑当前页

Markdown 容器 →