---
title: 主题配置
createTime: 2022/05/14 10:43:53
author: pengzhanbo
permalink: /note/vuepress-theme-plume/theme-config/
---

虽然本主题希望尽可能的少写配置，但还是有些配置是不可省略的，而且也是为了保证一定程度的可定制性。

## 配置文件

`Vuepress` 默认的配置文件是`.vuepress/config.ts`，可能你的项目配置如下，

新建`.vuepress/config.ts`文件进行配置：
```
├─ {sourceDir}
│  ├─ .vuepress
│  │  └─ config.js
│  └─ README.md
├─ .gitignore
└─ package.json
```

`VuePress` 支持的配置，请查阅 [官方文档](https://v2.vuepress.vuejs.org/zh/guide/configuration.html)

在 `Vuepress@v2`中对于主题的配置，引入主题函数，在函数中进行配置
::: code-tabs
@tab ts
``` ts {3,6-8}
// .vuepress/config.ts
import { defineUserConfig } from 'vuepress'
import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
export default defineUserConfig({
  theme: themePlume({
    // more...
  })
})
```

@tab js
``` js {4-6}
// .vuepress/config.js
import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
module.exports = {
  theme: themePlume({
    // more...
  })
}
```

:::


## 配置

### home

- 类型： `false | NavLink`
- 默认值： `{ text: '首页', link: '/' }`
- 详情：
  首页的路径， 它将被用于：
  -  导航栏中 logo的链接；
  - 404页面的 *返回首页* 的链接；
  - navbar 中 首页的链接。
  
### logo

- 类型: `false | string`
- 默认值： `false`
- 详情： 导航栏中的logo。

### logoDark

- 类型 `false | string`
- 默认值： `false`
- 详情： Dark模式下，导航栏中的logo。

### darkMode

- 类型： `boolean`
- 默认值： `true`
- 详情： 是否启用 dark模式

### avatar

- 类型： `PlumeThemeAvatar`
- 默认值： `{}`
- 详情：配置站点博主的个人信息
  - `avatar.url`: 头像地址，用于右侧博主信息展示
  - `avatar.name`: 名称， 用于右侧博主信息展示
  - `avatar.description`: 座右铭，个人描述，用于右侧博主信息展示
- 示例：
  ``` ts
  export default {
    theme: themePlume({
      avatar: {
        url: '/avatar.jpg',
        name: '张三',
        description: '此处无银三百两，隔壁王二不曾偷',
      }
    })
  }
  ```
  
### social

- 类型： `false | PlumeThemeSocialOption`
- 默认值： `false`
- 详情： 个人社交信息配置。用于右侧博主信息展示，展示为社交图标。
  - `social.email`: 邮箱
  - `social.github`: 个人github地址
  - `social.QQ`: QQ账号
  - `social.weiBo`: 个人微博地址
  - `social.zhiHu`: 个人知乎地址
  - `social.facebook`: facebook地址
  - `social.twitter`: twitter 地址
  - `social.linkedin`: 领英 linkedin 地址
- 示例：
  ``` ts
  export default {
    theme: themePlume({
      social: {
        email: 'me@email.com'，
        github: 'https://github.com/zhangsan',
        QQ: '123456789',
      }
    })
  }
  ```

### article

- 类型： `string`
- 默认值： `/article/`
- 详情： 文章链接前缀

### tag

- 类型： `NavLink`
- 默认值： `{ text: '标签', link: '/tag/' }`
- 详情： 标签页配置，与 navbar 配置

### category

- 类型： `NavLink`
- 默认值： `{ text: '分类', link: '/category/ }`
- 详情： 分类页配置，与 navbar 配置

### archive

- 类型： `NavLink`
- 默认值： `{ text: '归档', link: '/timeline/' }`
- 详情： 归档页配置，与 navbar 配置

### navbar

- 类型： `(NavbarItem | NavbarGroup | string)[]`
- 默认值： `[]`
- 详情： 导航栏配置。
  
  为了配置导航栏元素，你可以将其设置为 导航栏数组 ，其中的每个元素是 `NavbarItem` 对象、 `NavbarGroup` 对象、或者字符串：
  - `NavbarItem` 对象应该有一个 text 字段和一个 link 字段，还有一个可选的 `activeMatch` 字段。
  - `NavbarGroup` 对象应该有一个 `text` 字段和一个 `children` 字段。 `children` 字段同样是一个 导航栏数组 。
  - 字符串应为目标页面文件的路径。它将会被转换为 `NavbarItem` 对象，将页面标题作为 `text` ，将页面路由路径作为 `link` 。
- 示例1：
  ``` js
  module.exports = {
    theme: themePlume({
      navbar: [
        // NavbarItem
        {
          text: 'Foo',
          link: '/foo/',
        },
        // NavbarGroup
        {
          text: 'Group',
          children: ['/group/foo.md', '/group/bar.md'],
        },
        // 字符串 - 页面文件路径
        '/bar/README.md',
      ],
    }),
  }
  ```
- 示例2：
  ``` js
  module.exports = {
    theme: themePlume({
      navbar: [
        // 嵌套 Group - 最大深度为 2
        {
          text: 'Group',
          children: [
            {
              text: 'SubGroup',
              children: ['/group/sub/foo.md', '/group/sub/bar.md'],
            },
          ],
        },
        // 控制元素何时被激活
        {
          text: 'Group 2',
          children: [
            {
              text: 'Always active',
              link: '/',
              // 该元素将一直处于激活状态
              activeMatch: '/',
            },
            {
              text: 'Active on /foo/',
              link: '/not-foo/',
              // 该元素在当前路由路径是 /foo/ 开头时激活
              // 支持正则表达式
              activeMatch: '^/foo/',
            },
          ],
        },
      ],
    }),
  }
  ```

### footer

- 类型： `false | { content: string; copyright: string }`
- 默认值： `false`
- 详情：页脚配置。

### notes

- 类型： `false | PlumeThemeNotesOptions`
- 默认值： `{ link: '/note', dir: 'notes', notes: [] }`
- 详情： 笔记配置， 笔记中的文章默认不会出现在首页文章列表
  
  你可以将配置的notes 配置到 navbar中，以便浏览查看

详细配置请查看 [此文档](/note/vuepress-theme-plume/notes-config/)

### themePlugins

- 类型：`PlumeThemePluginOptions`
- 默认值： `{}`
- 详情： 对主题内使用的插件进行自定义配置。
  
  主题使用的插件默认已进行了配置，默认情况下不需要进行修改，如果需要使用到细致的定制化，请查阅
  [此文档](/note/vuepress-theme-plume/plugins-config/)


## 完整示例

::: code-tabs
@tab ts
``` ts
import { defineUserConfig } from 'vuepress'
import { themePlume } from '@vuepress-plume/vuepress-theme-plume'

export default defineUserConfig({
  lang: 'zh-CN',
  locales: {
    '/': {
      lang: 'zh-CN',
      title: 'Theme Plume',
      description: 'The Theme for VuePress 2',
    },
  },
  dest: 'docs',
  head: [
    ['link', { rel: 'icon', href: '/g.gif' }],
    ['meta', { 'http-equiv': 'X-UA-Compatible', content: 'id=edg' }],
  ],
  theme: themePlume({
    logo: '/g.gif',
    darkMode: true,
    avatar: {
      name: 'theme plume',
      url: '/images/blogger.png',
      description: 'good good study, day day up !'
    },
    social: {
      email: 'me@email.com',
      github: 'https://github.com/me',
      QQ: '123456789',
    },
    navbar: [{ text: 'Theme-Plume', link: '/note/vuepress-theme-plume' }],
    notes: {
      dir: 'notes',
      link: '/note',
    },
    footer: {
      copyright: 'Copyright © 2022-present pengzhanbo',
      content: '',
    },
  }),
})
```

@tab js
``` js
import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
module.exports = {
  lang: 'zh-CN',
  locales: {
    '/': {
      lang: 'zh-CN',
      title: 'Theme Plume',
      description: 'The Theme for VuePress 2',
    },
  },
  dest: 'docs',
  head: [
    ['link', { rel: 'icon', href: '/g.gif' }],
    ['meta', { 'http-equiv': 'X-UA-Compatible', content: 'id=edg' }],
  ],
  theme: themePlume({
    logo: '/g.gif',
    darkMode: true,
    avatar: {
      name: 'theme plume',
      url: '/images/blogger.jpg',
      description: 'good good study, day day up !'
    },
    social: {
      email: 'me@email.com',
      github: 'https://github.com/me',
      QQ: '123456789',
    },
    navbar: [{ text: 'Theme-Plume', link: '/note/vuepress-theme-plume' }],
    notes: {
      dir: 'notes',
      link: '/note',
    },
    footer: {
      copyright: 'Copyright © 2022-present pengzhanbo',
      content: '',
    },
  }),
}
```

:::
