天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
宫女如花满春殿，只今惟有鹧鸪飞。
——《越中览古》
文章目录
VuePress的站点配置
即基础配置项，以下内容适用于初始搭建时的站点配置
对于vuepress站点的基础配置如下：base、lang、title、description、head、locales
1. 站点的基础路径base
- 类型：string
- 默认值： /
- 注意点：base参数以/开始和结束的绝对路径
如站点部署的路径为https://hanshanlibai.com/
现在想部署到上面路径的子路径下，如https://hanshanlibai.com/test/
则base参数定义为/test/
2. 站点的语言lang
- 类型：string
- 默认值：en-US
- 注意点：该参数会在最终的HTML中作为HTML标签的lang属性，可以设置在不同语言的locales中
一般来说我们将参数设置成zh-CN对应的是中文，但是如果配置中文，想要生效的话，需要配置对应的文档，后续文章内会详细说明这一项，可参考专栏后续文章中多语言配置篇
3. 站点的标题title
- 类型：string
- 默认值：‘’
- 注意点：该参数会作为页面标题的后缀，在默认主题的导航栏中显示
4. 站点的描述description
- 类型：string
- 默认值：‘’
- 注意点：会在HTML中作为
<meta name="description" />标签的content属性，并会被每个页面的Frontmatter中的description字段覆盖
5. 站点的请求头参数head
- 类型：HeadConfig[]
- 默认值：[]
在HTML的head标签内加入的额外标签
通过[tagName, { attrName: attrValue }, innerHTML?]的格式添加标签
如果attrValue是一个pathname则不会被自动添加base前缀，需要的话可手动添加前缀
如增加一个自定义的favicon
export default {
head: [['link', {
rel: 'icon', href: '/images/logo.png' }]],
}
渲染为
<head>
<link rel="icon" href="/images/logo.png" />
</head>
6. 站点的多语言配置
- 类型：
{ [path: string]: Partial<SiteLocaleData> } - 默认值：{}
多语言支持的配置，这里只是配置了参数，没有配置文档内容，可参考后续文章多语言配置篇
可使用的字段：lang、title、description、head
举例
export default {
locales: {
// 键名是该语言所属的子路径
// 作为特例，默认语言可以使用 '/' 作为其路径。
'/': {
lang: 'en-US',
title: 'VuePress',
description: 'Vue-powered Static Site Generator',
},
'/zh/': {
lang: 'zh-CN',
title: 'VuePress',
description: 'Vue 驱动的静态网站生成器',
},
},
}
7. 主题配置
主题配置项默认如下，详细配置可参考专栏后续主题配置篇
// 主题配置， 默认内容为空，此时只有一个黑色和白色主题的切换按钮
theme: defaultTheme(),
8. 打包工具配置
打包工具配置默认如下，详细配置可参考专栏后续打包工具配置篇
bundler: viteBundler(),
9. 站点基础配置完整内容
config.js中的站点配置完整后如下
import {
viteBundler } from '@vuepress/bundler-vite'
import {
defaultTheme } from '@vuepress/theme-default'
import {
defineUserConfig } from 'vuepress'
export default defineUserConfig({
bundler: viteBundler(),
// 主题配置， 默认内容为空，此时只有一个黑色和白色主题的切换按钮
theme: defaultTheme(),
// 子路由配置，如果想部署到http://localhost:8080/hanshan/ 则需要将base设置成/hanshan/ 注意base必须以/开始并以/结束
base: '/hanshan/',
// 站点语言配置
lang: 'zh-CN',
// 站点页面标题配置
title: '你好， VuePress ！',
// 站点页面描述
description: '这是我的第一个 VuePress 站点',
// 请求头配置参数， 如自定义页面tab标签的图标favicon
// head: [['link', { rel: 'icon', href: '/images/logo.png' }]],
// 站点多语言配置，暂时用不到，不开启
// locales: {
// // 键名是该语言所属的子路径
// // 作为特例，默认语言可以使用 '/' 作为其路径。
// '/': {
// lang: 'en-US',
// title: 'VuePress',
// description: 'Vue-powered Static Site Generator',
// },
// '/zh/': {
// lang: 'zh-CN',
// title: 'VuePress',
// description: 'Vue 驱动的静态网站生成器',
// },
// },
})
感谢阅读，祝君暴富！