一键烤鸭-Github (opens new window)
效果预览
2022-12-27 测试成功
# 安装vuepress
Vuepress中文网-指南-快速上手 (opens new window)
# 初始化
mkdir vuepress-theme-reco-starter
cd vuepress-theme-reco-starter
npm init # yarn init
1
2
3
4
5
6
2
3
4
5
6
# 在package.json中添加script
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
1
2
3
4
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
2
3
4
5
# 安装vuepress-plugin-permalink-pinyin
一个将中文标题转换为音译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
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
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
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
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
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
2
3
4
5
