Vuepress 2 专栏目录【已完结】

1. 入门阶段

1. Vuepress 2从0-1保姆级入门教程——环境配置篇
2. Vuepress 2从0-1保姆级入门教程——安装流程篇
3. Vuepress 2从0-1保姆级入门教程——文档配置篇
4. Vuepress 2从0-1保姆级入门教程——主题与部署

2.进阶阶段

1. Vuepress 2从0-1保姆级进阶教程——全文搜索篇
2. Vuepress 2从0-1保姆级进阶教程——美化与模版
3. Vuepress 2从0-1保姆级进阶教程——标准化流程

更新日志

• Markdown引用样式改为图片，更加醒目
• config.ts示例代码修改
• 更新到vuepress2.0.0-rc.13，默认主题2.0.0-rc.35

教程仓库：https://gitee.com/passwordgloo/vuepress2-tutorial
蓝奏云：https://wwk.lanzouo.com/b04x8f3hg
密码：666

通过Vuepress 2 安装流程篇，我们成功搭建一个主页附带子版块页面的文档项目，下面我们将先细致分析配置结构，然后再一步步完善config.ts文件

一、配置文件夹结构

欲求其解，必窥其内。文档项目配置📁.vuepress包含以下内容

📁.vuepress
├── 📂 .cache git已忽略
│  └──……
├── 📂 public 静态文件夹
│   └── comet.png
├── 📂 .temp git已忽略
│  ├── internal
│   │   ├── clientConfigs.js客户端配置
│   │   ├── pagesComponents.js页面组件
│   │   ├── pagesData.js
│   │   ├── pagesRoutes.js 页面路由，不明白的看安装篇-路由
│   │   ├──siteData.js
│   │   └── themeData.js
│   ├── pages
│   │   ├── 404.html.js
│   │   ├── 404.html.vue
│   │   ├── C
│   │   │   ├── index.html.js 子模块首页
│   │   │   └── index.html.vue
│   │   ├── index.html.js首页，也就是站点README.md内容
│   │   └── index.html.vue
│   ├── styles
│   │   ├── index.scss样式文件
│   │   └── palette.scss
│   └── vite-root
│       └── index.html
└── 📋 config.ts 亟待完成的配置文件

我们看到每个Markdown文件都解析为.js和.vue后缀文件，唯独缺失config.ts配置文件，里面包含导航栏、侧边栏、首页logo等设置，而这正是我们需要做的

二、配置文件基本结构

import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress/cli'
import { viteBundler } from '@vuepress/bundler-vite'

export default defineUserConfig({
		//favicon
		//站点语言设置
    theme: defaultTheme({
    	//logo
		//repo 仓库地址
		//主题语言设置
        //默认主题其他配置请写在这里！！！
    })
	bundler: viteBundler(),
})

三、配置文件设置选项

（一）标签栏小图标支持

favicon.ico（favourite icon缩写）是网站收藏夹图标，图片本地地址在public文件夹内，图片地址也可选填网络地址

1️⃣ 请先将favicon.ico文件放到📁 public内
2️⃣ 设置小图标位置

head: [['link', { rel: 'icon', href: '/favicon.ico' }]],

3️⃣ 预览

pnpm docs:dev

（二）仓库设置

repo: 'username/repoName',  
//默认识别为GitHub用户名和仓库名

预览

pnpm docs:dev

（三）Logo

1️⃣ 请先将Logo文件放到📁 public文件夹里
2️⃣ 设置logo文件位置，支持在线链接

logo: 'comet.png', //文件在public文件夹内

3️⃣ 预览

pnpm docs:dev

（四）多语言设置

1. 站点语言设置

例如：/zh/存放中文页面，/en/存放英文页面

  lang: 'zh-CN',
  // 默认站点语言为英文
  // lang: 'en-US',

  locales: {
    '/': {
        selectLanguageName: '简体中文',
        title: '彗星文档',
        description: '繁星似海 熠熠生辉',
    },
    '/en/': {
        selectLanguageName: 'English',
        title: 'Comet documents',
        description: 'my book',
    },
  },

2. 主题语言配置

Vuepress只提供基础语言功能，把语言名称，文本提示交给主题设置，方便用户主题自定义

请定位到下列代码

 theme: defaultTheme({
        // 以下所有配置写在这里！！！
    })

然后输入

       locales: {
            '/': {
                selectLanguageName: '简体中文',
                selectLanguageText: '选择语言',
            },
            '/en/': {
                selectLanguageName: 'English',
                selectLanguageText: 'Language',
            }
        }

（五）导航栏

考虑到日后config.ts文件臃肿问题，需要单独拆分

📂.vuepress新建📂navbar，用于存放特定语言导航条配置,然后分别新建以下文件

1.zh.ts

大家玩过俄罗斯套娃吗？名称+链接（本地或在线均可）组成一个条目(item)，两层嵌套中text表示区域标题，用children嵌套多个条目，无论是navbar还是sidebar都适用。

export const zhNavbar = [
    //单层
    {
        text: '主页',
        link: '/',
        // 该元素将一直处于激活状态
        activeMatch: '/',
    },
    //两层嵌套
    {
        text: '语言',
        children:
            [
                {
                    text: '编程',
                    children:
                        [
                            { text: 'C', link: 'https://code.iglooblog.top/c/1.html' },
                            { text: 'Js', link: '/js/' }
                        ]
                },
                {
                    text: '标记',
                    children:
                        [
                            { text: 'HTML', link: 'https://code.iglooblog.top/html/1.html' },
                            { text: 'Markdown', link: 'https://1m29yg5p67.k.topthink.com/@markdown' },
                            { text: 'CSS', link: 'https://code.iglooblog.top/css/1.html' }
                        ]
                },
            ],
    },
    //多个条目
    {
        text: '课程',
        children: [
            { text: '政治', link: 'politics' },
            { text: '英语', link: 'english' }
        ],
    },
    {
        text: '关于',
        link: '/about',
    },
    
    // 字符串 - 页面文件路径
    // '/Guide/README.md',
]

2.en.ts

如果不要英文导航条，可以空着

export const enNavbar = [ 
]

3.switch.ts

export * from './en.js'
export * from './zh.js'

4.引入switch.ts

回到config.ts文件中，修改为图中选中代码

import {zhNavbar,enNavbar,} from './navbar/switch.js'

5.预览

pnpm docs:dev

（六）侧边栏

请复制粘贴以下链接下载js.zip并解压到📁docs，否则无法展示侧边栏效果

蓝奏云：https://wwk.lanzouo.com/b04x8f3hg
密码：666

参照导航条做法，📂.vuepress新建📂sidebar，用于存放特定语言侧边栏配置,然后分别新建以下文件

1.zh.ts

export const zhSidebar = {
    '/js/': [
        {
            text: '目录',
            //可折叠侧边栏
            collapsible: true,
            children: [
                {
                    text:'变量',
                    link:'var'
                },
                {
                    text:'运算符',
                    link:'operator'
                },
                {
                    text:'数据类型',
                    link:'dataType'
                },
                {
                    text:'数组',
                    link:'array'
                },
                {
                    text:'表达式与语句',
                    link:'sentence'
                },
                ],
        }
    ],
}

2.en.ts

export const enSidebar = {
}

3.switch.ts

export * from './en.js'
export * from './zh.js'

4.引入switch.ts

回到config.ts文件中，修改为图中选中代码

import {zhSidebar,enSidebar,} from './sidebar/switch.js'

5.预览

pnpm docs:dev

点击导航栏里的js,预览效果

（七）404页面与返回主页

notFound:['没找到','网页走丢了'],
backToHome:'返回首页'

预览

pnpm docs:dev

四、示例

上文已给出导航条和侧边栏代码，编辑完成后的config.ts⬇️

import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress/cli'
import { viteBundler } from '@vuepress/bundler-vite'
import {zhNavbar,enNavbar,} from './navbar/switch.js'
import {zhSidebar,enSidebar,} from './sidebar/switch.js'

export default defineUserConfig({

  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],


  lang: 'zh-CN',
  // 默认站点语言为英文
  // lang: 'en-US',

  locales: {
    '/': {
        selectLanguageName: '简体中文',
        title: '彗星文档',
        description: '繁星似海 熠熠生辉',
    },
    '/en/': {
        selectLanguageName: 'English',
        title: 'Comet documents',
        description: 'my book',
  
    },
  },

  theme: defaultTheme({
    logo: 'comet.png',
    repo:'passwordgloo/comet-doc',
    locales: {
      '/': {
          selectLanguageName: '简体中文',
          selectLanguageText: '选择语言',
          navbar:zhNavbar,
          sidebar:zhSidebar,
          notFound:['没找到','网页走丢了'],
          backToHome:'返回首页'
      },
      '/en/': {
          selectLanguageName: 'English',
          selectLanguageText: 'Language',
          navbar:enNavbar,
          sidebar:enSidebar
      }
    },
  }),

  bundler: viteBundler(),
})