vuepress搭建博客

vuepress

VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。

# 全局安装
npm install -g vuepress

# 创建一个 markdown 文件
echo '# Hello VuePress' > README.md

# 开始编写文档
vuepress dev

# 构建
vuepress build

参考VuePress中文网

vuepress-theme-reco环境搭建

npm

## 初始化

npm install @vuepress-reco/theme-cli -g
theme-cli init my-blog

## 安装
cd my-blog
npm install

## 运行
npm run dev

## 编译
npm run build

yarn

## 初始化
yarn global add @vuepress-reco/theme-cli
theme-cli init my-blog

## 安装
cd my-blog
yarn install

写文章时添加分类和标签

--- 
title: 【vue】跨域解决方案之proxyTable  
date: 2017-12-28
categories: 
 - frontEnd
tags: 
 - vue
---

请注意， categories 和 tags 要以数组的方式填写。

添加博客配置

// .vuepress/config.js

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

Front Matter

---
title: 烤鸭的做法
date: 2019-08-08
sidebar: 'auto'
categories:
 - 烹饪
 - 爱好
tags:
 - 烤
 - 鸭子
keys:
 - '123456' 
publish: false
---

• title
  description: 文章标题，放弃通过一级目录定义标题的方式，改在 Front Matter 中定义。
• date
  description: 文章创建日期，格式 2019-08-08 或 2019-08-08 08:08:08。
• sidebar
  description: 是否开启侧边栏。
• categories
  description: 所属分类。
• tags
  description: 所属标签。
• keys
  description: 文章加密密码。
• publish
  description: 文章是否发布。
• sticky 1.1.2+
  description: 文章置顶。
  type: number
  sort type: 降序，可以按照 1, 2, 3, ... 来降低置顶文章的排列优先级

参考vuepress-theme-reco
参考leileitang的博客