150 lines
12 KiB
Markdown
150 lines
12 KiB
Markdown
# Configuration
|
|
|
|
Learn how to configure Docus.
|
|
|
|
::code-group
|
|
|
|
```ts [Minimal app.config.ts]
|
|
export default defineAppConfig({
|
|
docus: {
|
|
title: 'Docus',
|
|
description: 'My Docus Project',
|
|
url: 'http://docus.dev'
|
|
}
|
|
})
|
|
```
|
|
|
|
```ts [Complete app.config.ts]
|
|
export default defineAppConfig({
|
|
docus: {
|
|
title: 'Docus',
|
|
description: 'My Docus Project',
|
|
url: 'http://docus.dev',
|
|
image: '/social-card-preview.png',
|
|
socials: {
|
|
twitter: '@nuxt_js',
|
|
github: 'nuxt-themes/docus',
|
|
},
|
|
github: {
|
|
root: 'content',
|
|
edit: true,
|
|
contributors: false
|
|
},
|
|
layout: 'default',
|
|
aside: {
|
|
level: 1,
|
|
filter: [],
|
|
},
|
|
header: {
|
|
title: false,
|
|
logo: true,
|
|
showLinkIcon: false
|
|
},
|
|
footer: {
|
|
credits: {
|
|
icon: 'IconDocus',
|
|
text: 'Powered by Docus',
|
|
href: 'https://docus.dev',
|
|
},
|
|
textLinks: [
|
|
{
|
|
text: 'Nuxt',
|
|
href: 'https://nuxt.com',
|
|
target: '_blank',
|
|
rel: 'noopener'
|
|
}
|
|
],
|
|
iconLinks: [
|
|
{
|
|
label: 'NuxtJS',
|
|
href: 'https://nuxtjs.org',
|
|
component: 'IconNuxtLabs',
|
|
},
|
|
{
|
|
label: 'Vue Telescope',
|
|
href: 'https://vuetelescope.com',
|
|
component: 'IconVueTelescope',
|
|
},
|
|
],
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
::
|
|
|
|
| **Key** | **Type** | **Default** | **Description** |
|
|
| ---------------------------- | ---------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
|
|
| `title` | `string` | Docus | Website title |
|
|
| `titleTemplate` | `string` | Docus | Website title template |
|
|
| `description` | `string` | My Docus Project | Website description |
|
|
| `url` | `string` | | Website URL |
|
|
| `layout` | `string` | default | Fallback layout to use (supports `default` or `page`) |
|
|
| **Socials** | | | |
|
|
| `socials` | `object` | `{}` | Social links |
|
|
| `socials.github` | `string` | | The repository to use on GitHub links |
|
|
| `socials.twitter` | `string` | | The account to use on Twitter links |
|
|
| `socials.youtube` | `string` | | The channel to use on Youtube links |
|
|
| `socials.instagram` | `string` | | The account to use on Instagram links |
|
|
| `socials.facebook` | `string` | | The account to use on Facebook links |
|
|
| `socials.medium` | `string` | | The account to use on Medium links |
|
|
| `socials.[social]` | `object` | | Override social or display custom one |
|
|
| `socials.[social].label` | `string` | | A label to use for the social |
|
|
| `socials.[social].icon` | `string` | | A icon to use for the social |
|
|
| `socials.[social].href` | `string` | | A link to use for the social |
|
|
| `socials.[social].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) |
|
|
| **Header** | | | |
|
|
| `header` | `object` | | Header configuration |
|
|
| `header.logo` | `boolean` | | Whether or not to use `Logo.vue` as the header logo |
|
|
| `header.title` | `string` | | If set to a string, will be used in the header |
|
|
| `header.showLinkIcon` | `boolean` | | If set to `true` links icons will show in the header |
|
|
| `header.exclude` | `string[]` | | An array of path to exclude out from the header navigation |
|
|
| `header.fluid` | `boolean` | `true` | Make header `Container` fluid |
|
|
| **Main** | | | |
|
|
| `main` | `object` | | Main configuration |
|
|
| `main.fluid` | `boolean` | `true` | Make main content `Container` fluid |
|
|
| `main.padded` | `boolean` | `true` | Make main content `Container` padded |
|
|
| **Aside** | | | |
|
|
| `aside` | `object` | | Aside configuration |
|
|
| `aside.level` | `string` | 0 | Aside base level of nesting |
|
|
| `aside.collapsed` | `boolean` | | Will be used as default value for collapsible navigation categories |
|
|
| `aside.exclude` | `string[]` | | An array of path to exclude out from the aside navigation |
|
|
| **Footer** | | | |
|
|
| `footer` | `object` | | Footer configuration |
|
|
| `footer.credits` | `object` | | An object defining the bottom left credits |
|
|
| `footer.credits.icon` | `object` | | The icon to use for the credits |
|
|
| `footer.credits.text` | `object` | | The text to use for the credits |
|
|
| `footer.textLinks` | `array` | `[]` | An array of texts to display at the center of footer |
|
|
| `footer.textLinks[0].text` | `string` | | The text to display |
|
|
| `footer.textLinks[0].href` | `string` | | A link to use for the text |
|
|
| `footer.textLinks[0].target` | `string` | `_self` | Where to display the linked URL, as the name for a browsing context |
|
|
| `footer.textLinks[0].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) |
|
|
| `footer.iconLinks` | `array` | `[]` | An array of icons to display in the footer |
|
|
| `footer.iconLinks[0].label` | `string` | | A label to use for the icon |
|
|
| `footer.iconLinks[0].href` | `string` | | A link to use for the icon |
|
|
| `footer.iconLinks[0].icon` | `string` | | The icon to use (can be a component name) |
|
|
| `footer.iconLinks[0].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) |
|
|
| `footer.fluid` | `boolean` | `true` | Make footer `Container` fluid |
|
|
| **GitHub** | | | |
|
|
| `github` | `object` | `false` | GitHub integration configuration |
|
|
| `github.dir` | `string` | | Directory containing the files to be edited |
|
|
| `github.branch` | `string` | | Branch to start editing |
|
|
| `github.repo` | `string` | | Name of the GitHub repo to edit files |
|
|
| `github.owner` | `string` | | Owner of the repo |
|
|
| `github.edit` | `boolean` | | Toggle "Edit this page on Github" component on documentation pages |
|
|
**Search** ||||
|
|
| `fuse` | `object` || useFuse [options](https://vueuse.org/integrations/useFuse/) |
|
|
|
|
|
|
## Customizing the logo
|
|
|
|
To update the logo in the header, create a component in `components/Logo.vue` with your own logo.
|
|
|
|
In this example, the image is located at `/public/img`.
|
|
|
|
```vue [components/Logo.vue]
|
|
<template>
|
|
<img width="120" src="/img/YOURLOGO.png"/>
|
|
</template>
|
|
```
|