美文网首页
vuepress搭建博客

vuepress搭建博客

作者: leileitang_blog | 来源:发表于2019-12-16 13:43 被阅读0次

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的博客

相关文章

网友评论

      本文标题:vuepress搭建博客

      本文链接:https://www.haomeiwen.com/subject/vdtdnctx.html