从 01 开始 从 01 开始
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • RSS
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金等
  • 职场规划
  • 关于离职
  • 杂谈
  • 📖 读书

    • 读书工具
    • 读书笔记
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档

晓林

程序猿,自由职业者,博主,英语爱好者,健身达人
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • RSS
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金等
  • 职场规划
  • 关于离职
  • 杂谈
  • 📖 读书

    • 读书工具
    • 读书笔记
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档
  • 从零开始搭建博客系列
  • 什么是博客
  • VuePress
  • VuePress 日常使用
  • 主题
    • VuePress 的主题
    • 博客准备
    • 安装
    • 自动生成 front matter
    • voding 主题更多功能
    • 常见的主题
    • 获取源码
    • 参考
  • 插件
  • 更多配置
  • 部署
  • 域名、HTTPS 和备案
  • 图床
  • 搜索功能
  • Meilisearch 自建实践
  • 评论区
  • Twikoo 配置表情包
  • CDN
  • 数据统计
  • SEO
  • 友情链接
  • 网站安全

  • SSL 证书续费
  • 配置 RSS 订阅
  • 显示数学公式块
  • 添加 mermaid 支持
  • 关于邮件服务器
  • 我的写作流
  • 增加浏览器控制台输出
  • 从零开始搭建博客系列-终
  • 搭建博客
2023-02-22
目录

主题

# 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

并且,之前 Markdown 文件里的内容太少了,几乎是空的,我们增加一些标题,例如:

这里是JavaSE

## 这是二级标题!

### 这是三级标题!


## 这是第二个二级标题!
1
2
3
4
5
6
7
8

# 安装

其实主题也就是一个 npm 包,可以通过 npm 的方式下载。

npm install vuepress-theme-vdoing -D
1

在 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',
  }
}
1
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



## 这是二级标题!

### 这是三级标题!


## 这是第二个二级标题!

1
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-theme-reco (opens new window)
  • vuepress-theme-hope (opens new window)
  • .....

VuePress 只支持使用一个主题。不过我们博客的重点是内容,切换主题也不会非常麻烦,读者可以简单比较下各个主题的差别和易用程度,挑一个喜欢的就行。

VuePress 的主题非常非常多,这里就不再多介绍了,感兴趣的读者可以参考:laihua-coder/awesome-vuepress (opens new window),这个 GitHub 项目列举了关于 VuePress 的一些不错的内容,包括主题、插件和使用 VuePress 的企业和项目等等。

之前我们说过 VuePress1.x 生态比较好,就是因为该版本下主题和插件非常多。

# 获取源码

为了写本系列的博客,博主特地新建了一个项目用于演示,相关代码已放到 Gitee (opens new window) 和 GitHub (opens new window) 上。

并且,不同功能创建了不同分支,想要获取本篇文章演示的源码只需切换分支即可!

例如,你想运行本篇文章所创建的博客,可以这样做:

  1. 打开命令行
  2. 拉取代码:git clone git@gitee.com:peterjxl/vuepress-learn.git​(也可拉取 GitHub 的)
  3. 跳转目录:cd vuepress-learn​
  4. 切换分支:git switch -c VuePressDemo3Theme origin/VuePressDemo3Theme​
  5. 安装依赖:npm i​
  6. 运行博客:npm run docs:dev​

# 参考

VuePress 官方文档:使用主题 | VuePress (opens new window),Front Matter | VuePress (opens new window)

voding 官网文档:vuepress-theme-vdoing (opens new window)

上次更新: 2025/5/9 14:55:39
VuePress 日常使用
插件

← VuePress 日常使用 插件→

最近更新
01
吐槽一下《僵尸校园》
05-15
02
2025 年 4 月记
04-30
03
山西大同 “订婚强奸案” 将会给整个社会带来的影响有多严重? - 知乎 转载
04-26
更多文章>
Theme by Vdoing | Copyright © 2022-2025 | 粤 ICP 备 2022067627 号 -1 | 粤公网安备 44011302003646 号 | 点击查看十年之约
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式