0
# Theme Configuration
1

2
VuePress theme configuration function that sets up the default theme with built-in plugins, component aliases, and conditional features based on theme options.
3

4
## Capabilities
5

6
### Default Theme Function
7

8
Main theme configuration function exported from the package.
9

10
```javascript { .api }
11
/**
12
 * VuePress default theme configuration function
13
 * @param {object} options - Theme configuration options
14
 * @param {object} ctx - VuePress context containing themeConfig and siteConfig
15
 * @returns {object} Theme configuration object with alias and plugins
16
 */
17
function defaultTheme(options, ctx): {
18
  alias(): object;
19
  plugins: Array<string | [string, object]>;
20
};
21
```
22

23
**Usage Examples:**
24

25
```javascript
26
// Basic theme usage
27
module.exports = {
28
  theme: '@vuepress/theme-default',
29
  themeConfig: {
30
    navbar: [
31
      { text: 'Home', link: '/' },
32
      { text: 'Guide', link: '/guide/' }
33
    ]
34
  }
35
}
36

37
// With theme options
38
module.exports = {
39
  theme: ['@vuepress/theme-default', {
40
    activeHeaderLinks: false
41
  }],
42
  themeConfig: {
43
    smoothScroll: true,
44
    algolia: {
45
      apiKey: 'your-api-key',
46
      indexName: 'your-index'
47
    }
48
  }
49
}
50
```
51

52
### Theme Configuration Object
53

54
The theme function returns a configuration object with aliases and plugins.
55

56
```javascript { .api }
57
interface ThemeConfig {
58
  /** Component aliases for conditional loading */
59
  alias(): {
60
    '@AlgoliaSearchBox': string;
61
  };
62
  /** Array of VuePress plugins to load */
63
  plugins: Array<string | [string, object]>;
64
}
65
```
66

67
### Built-in Plugins
68

69
The theme automatically configures these plugins:
70

71
```javascript { .api }
72
// Plugin configurations included in theme
73
const plugins = [
74
  ['@vuepress/active-header-links', options.activeHeaderLinks],
75
  '@vuepress/search',
76
  '@vuepress/plugin-nprogress',
77
  ['container', { type: 'tip', defaultTitle: { '/': 'TIP', '/zh/': '提示' }}],
78
  ['container', { type: 'warning', defaultTitle: { '/': 'WARNING', '/zh/': '注意' }}],
79
  ['container', { type: 'danger', defaultTitle: { '/': 'DANGER', '/zh/': '警告' }}],
80
  ['container', { type: 'details', before: info => `<details class="custom-block details">${info ? `<summary>${info}</summary>` : ''}\n`, after: () => '</details>\n' }],
81
  ['smooth-scroll', enableSmoothScroll]
82
];
83
```
84

85
### Component Aliases
86

87
Dynamic component resolution based on configuration:
88

89
```javascript { .api }
90
interface ComponentAliases {
91
  /** 
92
   * Algolia search box - resolves to AlgoliaSearchBox.vue if algolia config present,
93
   * otherwise resolves to noopModule.js (empty export)
94
   */
95
  '@AlgoliaSearchBox': string;
96
}
97
```
98

99
### Theme Options
100

101
Options passed to the theme function:
102

103
```javascript { .api }
104
interface ThemeOptions {
105
  /** Enable/disable active header links plugin */
106
  activeHeaderLinks?: boolean | object;
107
}
108
```
109

110
### Theme Context
111

112
VuePress context passed to theme function:
113

114
```javascript { .api }
115
interface ThemeContext {
116
  /** Theme configuration from site config */
117
  themeConfig: {
118
    /** Algolia search configuration */
119
    algolia?: {
120
      apiKey: string;
121
      indexName: string;
122
      algoliaOptions?: object;
123
    };
124
    /** Enable smooth scrolling */
125
    smoothScroll?: boolean;
126
    /** Locale-specific configurations */
127
    locales?: {
128
      [path: string]: {
129
        algolia?: object;
130
      };
131
    };
132
  };
133
  /** Site-wide configuration */
134
  siteConfig: {
135
    /** Locale configurations */
136
    locales?: object;
137
  };
138
}
139
```
140

141
## Container Types
142

143
The theme provides built-in container types for enhanced content:
144

145
```markdown
146
::: tip
147
This is a tip container
148
:::
149

150
::: warning  
151
This is a warning container
152
:::
153

154
::: danger
155
This is a danger container
156
:::
157

158
::: details Click to expand
159
This is a details container with collapsible content
160
:::
161
```