涵盖基乎所有和主题相关配置项,帮助你快速开始搭建和配置Maker主题.
# Header
// .vuepress/config.js
module.exports = {
// 网站标题
title: '1980\'s Maker',
// 网站描述
description: '一个出生于80年代的程序员 -- 喜爱创[客]、美[食]、动[画]、怀[旧]的新手艺人',
themeConfig: {
// 网站logo
logo: '/logo.jpg'
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Search
// .vuepress/config.js
module.exports = {
themeConfig: {
// Search 提示
searchPlaceholder: 'Search',
// Search 建议列表条目数
searchMaxSuggestions: 10,
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# Nav
// .vuepress/config.js
module.exports = {
themeConfig: {
nav: [
// 内部链接
{ text: '🏠 Home', link: '/' },
{ text: '📖 Theme', link: '/categories/theme/' },
{ text: '🐉 Maker', link: '/_post/maker.md' },
{ text: '🔥 Animation', link: '/categories/animation/' },
{ text: '📽 Old Time', link: '/categories/oldtime/' },
{ text: '🔗 friend-links', link: '/friend-links/' },
// 外部链接
{ text: 'External', link: 'https://google.com' },
],
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Social
设置 sidebar 底部社交媒体 URL。
- type 对应Icon名称
- type github会自动补全链接, 无须填写全路径
- type email自动生成mailto链接
// .vuepress/config.js
module.exports = {
themeConfig: {
social: [
{
type: 'email',
link: 'cmgddd@163.com'
},
{
type: 'github',
link: '80maker/vuepress-theme-maker'
},
{
type: 'qq',
link: '//qm.qq.com/cgi-bin/qm/qr?k=fknyQ434nkzVUWUmJ6rpIPctkS9eyQaZ&jump_from=webapi'
},
{
type: 'feed',
link: '/rss.xml'
}
],
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Reward
设置文章底部的打赏功能。
// .vuepress/config.js
module.exports = {
themeConfig: {
reward: {
text: 'Buy me a cup of coffee ☕.',
// 是否启用
enable: true,
ways: [
{
name: 'wechat',
icon: 'wechat',
qrcode: '/images/wechat.png',
text: 'This is a Wechat Pay qrcode',
color: 'rgb(9, 187, 7)'
},
{
name: 'alipay',
symbol: 'alipay',
qrcode: '/images/alipay.png',
text: 'This is a Alipay Pay qrcode',
color: '#1296db'
}
]
},
}
}
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
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
# Footer
支持自定义HTML
// .vuepress/config.js
module.exports = {
themeConfig: {
copyright: '© 2020 ❤️ <a target="_blank" href="https://17ria.com/">Neil Chen</a>',
}
}
1
2
3
4
5
6
2
3
4
5
6
# Blog
对应 @vuepress/blog 插件的options
// .vuepress/config.js
module.exports = {
themeConfig: {
blog: {
directories: [
{
id: 'post',
dirname: '_post',
path: '/post/',
itemPermalink: '/post/:year/:month/:day/:slug.html',
pagination: {
perPagePosts: 10,
},
}
],
frontmatters: [
{
id: "tag",
keys: ['tag', 'tags'],
path: '/tags/',
frontmatter: { title: 'Tag' },
pagination: {
lengthPerPage: 10
}
},
{
id: "category",
keys: ['category', 'categories'],
path: '/categories/',
frontmatter: { title: 'Category' },
pagination: {
lengthPerPage: 10
}
}
],
sitemap: {
hostname: 'hostname'
},
feed: {
canonical_base: 'canonical_base',
},
comment: {
service: 'vssue',
owner: 'owner',
repo: 'repo',
clientId: 'your clientId',
clientSecret: 'your clientSecret',
}
}
}
}
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
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
# Seo
对应 vuepress-plugin-seo 插件的options
// .vuepress/config.js
module.exports = {
themeConfig: {
// 默认配置
seo: {
siteTitle: (_, $site) => $site.title,
title: $page => $page.title,
description: $page => $page.frontmatter.description,
author: (_, $site) => $site.themeConfig.author,
tags: $page => $page.frontmatter.tags,
twitterCard: _ => 'summary_large_image',
type: $page => ['articles', '_post', 'blog'].some(folder => $page.regularPath.startsWith('/' + folder)) ? 'article' : 'website',
url: (_, $site, path) => ($site.themeConfig.hostname || '') + path,
image: ($page, $site) => $page.frontmatter.cover && (($site.themeConfig.hostname && !$page.frontmatter.cover.startsWith('http') || '') + $page.frontmatter.cover),
publishedAt: $page => $page.frontmatter.date && new Date($page.frontmatter.date),
modifiedAt: $page => $page.lastUpdated && new Date($page.lastUpdated),
}
}
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
# Pwa
对应 @vuepress/plugin-pwa 插件的options
// .vuepress/config.js
module.exports = {
head: [
['link', { rel: 'icon', href: '/logo.jpg' }],
['link', { rel: 'manifest', href: '/manifest.json' }],
['meta', { name: 'theme-color', content: '#3eaf7c' }],
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png' }],
['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
['meta', { name: 'msapplication-TileColor', content: '#000000' }],
['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' }]
],
themeConfig: {
pwa: {
serviceWorker: true,
popupComponent: 'ThemeSWUpdatePopup',
updatePopup: {
'/': {
message: "发现新内容可用",
buttonText: "刷新"
}
}
}
}
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
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
提示
为了让你的网站完全地兼容 PWA，你需要:
在 .vuepress/public 提供 Manifest 和 icons
在 .vuepress/config.js 添加正確的 head links.
更多细节，请参见 MDN docs about the Web App Manifest (opens new window).