文章详细介绍了Vuepress2的配置过程，包括入门阶段的环境配置、安装流程、文档配置和部署，以及进阶阶段的全文搜索和美化模板。同时，提供了配置文件夹结构的解析，详细讲解了config.ts的设置选项，如小图标、仓库、Logo、多语言、导航栏和侧边栏的配置方法。
Vuepress 2 专栏目录【已完结】
1. 入门阶段
- Vuepress 2从0-1保姆级入门教程——环境配置篇
- Vuepress 2从0-1保姆级入门教程——安装流程篇
- Vuepress 2从0-1保姆级入门教程——文档配置篇
- Vuepress 2从0-1保姆级入门教程——主题与部署
2.进阶阶段
更新日志
- Markdown引用样式改为图片，更加醒目
- config.ts示例代码修改
- 精简流程操作
教程仓库：https://gitee.com/passwordgloo/vuepress2-tutorial
蓝奏云：https://wwk.lanzouo.com/b04x8f3hg
密码：666
通过Vuepress 2 安装流程篇，我们成功搭建一个主页附带子版块页面的文档项目，下面我们将先细致分析配置结构，然后再一步步完善
config.js文件
一、可选操作：了解基本结构
欲求其解，必窥其内。
（一）.vuepress文件夹结构
📁.vuepress
├── 📂 .cache git已忽略
│ └──……
├── 📂 components 自定义组件
├── 📂 layouts 页面布局
├── 📂 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
├── client.js 客户端配置
└── 📋 config.js 亟待修改的配置文件
（二）config.js结构
Typescript 是微软推出的Javascript超集，兼容es6语法，所以文件后缀名修改成ts(config.ts)，不影响使用
模板使用blog类型，配置文件会引入@vuepress/plugin-blog插件
import { blogPlugin } from '@vuepress/plugin-blog'
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'
import { viteBundler } from '@vuepress/bundler-vite'
export default defineUserConfig({
//favicon
//站点语言设置
theme: defaultTheme({
//logo
//repo 仓库地址
//主题语言设置
//默认主题其他配置请写在这里！！！
})
bundler: viteBundler(),
})
二、Vuepress设置
（一）标签栏小图标支持
favicon.ico（favourite icon缩写）是网站收藏夹图标，图片本地地址在public文件夹内，图片地址也可选填网络地址
1️⃣ 请先将favicon.ico文件放到📁 public内
2️⃣ 设置小图标位置
head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
3️⃣ 预览
pnpm docs:dev
（二）站点多语言设置
lang: 'zh-CN',
// 默认站点语言为英文
// lang: 'en-US',
locales: {
'/': {
selectLanguageName: '简体中文',
title: '彗星文档',
description: '繁星似海 熠熠生辉',
},
'/en/': {
selectLanguageName: 'English',
title: 'Comet documents',
description: 'The stars are like a sea, shining brightly.',
},
},
三、主题选项
这里以默认主题为例，不同的主题请参阅主题文档
（一）主题多语言支持
Vuepress只提供基础语言功能，把语言名称，文本提示交给主题设置，方便用户主题自定义
请定位到下列代码
theme: defaultTheme({
// 以下所有配置写在这里！！！
})
然后输入
locales: {
'/': {
selectLanguageName: '简体中文',
selectLanguageText: '选择语言',
},
'/en/': {
selectLanguageName: 'English',
selectLanguageText: 'Language',
}
}
（二）Logo
1️⃣ 请先将Logo文件放到📁 public文件夹里
2️⃣ 修改logo文件位置，支持在线链接
logo:'comet.jpg'
//logo:'/comet.png',文件放在public根目录下，也可以
3️⃣ 预览
pnpm docs:dev
（三）仓库设置
repo: 'username/repoName',
//默认识别为GitHub用户名和仓库名
// 支持具体仓库地址
//repo:'https://gitee.com/passwordgloo/vuepress2-tutorial',
预览
pnpm docs:dev
（四）导航栏
1.新建英文目录
📁docs 新建 📂en，放入README.md
---
home: true
heroImage: /comet.png
heroText: Comet Documents
tagline: The stars are like a sea, shining brightly.
actions:
- text: Blog
link: https://blog.csdn.net/passwordgloo
type: primary
- text: About
link: about.md
type: secondary
features:
- title: Notes
details: Markdown language, concise and efficient, records every moment
- title: Blog
details: A clean and tidy blog is easy to archive files
- title: Document
details: Online personal documents, create the documents you like
footer: MIT Licensed | Copyright © 2020-present Passwordgloo
---
放入about.md
---
tag:
- tag A
- tag B
sidebar: heading
archive: true
---
# About
 
 
 
 
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=110 src="//music.163.com/outchain/player?type=0&id=7113076622&auto=1&height=90"></iframe>
## Tutorial Usage
Access [lanzou cloud](https://wwk.lanzouo.com/b04x8f3hg), password is 666
## Project purpose
- File personal learning experiences
- Leave a trace of your own learning
- Inspire others' intellectual sparks
## Contact information
- [Github](https://github.com/passwordgloo)
- [Gmail](mailto:flyigloo@gmail.com)
- [163 Mail](mailto:passwordgloo@163.com)
类似的，建立和中文文档相同结构的文件树，可方便语言切换
2.新建navbar.ts
考虑到日后config.js文件臃肿问题，需要单独拆分
📂.vuepress新建navbar.ts，用于存放特定语言导航条配置
大家玩过俄罗斯套娃吗？名称+链接（本地或在线均可）组成一个条目(item)，两层嵌套中text表示区域标题，用children嵌套多个条目，无论是navbar还是sidebar都适用。
export const zhNavbar = [
//单层
{
text: '主页',
link: '/',
// 该元素将一直处于激活状态
activeMatch: '/',
},
//两层嵌套
{
text: '语言',
children:
[
{
text: '编程',
children:
[
{ text: 'C', link: 'https://www.dotcpp.com/course/c/' },
{ text: 'Js', link: '/js/' },
{ text: 'Ts', link: 'https://ts.nodejs.cn' },
{ text: 'Java', link: 'https://liaoxuefeng.com/books/java/introduction/index.html' }
]
},
{
text: '标记',
children:
[
{ text: 'HTML', link: 'https://developer.mozilla.org/zh-CN/docs/Web/HTML' },
{ text: 'Markdown', link: 'https://markdown.com.cn/basic-syntax/' },
{ text: 'CSS', link: 'https://developer.mozilla.org/zh-CN/docs/Web/CSS' },
{ text: 'Sass', link: 'https://www.sass.hk/' },
{ text: 'Tailwindcss', link: 'https://www.tailwindcss.cn/docs/installation' }
]
},
],
},
{
text: '标签',
link: '/tag/',
},
{
text: '分类',
link: '/category/',
},
{
text: '归档',
link: '/article/',
},
// 字符串 - 页面文件路径
'/about'
]
// 英文导航栏
export const enNavbar = [
//单层
{
text: 'Home',
link: '/en/',
// 该元素将一直处于激活状态
activeMatch: '/',
},
//两层嵌套
{
text: 'Language',
children:
[
{
text: 'Program',
children:
[
{ text: 'C', link: 'https://en.cppreference.com/w/c' },
{ text: 'Js', link: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript' },
{ text: 'Ts', link: 'https://www.typescriptlang.org/docs/' },
{ text: 'Java', link: 'https://www.w3schools.com/java/' }
]
},
{
text: 'Mark',
children:
[
{ text: 'HTML', link: 'https://developer.mozilla.org/en-US/docs/Web/HTML' },
{ text: 'Markdown', link: 'https://www.markdownguide.org/' },
{ text: 'CSS', link: 'https://developer.mozilla.org/en-US/docs/Web/CSS' },
{ text: 'Sass', link: 'https://sass-lang.com/documentation/' },
{ text: 'Tailwindcss', link: 'https://tailwindcss.com/docs/installation/using-vite' }
]
},
],
},
{
text: 'Tag',
link: '/en/tag/',
},
{
text: 'Category',
link: '/en/category/',
},
{
text: 'Archive',
link: '/en/article/',
},
// 字符串 - 页面文件路径
'/en/about'
]
如果不要英文导航条，可以里面空着不写
export const enNavbar = {
}
3.引入
回到config.js文件中，修改为图中选中代码
import {zhNavbar,enNavbar} from './navbar.js'
4.预览
pnpm docs:dev
点击选择语言，访问英文首页和关于页面
（五）侧边栏
请复制粘贴以下链接下载 js.zip 并解压到📁docs，否则无法展示侧边栏效果
蓝奏云：https://wwk.lanzouo.com/b04x8f3hg
密码：666
1.新建sidebar.ts
参照导航条做法，📂.vuepress 新建 sidebar.ts，用于存放特定语言侧边栏配置
export const zhSidebar = {
'/js/': [
{
text: '目录',
//可折叠侧边栏
// collapsible: true,
children: [
{
text:'变量',
link:'var'
},
{
text:'运算符',
link:'operator'
},
{
text:'数据类型',
link:'dataType'
},
{
text:'表达式与语句',
link:'sentence'
},
],
}
],
}
export const enSidebar = {
}
2.引入
回到config.js文件中，修改为图中选中代码
import {zhSidebar,enSidebar} from './sidebar.js'
3.预览
pnpm docs:dev
（六）404页面与返回主页
notFound:['没找到','网页走丢了'],
backToHome:'返回首页'
预览，随便输入错误地址
pnpm docs:dev
如果不喜欢默认主题，移步 Vuepress 2从0-1保姆级入门教程——主题与部署
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
