vuepress搭建博客
2019-12-16 本文已影响0人
leileitang_blog
vuepress
VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。
由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。
# 全局安装
npm install -g vuepress
# 创建一个 markdown 文件
echo '# Hello VuePress' > README.md
# 开始编写文档
vuepress dev
# 构建
vuepress build
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, ... 来降低置顶文章的排列优先级
