周陆军博客

Appearance

On this page

Theme Configs ​

Theme configs let you customize your theme. You can define theme configs by adding themeConfig key to the config file.

typescript
export default {
  lang: 'en-US',
  title: 'VitePress',
  description: 'Vite & Vue powered static site generator.',

  // Theme related configurations.
  themeConfig: {
    logo: '/logo.svg',
    nav: [...],
    sidebar: { ... }
  }
}

Here it describes the settings for the VitePress default theme. If you're using a custom theme created by others, these settings may not have any effect, or might behave differently.

  • Type: string

Logo file to display in nav bar, right before the site title.

typescript
export default {
  themeConfig: {
    logo: '/logo.svg'
  }
}

siteTitle ​

  • Type: string | false

You can customize this item to replace the default site title (title in app config) in nav. When set to false, title in nav will be disabled. Useful when you have logo that already contains the site title text.

typescript
export default {
  themeConfig: {
    siteTitle: 'Hello World'
  }
}
  • Type: NavItem

The configuration for the nav menu item. You may learn more details at Theme: Nav.

js
export default {
  themeConfig: {
    nav: [
      { text: 'Guide', link: '/guide' },
      {
        text: 'Dropdown Menu',
        items: [
          { text: 'Item A', link: '/item-1' },
          { text: 'Item B', link: '/item-2' },
          { text: 'Item C', link: '/item-3' }
        ]
      }
    ]
  }
}
typescript
type NavItem = NavItemWithLink | NavItemWithChildren

type NavItemWithLink = {
  text: string
  link: string
  activeMatch?: string
}

interface NavItemWithChildren {
  text?: string
  items: NavItemWithLink[]
}
  • Type: Sidebar

The configuration for the sidebar menu item. You may learn more details at Theme: Nav.

js
export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Guide',
        items: [
          { text: 'Introduction', link: '/introduction' },
          { text: 'Getting Started', link: '/getting-started' },
          ...
        ]
      }
    ]
  }
}
typescript
type Sidebar = SidebarGroup[] | SidebarMulti

interface SidebarMulti {
  [path: string]: SidebarGroup[]
}

interface SidebarGroup {
  text: string
  items: SidebarItem[]
  collapsible?: boolean
  collapsed?: boolean
}

interface SidebarItem {
  text: string
  link: string
}
  • Type: SocialLink

You may define this option to show your social account links with icons in nav.

js
export default {
  themeConfig: {
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
      { icon: 'twitter', link: '...' },
      { icon: 'discord', link: '...' }
    ]
  }
}
typescript
interface SocialLink {
  icon: SocialLinkIcon
  link: string
}

type SocialLinkIcon =
  | 'discord'
  | 'facebook'
  | 'github'
  | 'instagram'
  | 'linkedin'
  | 'slack'
  | 'twitter'
  | 'youtube'
  • Type: Footer

Footer configuration. You can add a message and copyright. The footer will displayed only when the page doesn't contain sidebar due to design reason.

typescript
export default {
  themeConfig: {
    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright © 2019-present Evan You'
    }
  }
}
typescript
export interface Footer {
  message?: string
  copyright?: string
}

lastUpdatedText ​

  • Type: string
  • Default: Last updated

The prefix text showing right before the last updated time.

typescript
export default {
  themeConfig: {
    lastUpdatedText: 'Updated Date'
  }
}

carbonAds ​

  • Type: CarbonAds

A option to display Carbon Ads.

typescript
export default {
  themeConfig: {
    carbonAds: {
      code: 'your-carbon-code',
      placement: 'your-carbon-placement'
    }
  }
}
typescript
export interface CarbonAds {
  code: string,
  placement: string
}

Learn more in Theme: Carbon Ads