网站界面配置编写

1. 配置文件位置

在E:\my-docs文件夹下，找到.vitepress文件夹，然后找到config.mts文件，这就是网站的配置文件，在 VSC 中打开它。

2. 网页试运行

在 VSC 的终端中输入 npm run docs:dev （如果提示命令错误，可以去package.json文件里找找看，我就是这么发现AI给出的环境运行指令有误的），然后按回车键，等待网站运行。如果运行成功，终端会显示一个本地地址，复制到浏览器中即可看到网站。

3. 配置文件内容

在配置之前，请牢记自己建立网站时想好的需求，如多语言界面切换、关键词搜索等功能。将自己的需求告诉AI，然后AI会生成配置文件，复制到config.mts文件中覆盖即可。我因为想要自己学习敲代码，所以是根据AI写好的类别，我对照的VitePress官方指南手敲的。过程中走了很多菜鸟弯路，所有的弯路修正后配置文件如下：

import { defineConfig } from 'vitepress'

export default defineConfig({
  // 站点信息
  title: "实验室",
  description: "技术文档与个人作品集",

  // 我需求的核心配置：多语言支持
  locales: {
    root: { label: '简体中文', lang: 'zh-CN' },
    en: { label: 'English', lang: 'en-US', link: '/en/' } // en语言的配置，link: '/en/'，VitePress会自动让末尾的/表示指向en文件夹下的index.md文件
  },

  // markdown文章里代码行号功能开启
  markdown: {
    lineNumbers: true
  },

  // 主题配置！！！
  themeConfig: {
    // 导航栏上的logo
    logo: '/site_icon.svg', // 图片路径会自动从public文件夹中读取，关于默认文件夹命名详见下文给出的树状结构图说明

    // 我需求的核心配置：开启本地全文搜索
    search: {
      provider: 'local'
    },

    // 导航栏配置
    nav: [
      { text: '首页', link: '/' },
      // 带下拉列表的导航链接
      {
        text: '技术文档',
        items: [
          { text: '网站建立', link: "/docs/site-docs/" }
        ]
      },
      { text: '作品集', link: '/portfolio' }
    ],

    // 社交链接（可以放你的 GitHub）
    socialLinks: [
      { icon: 'github', link: 'https://github.com/Allenleila' },
      {
        // 小红书图标不在VitePress的默认图标库中，需要自定义
        icon: {
          svg: '<svg role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M512 0c282.764 0 512 229.236 512 512s-229.236 512-512 512S0 794.764 0 512 229.236 0 512 0zM284.486 374.924h-49.943v9.867l-0.559 94.115-0.14 21.411-0.558 100.352v2.234c0-1.35 0.046 3.63-3.398 3.63h-32.163l21.783 45.103h26.81c28.02 0.42 38.168-37.236 38.168-37.236V374.924z m348.393 17.315H519.215l1.21 50.362 29.65 0.465-0.839 157.324H507.02l-21.504 50.78H649.96v-51.2h-47.942V443.533h30.86v-51.2z m113.757-19.875h-48.733l0.79 19.875h-34.49v50.408h33.28v47.802h-50.408v51.2l50.362 0.42V651.17h49.106V541.649h78.382c10.52 0 11.357 10.985 11.357 10.985s2.653 29.975 1.909 42.729c-0.606 11.264-7.774 11.869-9.31 11.869h-40.96l19.55 43.985h36.91c35.933 0 39.703-31.185 39.983-41.518l-0.047-3.351v-71.913c0-42.682-43.52-44.404-43.52-44.404H828.23V442.6c0.372-43.567-50.362-50.362-50.362-50.362h-31.232v-19.875z m-344.81 222.952l-23.272 50.316c-0.465 5.958 17.222 5.492 17.222 5.492h60.51l22.713-51.2h-56.832c-18.711 0-20.34-4.608-20.34-4.608zM200.89 443.671h-49.664c-5.818 120.879-11.59 126.604-11.59 126.604l25.275 57.437c21.643-26.065 27.136-66.979 28.625-82.2 1.536-15.22 7.354-101.84 7.354-101.84z m166.028-0.651h-49.106s1.443 31.045 6.47 91.601c5.54 66.746 25.135 87.831 28.672 91.136l0.559 0.466 25.088-58.974c-5.167-0.465-11.637-124.23-11.637-124.23z m117.76-70.284h-47.523s-28.393 65.164-39.796 89.693c-11.358 24.53 11.776 29.603 11.776 29.603l25.6-0.419s-15.035 36.771-25.182 60.044c-10.146 23.319 14.616 27.136 14.616 27.136h56.971l17.315-42.31h-26.019c-6.842 0-3.258-10.566-3.258-10.566l34.956-81.64s-10.24 0.139-20.76 0.186h-14.708c-2.793-0.047-4.98-0.094-6.33-0.187-7.308-0.465-2.793-12.241-2.793-12.241l25.135-59.299z m290.537 70.516c5.725 0 5.073 3.817 5.073 3.817v42.31h-34.49v-46.127z m85.736-50.176a23.924 23.924 0 0 0-23.319 24.344v24.343h23.32a23.924 23.924 0 0 0 23.412-24.343 23.924 23.924 0 0 0-23.366-24.344z" p-id="13227" fill="currentColor"></svg>'
        },// 注意viewBox属性和path属性，这是根据svg图片的属性里的信息来复制的，其他如xmlns是svg默认的属性格式。fill color需要选currentColor和主题匹配
        link: 'https://www.xiaohongshu.com/user/profile/5f64e13a000000000100a35e'
      }
    ],

    //侧边栏
    sidebar: {
      // 1./docs/site-docs/路径下显示这个侧边栏
      '/docs/site-docs/': [
        {
          text: '网站搭建', link: '/docs/site-docs/',
          collapsed: true, // 折叠选项
          items: [
            { text: '运行环境搭建', link: '/docs/site-docs/dev' },
            { text: '配置文件编写', link: '/docs/site-docs/config' },
            { text: 'markdown写作规则', link: '/docs/site-docs/md_writting' }
          ]
        }
      ]

      // 2.xx路径下显示这个侧边栏

    },

    // 页脚
    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright © 2026-present AllenLeila'
    }

  }
})

重点！

config.mts里配置项有很多link链接，所以就像写作文要有大纲一样（写剧情一定要有大纲），网站文件的目录结构要先理清，再写配置。

如下图所示是我的网站文件目录结构，请参照并按自己的思路编辑自己的文件夹结构：

my-docs
├── docs // 我存放技术文档的文件夹（中文）
│   ├── site-docs // 我存放网站搭建文档的文件夹（中文）
│   │   ├── config.md
│   │   ├── dev.md
│   │   └── index.md
│   └── ~~~
├── en // 网站存放一切英文页面的文件夹
│   ├── docs // 我存放技术文档的文件夹（英文）
│   │   ├── site-docs // 我存放网站搭建文档的文件夹（英文）
│   │   │   ├── config.md
│   │   │   ├── dev.md
│   │   │   └── index.md
│   │   └── ~~~
│   ├── index.md // VitePress默认的英文首页，在自己选的en文件夹下不要改动位置
│   └── portfolio // 我存放作品集的文件夹（英文）
├── portfolio // 我存放作品集的文件夹（中文）
├── index.md // VitePress默认的首页，不要改动位置
├── .vitepress // VitePress网站的配置文件夹
│   ├── config.mts // VitePress网站的配置文件！！
│   └── cache // VitePress网站的缓存文件夹
├── package.json // npm包管理器的配置文件
├── public // 静态资源文件夹如图片等，VitePress会默认引用这个文件夹下的文件，请自己创建这个文件夹
│   └── site_icon.svg // 网站图标
└── README.md // 项目说明文件