从零开始的 Vuepress2.X (一)
（一）搭建Vuepress项目
前言
最近突然对个人博客产生了浓厚的兴趣，于是自己的试着用vuepress搭建了一个。并写下了搭建的基本流程，希望能和大家分享一下。
1、搭建Vuepress项目
少不了得先创建一个vuepress的项目。 可以参考 VuePress官方文档
1.1 项目初始化
新建一个Vuepress2.X项目文件夹，命名随意，并初始化目录
git init
pnpm init
git init
yarn init
git init
npm init
1.2 下载依赖
pnpm add -D vuepress@next @vuepress/client@next vue
yarn add -D vuepress@next
npm install -D vuepress@next
1.3 配置package
在 package.json 中添加 scripts
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}
1.4 创建你的首页
在项目中新建 README.md，并写下你的第一个页面：
---
# 设定该页面是首页还是普通页面
home: true
# 首页的大标题
heroText: My blog
# 首页图片
heroImage: https://vuejs.org/images/logo.png
---
<!-- 内容 -->
这个是我的首页
1.5 示例
接下来让我们的博客在本地跑起来
pnpm docs:dev
yarn docs:dev
npm run docs:dev
看看效果：
至此，一个简单的博客就搭建完成了。
1.6 Markdown格式乱码
注：
到这一步，有的小伙伴会发现打开的博客页面是乱码
那是因为你的编码格式是 UTF-16 LE 导致的
所以我们把编码格式改为 UTF-8 就好了
2、Vuepress基本配置
只有一个首页是远远不够把博客支撑起来的 为了更好的搭建自己的网站 我们需要对项目做一些配置
2.1 创建.vuepress目录
我们在根目录下创建一个 .vuepress 目录，一般的配置文件都会放在这个目录下面。
再创建一个 docs 文件夹，用来存放博客内容。
目录结构如下：
├─ .vuepress
│ └─ config.js <--- 配置文件
│ └─ public <--- 静态资源文件夹
│ └─ styles <--- 公共样式文件夹
├─ docs
├─ README.md
官方建议 .vuepress 是放在 docs 目录下的，不过我想 docs 下只希望放置博客文章，所以就把 .vuepress 移到了根目录下。
2.2 添加标题和描述
在config.js 中自定义标题和描述：
export default {
base: '/base/', // 部署站点的基础路径
title: "Toby的博客", // 站点的标题。
description: "这是Toby的个人博客", // 站点的描述。
};
2.3 多语言支持
在config.js 中配置多语言:
export default {
locales: {
// 键名是该语言所属的子路径
// 作为特例，默认语言可以使用 '/' 作为其路径。
'/': {
lang: 'en-US',
title: 'My blog',
description: 'This is my blog',
},
'/zh/': {
lang: 'zh-CN',
title: '我的博客',
description: '这是我的博客',
},
},
}
有需要的小伙伴可以参考一下 VuePress 多语言支持
2.4 配置 head 标签
在config.js 中配置 < head > 标签
可以在 < head > 标签内加入的额外标签。
- 示例： 增加一个自定义的 favicon ：
export default {
head: [['link', { rel: 'icon', href: '/images/logo.png' }]], // Public 文件路径 / 也可以为url
}
- 渲染结果
<head>
<link rel="icon" href="/images/logo.png" />
</head>
2.5 配置默认主题
在config.js 中配置默认主题
import { defaultTheme } from '@vuepress/theme-default'
export default {
theme: defaultTheme({
// 在这里进行配置
}),
}
2.5-1 配置导航栏头像
logo 配置导航栏头像
export default {
theme: defaultTheme({
// 可以是 Public 文件路径
logo: '/images/hero.png',
// 也可以是 URL
logo: 'https://toby607-1317049696.cos.ap-guangzhou.myqcloud.com/images/202303201032564.png/compress50',
}),
}
2.5-2 头部导航栏配置
navbar 配置头部导航栏
export default {
theme: defaultTheme({
navbar:[
{ text: "首页", link: "/" },
{
text: '博客',
children: [
{ text: 'test1', link: '/test1' },
{ text: 'test2', link: '/test2' },
],
},
],
}),
}
2.5-3 左侧边栏配置
sidebar 配置左侧边栏
export default {
theme: defaultTheme({
sidebar:[
{ text: "首页", link: "/", icon: 'Home' },
{
text: '博客',
children: [
{ text: 'test1', link: '/test1'},
{ text: 'test2', link: '/test2'},
],
},
],
}),
}
3、写一篇博客
基本配置已经完成就开始写下我们的第一篇博客了
3.1 正文信息
现在我们在 docs 文件夹中新建一个 test.md 文件
在 test.md 中定义 Frontmatter
- title 是标题， date 是日期， categories 是分类， tags 是标签，可以有多个分类和标签， sticky 可以让文章置顶，数字表示顺序。 permalink 当前页面链接，会覆盖默认的路由路径
- 变量后面要加冒号，冒号后面要有空格，不要加逗号
---
title: test1
date: 2023/3/1
tags:
- css
- 分享
categories:
- 前端
permalink: /test/
---
3.2 正文内容
我们都知道 Markdown 中是允许使用 HTML 的
而且 Vue 模板语法是和 HTML 兼容的。
所以我们在 Vuepress 的 Markdown 中直接写 Vue
> 这是test1号博客
## 开始
我的第一个博客
## 文档
这个是{{name1}}
## 库
这个是{{name2}}
## 工具
这个是{{name3}}
## Node
<span class="color">{{name4}}</span>
## for循环
<div v-for="item in 10">{{item}}</div>
<script setup>
import {ref} from "vue";
const name1 = ref('文档')
const name2 = ref('库')
const name3 = ref('工具')
const name4 = ref('Node')
</script>
<style lang="scss" scoped>
.color {
color:red
}
</style>
3.2 效果图
这样一个简单的博客基础配置就完成了，更多的配置可以参考 VuePress官方文档