天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
宫女如花满春殿，只今惟有鹧鸪飞。
——《越中览古》
文章目录
- VuePress的站点配置
- 1. 站点的基础路径base
- 2. 站点的语言lang
- 3. 站点的标题title
- 4. 站点的描述description
- 5. 站点的请求头参数head
- 6. 站点的多语言配置
- 7. 主题配置
- 8. 打包工具配置
- 9. 站点基础配置完整内容
VuePress个人博客专栏
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 驱动的静态网站生成器',// },// },
})
感谢阅读，祝君暴富！
