meface/构建VuePress博客.md

VuePress 简介

VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

快速上手

#初始化
npm init -y

#本地安装VuePress
npm install -D vuepress

构建项目结构

VuePress 遵循 “约定优于配置” 的原则。

.
├── 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，用于启动和编译项目：

{
  "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主题的使用

#安装
npm install vuepress-theme-reco --save-dev

#引用
module.exports = {
    theme: 'reco'
}

分类和标签

config.js配置

module.exports = {
  theme: 'reco',
  themeConfig: {
     // 博客配置
    blogConfig: {
      category: {
        location: 2,     // 在导航栏菜单中所占的位置，默认2
        text: 'Category' // 默认文案 “分类”
      },
      tag: {
        location: 3,     // 在导航栏菜单中所占的位置，默认3
        text: 'Tag'      // 默认文案 “标签”
      }
    }
  }
}

文章头部添加分类和标签等信息

---
title: Postgresql 备份方式
date: 2020-10-10
author: ac
tags: 
	- postgresql
categories: 数据库
---