Skip to content

02. 配置与主题

VitePress 提供灵活的配置选项和主题系统。

一、基础配置

typescript
import { defineConfig } from "vitepress";

export default defineConfig({
    // 网站标题
    title: "我的网站",

    // 网站描述
    description: "网站描述",

    // 忽略死链接
    ignoreDeadLinks: true,

    // 基础路径
    base: "/",

    // 语言
    lang: "zh-CN",

    // 头部标签
    head: [
        [
            "link",
            { rel: "icon", href: "/favicon.ico" }
        ]
    ]
});

二、主题配置

typescript
export default defineConfig({
    themeConfig: {
        // Logo
        logo: "/logo.png",

        // 导航栏
        nav: [
            { text: '首页', link: '/' },
            {
                text: '指南',
                items: [
                    { text: '介绍', link: '/guide/intro' },
                    { text: '开始', link: '/guide/getting-started' }
                ]
            }
        ],

        // 侧边栏
        sidebar: {
            '/guide/': [
                {
                    text: '开始',
                    collapsible: true,
                    items: [
                        { text: '介绍', link: '/guide/intro' },
                        { text: '快速开始', link: '/guide/getting-started' }
                    ]
                }
            ]
        },

        // 社交链接
        socialLinks: [
            { icon: 'github', link: 'https://github.com/username/repo' }
        ],

        // 页脚
        footer: {
            message: 'MIT License',
            copyright: 'Copyright © 2024'
        }
    }
});

三、自定义主题

typescript
// 使用自定义主题
export default defineConfig({
    theme: {
        extends: {},
    }
});

总结

灵活的配置和主题系统可以满足各种文档网站的需求。