VuePress Setup Guide guide
How to set up navbar, sidebar and meta tag for SEO in VuePress 2.x.
Favicon
Favicon Generatoropen in new window
module.exports = {
head: [
["link", { rel: "icon", href: "/images/logo.png" }],
[
"link",
{
rel: "apple-touch-icon",
sizes: "180x180",
href: "/apple-touch-icon.png",
},
],
[
"link",
{
rel: "icon",
type: "image/png",
sizes: "32x32",
href: "/favicon-32x32.png",
},
],
[
"link",
{
rel: "icon",
type: "image/png",
sizes: "16x16",
href: "/favicon-16x16.png",
},
],
["link", { rel: "manifest", href: "/site.webmanifest" }],
[
"link",
{
rel: "mask-icon",
href: "/safari-pinned-tab.svg",
color: "#3a0839",
},
],
["link", { rel: "shortcut icon", href: "/favicon.ico" }],
["meta", { name: "msapplication-TileColor", content: "#3a0839" }],
[
"meta",
{ name: "msapplication-config", content: "/browserconfig.xml" },
],
["meta", { name: "theme-color", content: "#ffffff" }],
],
};
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
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
Plugin
module.exports = {
plugins: [["@vuepress/plugin-search"]],
};
1
2
3
2
3
Languages
module.exports = {
lang: "en-US",
title: "Little Data Structures",
description: "Mila's notes for data structures and algorithms",
locales: {
"/": {
lang: "en-US",
title: "Little Data Structures",
description:
"Mila's notes for data structures and algorithms in C++, including string, dynamic programming, stack, queue, binary tree, array, backtracking, kmp algorithms",
},
"/zh/": {
lang: "zh-CN",
title: "Little Data Structures",
description:
"Mila的力扣刷题题解和数据结构算法学习讲解。C++语法、静态成员函数，回溯问题，kmp算法，动态规划，字符串，数组，队列，二叉树，二叉搜索树，栈",
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Logo
module.exports = {
themeConfig: {
logo: "/images/logo.png",
},
};
1
2
3
4
5
2
3
4
5
Navbar and Sidebar
module.exports = {
themeConfig: {
locales: {
"/": {
selectLanguageName: "English",
navbar: [
{
text: "Quora",
link: "https://littledatastructures.quora.com/",
},
{
text: "Github",
link: "https://github.com/oddnaveed",
},
],
sidebar: [
{
text: "🥳 Journal",
path: "/journal/",
children: [
"/journal/markdown.md",
"/journal/vuepress-guide.md",
],
},
{
text: "😍 Tech",
path: "/tech/",
children: [
"/tech/markdown.md",
"/tech/static-member-function.md",
],
},
],
},
"/zh/": {
selectLanguageName: "简体中文",
navbar: [
{
text: "Quora",
link: "https://littledatastructures.quora.com/",
},
{
text: "Github",
link: "https://github.com/oddnaveed",
},
],
sidebar: [
{
text: "🥳 日志",
path: "/zh/journal/",
children: [
"/zh/journal/README.md",
],
},
{
text: "😍 编程",
path: "/zh/tech/",
children: [
"/zh/tech/README.md
],
},
],
},
},
},
}
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
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
Navbar
module.exports = {
themeConfig: {
navbar: [
{
text: "Quora",
link: "https://littledatastructures.quora.com/",
},
{
text: "Github",
link: "https://github.com/oddnaveed",
},
],
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Sidebar
module.exports = {
themeConfig: {
logo: "/images/logo.png",
sidebar: [
{
text: "🥳 Journal",
path: "/journal/",
children: ["/journal/README.md", "/journal/seo.md"],
},
{
text: "😍 Tech",
path: "/tech/",
children: ["/cplusplus/static-member-function.md"],
},
],
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Meta tag & SEO
1. Meta tag
---
head:
- - meta
- name: description
content: site description here
---
1
2
3
4
5
6
2
3
4
5
6
The below method is the same as above.
2. Description
---
description: site description here
---
1
2
3
2
3