当前位置：首页 > article >正文

VuePress搭建文档网站/个人博客（详细配置）之站点配置

article 2024/11/12 20:14:54

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

宫女如花满春殿，只今惟有鹧鸪飞。
——《越中览古》

文章目录

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 驱动的静态网站生成器',
  //   },
  // },
})