122 lines
3.4 KiB
Markdown
122 lines
3.4 KiB
Markdown
|
## VuePress 简介
|
|||
|
|
|
|||
|
|
VuePress 由两部分组成：第一部分是一个[极简静态网站生成器](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/core)，它包含由 Vue 驱动的[主题系统](https://vuepress.vuejs.org/zh/theme/)和[插件 API](https://vuepress.vuejs.org/zh/plugin/)，另一个部分是为书写技术文档而优化的[默认主题](https://vuepress.vuejs.org/zh/theme/default-theme-config.html)，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
|
|||
|
|
|
|||
|
|
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
|
|||
|
|
|
|||
|
|
### 快速上手
|
|||
|
|
|
|||
|
|
```shell
|
|||
|
|
#初始化
|
|||
|
|
npm init -y
|
|||
|
|
|
|||
|
|
#本地安装VuePress
|
|||
|
|
npm install -D vuepress
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 构建项目结构
|
|||
|
|
|
|||
|
|
VuePress 遵循 **“约定优于配置”** 的原则。
|
|||
|
|
|
|||
|
|
> ```yaml
|
|||
|
|
> .
|
|||
|
|
> ├── docs
|
|||
|
|
> │ ├── .vuepress (可选的)：用于存放全局的配置、组件、静态资源等。
|
|||
|
|
> │ │ ├── components (可选的)：该目录中的 Vue 组件将会被自动注册为全局组件。
|
|||
|
|
> │ │ ├── theme (可选的)：用于存放本地主题。
|
|||
|
|
> │ │ │ └── Layout.vue
|
|||
|
|
> │ │ ├── public (可选的)：静态资源目录。
|
|||
|
|
> │ │ ├── styles (可选的)：用于存放样式相关的文件。
|
|||
|
|
> │ │ │ ├── index.styl
|
|||
|
|
> │ │ │ └── palette.styl
|
|||
|
|
> │ │ ├── templates (可选的, 谨慎配置)：存储 HTML 模板文件。
|
|||
|
|
> │ │ │ ├── dev.html
|
|||
|
|
> │ │ │ └── ssr.html
|
|||
|
|
> │ │ ├── config.js (可选的)： 配置文件的入口文件，也可以是 YML 或 toml。
|
|||
|
|
> │ │ └── enhanceApp.js (可选的)：客户端应用的增强。
|
|||
|
|
> │ │
|
|||
|
|
> │ ├── README.md
|
|||
|
|
> │ ├── guide
|
|||
|
|
> │ │ └── README.md
|
|||
|
|
> │ └── config.md
|
|||
|
|
> │
|
|||
|
|
> └── package.json
|
|||
|
|
> ```
|
|||
|
|
|
|||
|
|
配置 `package.json`，用于启动和编译项目：
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"scripts": {
|
|||
|
|
"dev": "vuepress dev docs",
|
|||
|
|
"build": "vuepress build docs"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
# 项目文件都基于docs目录
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
把`docs`目录作为targetDir，下面所有的“文件的相对路径”都是相对于 `docs` 目录的。
|
|||
|
|
|
|||
|
|
| 文件的相对路径 | 页面路由地址 |
|
|||
|
|
| ------------------ | -------------- |
|
|||
|
|
| `/README.md` | `/` |
|
|||
|
|
| `/guide/README.md` | `/guide/` |
|
|||
|
|
| `/config.md` | `/config.html` |
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### [vuepress-theme-reco](https://vuepress-theme-reco.recoluan.com/)主题的使用
|
|||
|
|
|
|||
|
|
```shell
|
|||
|
|
#安装
|
|||
|
|
npm install vuepress-theme-reco --save-dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
#引用
|
|||
|
|
module.exports = {
|
|||
|
|
theme: 'reco'
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**分类和标签**
|
|||
|
|
|
|||
|
|
config.js配置
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
module.exports = {
|
|||
|
|
theme: 'reco',
|
|||
|
|
themeConfig: {
|
|||
|
|
// 博客配置
|
|||
|
|
blogConfig: {
|
|||
|
|
category: {
|
|||
|
|
location: 2, // 在导航栏菜单中所占的位置，默认2
|
|||
|
|
text: 'Category' // 默认文案 “分类”
|
|||
|
|
},
|
|||
|
|
tag: {
|
|||
|
|
location: 3, // 在导航栏菜单中所占的位置，默认3
|
|||
|
|
text: 'Tag' // 默认文案 “标签”
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
文章头部添加分类和标签等信息
|
|||
|
|
|
|||
|
|
```yaml
|
|||
|
|
---
|
|||
|
|
title: Postgresql 备份方式
|
|||
|
|
date: 2020-10-10
|
|||
|
|
author: ac
|
|||
|
|
tags:
|
|||
|
|
- postgresql
|
|||
|
|
categories: 数据库
|
|||
|
|
---
|
|||
|
|
```
|
|||
|
|
|