主题
# 05.主题
什么是主题?读者对主题这个单词应该不陌生,例如大部分APP都支持白天主题和夜晚主题等,使用者可以很轻松的切换主题等等。VuePress中也有类似的概念。
# VuePress的主题
在VuePress中,主题不仅仅是外观上的不同,不同的主题往往提供了不同的功能,能大大的完善我们的博客的功能,增强用户的体验感。
如果不使用主题,则使用的是VuePress的默认主题,功能比较简单,例如,我们之前想要增加侧边栏,需要一个个配置链接,才能让侧边栏展示成我们想要的效果,非常麻烦;有时候我们还想要加载 loading、切换动画、返回顶部、评论等功能,都自己开发的话太麻烦了。
本博客就是使用了voding主题 (opens new window),能自动生成侧边栏、标题和目录页等等功能,非常方便。本文就以vdoing主题为例,演示如何使用一个主题。
# 博客准备
我们目前的博客内容还太少了,不能很好的演示主题的效果,因此我们增加一些有意义的博客。
由于vdoing主题对于Markdown文件和文件夹的命名有要求(需要在其前面用梳子编号),我们同步修改下。修改后目录结果如下:
vuepress-learn
├── docs
│ ├── .vuepress
│ │ ├── public
│ │ │ └── amiliya.jpg
│ │ └── config.js
│ ├── 01.Basic
│ │ ├── 01.Basic1.md
│ │ └── 02.Basic2.md
│ ├── 02.Java
│ │ ├── 01.JavaEE.md
│ │ └── 02.JavaSE.md
│ └── README.md
├── package-lock.json
└── package.json
2
3
4
5
6
7
8
9
10
11
12
13
14
15
并且,之前Markdown文件里的内容太少了,几乎是空的,我们增加一些标题,例如:
这里是JavaSE
## 这是二级标题!
### 这是三级标题!
## 这是第二个二级标题!
2
3
4
5
6
7
8
# 安装
其实主题也就是一个npm包,可以通过npm的方式下载。
npm install vuepress-theme-vdoing -D
在config.js里配置使用主题(第6行):
module.exports = {
title: '网站标题',
head: [
['link', { rel: 'icon', href: 'https://s3.bmp.ovh/imgs/2023/02/16/8d42caf2b4ba3334.png' }]
],
theme:'vdoing',
themeConfig: {
logo: 'https://s3.bmp.ovh/imgs/2022/12/02/bc7428e3916c3a4c.jpg',
nav: [
{ text: '首页', link: '/' },
{ text: '计算机基础', link: '/CouputerBasic' },
{
text: 'Java', items: [
{ text: 'JavaSE', link: '/JavaSE' },
{ text: 'JavaEE', link: 'https://www.peterjxl.com/JavaEE' }
]
},
],
sidebar: 'structuring',
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
由于vdoing主题会自动生成侧边栏等,这里删除之前关于侧边栏的配置,并且使用vdoing主题的侧边栏配置
然后启动博客,效果如下:
可以看到首页就美观了不少,并且在下方还有文章列表,左侧还有文章分类等等。
同时,在网站右下角,还可以切换皮肤等,这些都是VuePress默认主题没有的。
我们点击下面的文章JavaSE
可以看到如下页面:
其中,左侧就是vdoing主题自动帮我们生成的侧边栏(默认),而右侧是本篇文章的目录
# 自动生成front matter
如果Markdown文件里没有配置yaml,那么vdoing主题会自动为每个文档添加front matter(1~9行),以 01.JavaSE.md为例:
---
title: JavaSE
date: 2023-02-16 07:47:56
permalink: /pages/f9c28a/
categories:
- Java
tags:
-
---
这里是JavaSE
## 这是二级标题!
### 这是三级标题!
## 这是第二个二级标题!
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
这些配置的说明如下:
title
:标题,.md
文件的名称date
:当前页面的创建时间permalink
:当前页面的永久链接,例如访问上述文件时,使用的链接是:http://localhost:8080/pages/f9c28a/
,不太好记,可以修改为好记一点的/JavaSE
。categories
:文章的分类,默认是.md
所在的文件夹名称。tags
:文章的标签
# voding主题更多功能
vdoing主题还提供了非常多的功能,这里就不一一演示了,本系列的教程并不在于介绍某个主题:
- voding介绍 (opens new window)
- 主题配置 (opens new window)
- 首页配置 (opens new window)
- 目录页配置 (opens new window)
- 添加摘要 (opens new window)
- ......
# 常见的主题
除了vdoing,还有很多流行的主题,例如:
VuePress只支持使用一个主题,不过我们博客的重点是内容,切换主题也不会非常麻烦,读者可以简单比较下各个主题的差别和易用程度,挑一个喜欢的就行。
VuePress的主题非常非常多,这里就不再多介绍了,感兴趣的读者可以参考:laihua-coder/awesome-vuepress: 🎉 A curated list of awesome things related to VuePress (opens new window),这个GitHub项目列举了关于VuePress的一些不错的内容,包括文档、插件、主题和使用VuePress的企业和项目等。
之前我们说过VuePress1.x生态比较好,就是因为该版本下主题和插件非常多。
# 获取源码
为了写本系列的博客,博主特地新建了一个项目用于演示,相关代码已放到Gitee (opens new window)和GitHub (opens new window)上。
并且,不同功能创建了不同分支,想要获取本篇文章演示的源码只需切换分支即可!
例如,你想运行本篇文章所创建的博客,可以这样做:
- 打开命令行
- 拉取代码:git clone git@gitee.com:peterjxl/vuepress-learn.git (也可拉取GitHub的)
- 跳转目录:cd vuepress-learn
- 切换分支:git switch -c VuePressDemo3Theme origin/VuePressDemo3Theme
- 安装依赖:npm i
- 运行博客:npm run docs:dev
# 参考
VuePress官方文档:使用主题 | VuePress (opens new window),Front Matter | VuePress (opens new window)
voding官网文档:vuepress-theme-vdoing (opens new window)