Vuepress-theme-reco 新手指北之 Hello烤鸭

8/21/2021 vuepressvuepress-theme-reco

# 安装vuepress

Vuepress中文网-指南-快速上手 (opens new window)

# 初始化

mkdir vuepress-theme-reco-starter

cd vuepress-theme-reco-starter

npm init # yarn init

npm install -D vuepress # yarn add -D vuepress

1
2
3
4
5
6
7
8

# 在package.json中添加script

"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
}
1
2
3
4

# 安装vuepress-theme-reco

vuepress-theme-reco (opens new window)

npm install vuepress-theme-reco --save-dev

# or

yarn add vuepress-theme-reco
1
2
3
4
5

一个将中文标题转换为音译permalink的VuePress插件 (opens new window)

npm i vuepress-plugin-permalink-pinyin --save-dev

# or

yarn add vuepress-plugin-permalink-pinyin --dev
1
2
3
4
5

# 创建文件目录结构(入门版)

Vuepress中文网-指南-目录结构 (opens new window)

.
├── docs
│   ├── .vuepress
│   │   ├── public
│   │   │   │── avatar.png(头像)
│   │   │   └── bg.png(首页背景图)
│   │   └── config.js(博客配置)
│   ├── views
│   │   └── 美食\2021\烤鸭.md(测试文章)
│   └── README.md(首页配置)
└── package.json
1
2
3
4
5
6
7
8
9
10
11

# 配置主题

此处仅包含一些常用的基础配置
详细配置和进阶功能请参考主题文档 (opens new window)

# docs/.vuepress/config.js

module.exports = {
  theme: 'reco',
  title: "hello reco",
  description: 'welcome to my blog builded with vuepress-theme-reco',
  // 移动端优化
  head: [
    ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }]
  ],
  // 主题设置
  themeConfig: {
    type: 'blog',
    author: 'new recoer',
    // 显示在个人信息的头像
    authorAvatar: '/avatar.png',
    // 导航栏左侧logo
    logo: '/avatar.png',
    // 搜索设置
    search: true,
    searchMaxSuggestions: 10,
    // 自动形成侧边导航及其深度
    subSidebar: 'auto',
    sidebarDepth: 1,
    // 最后更新时间
    lastUpdated: 'Last Updated',
    // 项目开始时间
    startYear: '2021',
    // 导航栏配置
    nav: [
      { text: 'Home', link: '/', icon: 'reco-home' },
      { text: 'TimeLine', link: '/timeline/', icon: 'reco-date' },
      { text: 'GitHub', link: 'https://github.com/smallsunnyfox/vuepress-theme-reco-starter', icon: 'reco-github' }
    ],
    // 博客配置
    blogConfig: {
      category: {
        location: 2,     // 在导航栏菜单中所占的位置,默认2
        text: 'Category' // 默认文案 “分类”
      },
      tag: {
        location: 3,     // 在导航栏菜单中所占的位置,默认3
        text: 'Tag'      // 默认文案 “标签”
      }
    },
    // 友情链接
    friendLink: [
      {
        title: '午后南杂',
        desc: 'Enjoy when you can, and endure when you must.',
        logo: 'https://photo.smallsunnyfox.com/images/blog/friendlink/reco.png',
        link: 'https://www.recoluan.com'
      },
      {
        title: 'vuepress-theme-reco',
        desc: 'A simple and beautiful vuepress Blog & Doc theme.',
        logo: "https://photo.smallsunnyfox.com/images/blog/friendlink/theme_reco.png",
        link: 'https://vuepress-theme-reco.recoluan.com'
      }
    ]
  },
  // 插件配置
  plugins: [
    [
      'permalink-pinyin',
      {
        lowercase: true,
        separator: '-'
      }
    ]
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

# docs/README.md

---
home: true
bgImage: '/bg.png'
bgImageStyle: {
  height: '480px',
  color: 'white'
}
---
1
2
3
4
5
6
7
8

# 文章测试

分类和标签 (opens new window)
完整的FrontMatter (opens new window)

# docs/views/美食/2021/烤鸭.md

---
title: 烤鸭的做法
date: 2021-08-08 08:00:00
sidebar: auto
tags:
 - 烤鸭
 - 美食
categories:
 - 美食
---

Hello 烤鸭

1
2
3
4
5
6
7
8
9
10
11
12
13

# 端盘上菜

npm run docs:dev

&&

npm run docs:build
1
2
3
4
5
Last Updated: 9/11/2021, 5:26:01 PM
我再没见过 像你一般的星空
Seto