搭建步骤
- 步骤 1: 创建并进入一个新目录
mkdir my-blog
cd my-blog
- 步骤 2: 初始化项目
git init
pnpm init
- 步骤 3: 将 VuePress 安装为本地依赖
pnpm add -D vuepress@next @vuepress/client@next vue
- 步骤 4: 在
package.json中添加一些 scripts在新窗口打开
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
- 步骤 5: 将默认的临时目录和缓存目录添加到
.gitignore文件中
echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore
- 步骤 6: 创建你的第一篇文档
mkdir docs
echo '# Hello VuePress' > docs/README.md
- 步骤 7: 在本地启动服务器来开发你的文档网站
pnpm docs:dev
VuePress 会在 http://localhost:8080在新窗口打开 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。
目录结构
.
├── docs
│ ├── .vuepress (可选,用于存放全局的配置、组件、静态资源等)
│ │ ├── components (可选,该目录中的 Vue 组件将会被自动注册为全局组件)
│ │ ├── theme (可选,用于存放本地主题)
│ │ │ └── Layout.vue
│ │ ├── public (存放一些公共样式，比如网站图标和头像，当然，也可以直接将图片放入图床)
| | ├── dist(这里存放打包好的文件，最后我们将打包好的文件上传到服务器就行)
│ │ ├── styles (这里放一些自定义样式，在这里我们可以修改主题色)
│ │ │ ├── index.styl(将会被自动应用的全局样式文件，会生成在最终的CSS文件结尾，具有比默认样式更高的优先级)
│ │ │ └── palette.styl (用于重写默认颜色常量，或者设置新的 stylus 颜色常量)
│ │ ├── templates (可选的, 谨慎配置, 存储 HTML 模板文件)
│ │ │ ├── dev.html（用于开发环境的 HTML 模板文件）
│ │ │ └── ssr.html（构建时基于 Vue SSR 的 HTML 模板文件）
│ │ ├── config.js (这里是博客的一些配置，导航栏、侧边栏、下载的插件都在这里配置)
│ │ └── enhanceApp.js (可选，客户端应用的增强)
| ├── about(一个存放自己博客的文件夹，我们可以将不同的文章设置不同的文件夹进行分类)
| | ├── README.md(每个文件夹都要有一个README.md文件，否则导航栏配置不生效)
| | ├── 文章一.md
| | ├── 文章二.md
| ├── javaScript(同上)
| | ├── README.md
│ └── README.md(这个md文档是首页的配置)
│
└── package.json（项目初始化时，根目录下自动生成的配置文件,定义了项目的基本配置信息及需要依赖的各个模块、指定运行脚本命令的npm命令行缩写等）
总结：
我们的配置都在 .vuepress文件夹下进行，只有首页的README.md与 .vuepress文件夹同级
.vuepress文件夹下 config.js 是主要的配置
我们自己的文章目录与 .vuepress文件夹同级
每个文章的文件夹下都要有一份 README.md文件，否则导航栏配置不生效
首页
默认的主题提供了一个首页（Homepage）的布局 (用于 这个网站的主页)。想要使用它，需要在你的根级 README.md 的 YAML front matter 指定 home: true。首页文档参考，以下是一个如何使用的例子：
---
home: true
heroText: 一个小白分享各类资源的地方
tagline: 公众号：柳小白
actions:
- text: 快速上手
link: /catalog1/README1.md
type: primary
- text: 项目简介
link: /catalog2/
type: secondary
features:
- title: 个人介绍
details: 详情待确定中
- title: 学习笔记
details: 详情待确定中
- title: 技术博客
details: 详情待确定中
footer: 初入小白 | 还望各位大佬不吝赐教
---
你可以将相应的内容设置为 null 来禁用标题和副标题。
任何 YAML front matter 之后额外的内容将会以普通的 markdown 被渲染，并插入到 features 的后面。
导航栏Title
export default {
title:"柳小白",
}
导航栏Logo
你可以配置默认主题模式，增加导航栏 Logo ，Logo 可以被放置在公共文件目录：
// .vuepress/config.js
import { defaultTheme } from 'vuepress'
export default {
theme: defaultTheme({
// Public 文件路径
logo: '/images/hero.png',
// URL
logo: 'https://vuejs.org/images/logo.png',
}),
}
导航栏配置
为了配置导航栏元素，你可以将其设置为 导航栏数组 ，其中的每个元素是 NavbarItem 对象、 NavbarGroup 对象、或者字符串：
NavbarItem对象应该有一个text字段和一个link字段，还有一个可选的activeMatch字段。NavbarGroup对象应该有一个text字段和一个children字段。children字段同样是一个 导航栏数组 。- 字符串应为目标页面文件的路径。它将会被转换为
NavbarItem对象，将页面标题作为text，将页面路由路径作为link。
export default {
theme: defaultTheme({
navbar: [
// NavbarItem
{
text: 'Foo',
link: '/foo/',
},
// NavbarGroup
{
text: 'Group',
children: ['/group/foo.md', '/group/bar.md'],
},
// 字符串 - 页面文件路径
'/bar/README.md',
],
}),
}
export default {
theme: defaultTheme({
navbar: [
// 嵌套 Group - 最大深度为 2
{
text: 'Group',
children: [
{
text: 'SubGroup',
children: ['/group/sub/foo.md', '/group/sub/bar.md'],
},
],
},
// 控制元素何时被激活
{
text: 'Group 2',
children: [
{
text: 'Always active',
link: '/',
// 该元素将一直处于激活状态
activeMatch: '/',
},
{
text: 'Active on /foo/',
link: '/not-foo/',
// 该元素在当前路由路径是 /foo/ 开头时激活
// 支持正则表达式
activeMatch: '^/foo/',
},
],
},
],
}),
}
侧边栏配置
-
你可以通过页面的 sidebar frontmatter 来覆盖这个全局配置。
设置为
false可以禁用侧边栏。如果你设置为
'auto'，侧边栏会根据页面标题自动生成。为了手动配置侧边栏元素，你可以将其设置为 侧边栏数组 ，其中的每个元素是一个
SidebarItem对象或者一个字符串：SidebarItem对象应该有一个text字段，有一个可选的link字段、一个可选的children字段和一个可选的collapsible字段。children字段同样是一个 侧边栏数组 。collapsible字段来控制它是否可折叠。- 字符串应为目标页面文件的路径。它将会被转换为
SidebarItem对象，将页面标题作为text，将页面路由路径作为link，并根据页面小标题自动生成children。
如果你想在不同子路径中使用不同的侧边栏，你可以将该配置项设置为 侧边栏对象 ：
- Key 为路径前缀。
- Value 为 侧边栏数组 。
// .vuepress/config.js
export default {
theme: defaultTheme({
// 侧边栏数组
// 所有页面会使用相同的侧边栏
sidebar: [
// SidebarItem
{
text: 'Foo',
link: '/foo/',
children: [
// SidebarItem
{
text: 'github',
link: 'https://github.com',
children: [],
},
// 字符串 - 页面文件路径
'/foo/bar.md',
],
},
// 字符串 - 页面文件路径
'/bar/README.md',
],
}),
}
【不同子路径下的页面会使用不同的侧边栏】这种方式最常用
// .vuepress/config.js
export default {
theme: defaultTheme({
// 侧边栏对象
// 不同子路径下的页面会使用不同的侧边栏
sidebar: {
'/guide/': [
{
text: 'Guide',
children: ['/guide/README.md', '/guide/getting-started.md'],
},
],
'/reference/': [
{
text: 'Reference',
children: ['/reference/cli.md', '/reference/config.md'],
},
],
},
}),
}
// .vuepress/config.js
export default {
theme: defaultTheme({
// 可折叠的侧边栏
sidebar: {
'/reference/': [
{
text: 'VuePress Reference',
collapsible: true,
children: ['/reference/cli.md', '/reference/config.md'],
},
{
text: 'Bundlers Reference',
collapsible: true,
children: ['/reference/bundler/vite.md', '/reference/bundler/webpack.md'],
},
],
},
}),
}
内容搜索
部署到gitee
-
在gitee上面我们新建一个仓库（目前仅支持公开仓库开通Gitee Pages 服务），用于存放我们的博客系统。
仓库创建成功后如下图
-
仓库建好后，就需要将我们本地的博客系统推送至仓库。
-
进入blog目录，打开打开gitbash命令行工具，打包博客，执行命令：
pnpm run docs:build
-
我们可以参考gitee仓库给我们的步骤操作，将代码推送到仓库。
# 逐行执行下列命令 cd my-blog git add . git commit -m "初始化" git remote add origin https://gitee.com/bigfairy/my-blog.git git push -u origin "master" -
执行完上面的命令后，我们的代码就推到了仓库中去
-
在仓库页面点击服务菜单，选择gitpage选项
-
选择部署分支和部署目录，然后点击启动
- 部署分支，不用改，默认master
- 部署目录，选择docs/.vuepress/dist文件夹，刚刚我们执行打包命令生成的。
-
部署好后就会出现一个我们的博客地址了
如果期望地址不展示仓库名，新建仓库名保持个人空间地址一样即可。
打开之后可能无法读取到静态资源，如下
解决办法，配置部署站点的基础路径，如下:
-
Gitee Pages网站地址是https://gitee.com/用户名/仓库名称.git
-
我的gitee仓库名是my-blog，路径：docs/.vuepress/，修改config.js配置文件在export default中添加base: '/my-blog/'。
然后重新构建pnpm run docs:build，推送到gitee部署到gitee pages上去。
-
-