Configuration Guide

Learn how to configure LeafMove Smart Documentation Center to meet your specific needs.

🔧 Basic Configuration

Site Configuration

Edit docs/.vuepress/config.js to customize your site:

export default defineUserConfig({
  locales: {
    '/': {
      lang: 'zh-CN',
      title: 'Your Chinese Title',
      description: 'Your Chinese description'
    },
    '/en/': {
      lang: 'en-US',
      title: 'Your English Title',
      description: 'Your English description'
    }
  }
})

Theme Configuration

Customize the default theme:

theme: defaultTheme({
  locales: {
    '/': {
      navbar: [
        { text: 'Home', link: '/' },
        { text: 'Guide', link: '/guide/' }
      ]
    }
  }
})

📝 Navigation Configuration

Configure the top navigation bar:

navbar: [
  { text: 'Home', link: '/' },
  { text: 'Guide', link: '/guide/' },
  { text: 'API', link: '/api/' },
  {
    text: 'External',
    children: [
      { text: 'GitHub', link: 'https://github.com' },
      { text: 'Website', link: 'https://example.com' }
    ]
  }
]

Set up the sidebar navigation:

sidebar: {
  '/guide/': [
    {
      text: 'Guide',
      children: [
        '/guide/README.md',
        '/guide/getting-started.md'
      ]
    }
  ]
}

🔍 Search Configuration

Configure the search functionality:

plugins: [
  searchPlugin({
    locales: {
      '/': {
        placeholder: 'Search Documentation'
      }
    },
    hotKeys: ['s', '/'],
    maxSuggestions: 10
  })
]

🎨 Styling and Themes

Custom Styles

Create custom styles in docs/.vuepress/styles/index.scss:

// Custom variables
:root {
  --c-brand: #3eaf7c;
  --c-brand-light: #4abf8a;
}

// Custom styles
.navbar {
  background-color: var(--c-brand);
}

Theme Customization

Override theme components by creating files in docs/.vuepress/components/.

🔌 Plugin Configuration

Adding Plugins

Install and configure additional plugins:

npm install @vuepress/plugin-pwa

plugins: [
  pwaPlugin({
    // PWA options
  })
]

🌐 Multi-language Setup

Language Configuration

Configure multiple languages:

locales: {
  '/': {
    lang: 'en-US',
    title: 'English Title'
  },
  '/zh/': {
    lang: 'zh-CN',
    title: '中文标题'
  }
}

Language-specific Content

Create language-specific directories:

docs/
├── README.md          # English
├── guide/
│   └── README.md
├── zh/
│   ├── README.md      # Chinese
│   └── guide/
│       └── README.md

📊 Advanced Configuration

Build Configuration

Customize the build process:

bundler: viteBundler({
  viteOptions: {
    // Vite options
  }
})

SEO Configuration

Optimize for search engines:

head: [
  ['meta', { name: 'keywords', content: 'documentation, vuepress' }],
  ['meta', { name: 'author', content: 'Your Name' }]
]