项目结构配置解析

经过上一节的一通操作已经拥有了一个没有任何配置的vitepress项目了，你也发现了没有配置空空如也，接下来我们来配置丰富一下这个项目。

当前你的项目结构应该是这样：

├─ docs
│  ├─ .vitepress
│  │  └─ **
│  └─ index.md
├─ node_modules
├─ package.json
└─ yarn.lock

一个 VitePress 站点必要的配置文件是 .vitepress/config.js，它应当导出一个 JavaScript 对象。

动手吧！在.vitepress下创建一个config.js文件，并写入以下内容：

mmodule.exports = {
    title: 'VitePress',
    description: '这是一句描述。',
    base: '/',
    themeConfig: {
        logo: '/images/avatar.jpg',
        // 主导航（顶部的导航）
        nav: [
            {
                text: 'vitepress',
                items: [
                    { text: 'vitepress', link: '/vitepress/intro' }
                ]
            },
            { text: '我自己', link: '' }
        ],
        // 侧边导航
        sidebar: {
            '/vitepress': [
                {
                    text: "VitePress搭建记录",
                    items: [
                        {
                            text: "什么是VitePress?",
                            link: "/vitepress/intro"
                        },
                        {
                            text: "快速上手",
                            link: "/vitepress/1"
                        },
                        {
                            text: "项目结构配置解析",
                            link: "/vitepress/2"
                        }
                    ],
                },
            ]
        },
        // 菜单中文化
        outlineTitle: '本页目录',
        darkModeSwitchLabel: '切换主题',
        sidebarMenuLabel: '菜单',
        returnToTopLabel: '回到顶部',
        docFooter: {
            prev: '上一页',
            next: '下一页'
        },
        // 社交链接
        socialLinks: [{ icon: "github", link: "https://github.com" }]
    }
}

tips: 所有自建文件都应该在docs文件夹下。静态文件（图片啥的）存放在 docs/public/** 下，直接使用/**根目录访问。例如logo。

自己动手 --> 创建配置文件中的 文件夹 以及 相关文件

最后的项目结构应该是这样：

├─ docs
│  ├─ .vitepress
│  │  ├─ config.js
│  │  └─ **
│  ├─ public/images/*
│  ├─ vitepress
│  │  ├─ intro.md
│  │  └─ ** 
│  └─ index.md
├─ node_modules
├─ package.json
└─ yarn.lock

想要了解更多请访问官网：https://vitepress.dev/

更多功能自定义请百度：www.baidu.com

项目结构配置解析 ​

项目结构配置解析