从 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 的介绍
    • 最后更新时间
    • Git 仓库和编辑链接
    • footer
    • 代码块中的行高亮
    • 分离配置
    • 自定义样式
    • 所有配置
    • Github Calendar
    • 获取源码
    • 参考
  • 部署
  • 域名、HTTPS 和备案
  • 图床
  • 搜索功能
  • Meilisearch 自建实践
  • 评论区
  • Twikoo 配置表情包
  • CDN
  • 数据统计
  • SEO
  • 友情链接
  • 网站安全

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

更多配置

# 08.更多配置

现在,读者应该对 VuePress、主题和插件等有了基本的认识,除了插件,VuePress 自身也有很多有用的配置,这里简单说明下。

‍ ‍

# VuePress 的介绍

在介绍了 VuePress 的基本使用、主题和插件的概念之后,我们再来看看官网对于 VuePress 的介绍 (opens new window),就很好理解了:

VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统 (opens new window)和插件 API (opens new window),另一个部分是为书写技术文档而优化的默认主题 (opens new window),它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。 ‍ 因此,我们可以自己选择一个主题使用,并且使用丰富的插件来完善我们的网站。同时,默认主题自带了很多功能,很多第三方主题都是基于默认主题增强的,我们介绍几个常用的配置。 ‍

# 最后更新时间

有时候我们想要看到文章的更新时间,此时可以配置 themeConfig.lastUpdated ​字段:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    lastUpdated: '上次更新', // string | boolean
  }
}
1
2
3
4
5
6

‍ 效果:在文章底部有一个更新时间

​​ ‍

补充说明:

  • ​themeConfig.lastUpdated​​ 默认是关闭的,如果给定一个字符串,它将会作为前缀显示(默认值 Last Updated​​)。
  • ​themeConfig.lastUpdated​ 的时间是读取每个文件最后一次 git​ 提交的 UNIX 时间戳,所以只能在一个基于 git​ 的项目中启用它。此外,由于使用的时间戳来自 git commit,因此它将仅在给定页的第一次提交之后显示,并且仅在该页面后续提交更改时更新。 ‍ 可以看到时间显示的格式,是西方的;这是因为 VuePress 默认的 lang 为 en-US,我们修改一下 config.js:
module.exports = {
  // ...
  locales: {
    '/': {
      lang: 'zh-CN'
    }
  },
  // ...
}  
1
2
3
4
5
6
7
8
9

‍ 效果就是根据国内的时间来展示时间了,例如:上次更新: 2023/2/21 22:07:21

如果想自定义时间格式,或做其他修改,可以参考官网文档:默认主题配置-最后更新时间 (opens new window) ‍

# Git 仓库和编辑链接

当配置了 themeConfig.repo​ 选项,将会自动在每个页面的导航栏生成生成一个 GitHub 链接,以及在页面的底部生成一个 "Edit this page"​ 链接。


module.exports = {
  themeConfig: {
    repo: 'vuejs/vuepress',
    editLinks: true,
    docsDir: 'docs',
    // 默认为 "Edit this page"
    editLinkText: '编辑此页'
}
1
2
3
4
5
6
7
8
9

‍ 效果:文章底部有一个编辑此页的链接

​​ ‍

点击该链接后跳转:

​​

有了这个链接,如果读者想要修改文章,可以直接点击后修改;

例如,读者看到有什么想要补充的或者修改错别字之类的,就可以点击,然后 fork 项目并 PR。

可以通过 YAML front matter​ 来禁用指定某个页面的编辑链接:

---
editLink: false
---
1
2
3

# footer

如果是在默认主题,你可以定义一个全局组件来定义页脚;或者针对某个页面定制页脚。参考:

  • Configuration | Theme (opens new window)
  • 默认主题配置 | VuePress (opens new window)

在 vdoing 主题中,可以直接在配置文件里配置页脚 themeConfig.footer​:例如备案信息,作者信息等。例如这是本博客的备案信息:

themeConfig: {
    // 页脚
    footer:{
      createYear: 2022,
      copyrightInfo: `<a href='https://beian.miit.gov.cn'>粤ICP备2022067627号-1</a>  
      <a href='http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011302003646'>粤公网安备 44011302003646号</a>
      `
    },
  },
1
2
3
4
5
6
7
8
9

‍ 效果:在每个页面的底部都有页脚:

​​

参考:主题配置 | vuepress-theme-vdoing (opens new window) ‍

# 代码块中的行高亮

在 VuePress 中,针对 Markdown 有扩展,例如行高亮。 ‍ 有时候,我们想着重标出是哪几行代码是关键,此时可以用代码高亮的形式来。我们可以这样写 Markdown:

‍‍‍‍‍``` js {4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
 ‍‍‍‍```
1
2
3
4
5
6
7
8
9

输出:

​​

除了单行以外,你也可指定多行,行数区间,或是两者都指定。

  • 行数区间: 例如 {5-8}​, {3-10}​, {10-17}​
  • 多个单行: 例如 {4,7,9}​
  • 行数区间与多个单行: 例如 {4,7-13,16,23-27,40}​

参考:Markdown 拓展 | VuePress (opens new window) ‍

# 分离配置

随着博客功能的不断完善,config.js 文件会变的很长,笔者因此将配置文件分成了几个部分。有需要的读者可以看情况拆分。

首先,在.vuepress 目录下新建 config 文件夹,然后依次新建 head.ts、plugin.ts 和 themeConfig.ts。此时项目结果如下:

vuepress-learn
├── docs
│   ├── .vuepress
│   │   ├── config
│   │   │   ├── head.ts     
│   │   │   ├── plugin.ts   
│   │   │   └── themeConfig.ts
│   │   └── config.ts
│   ├── 01.Basic
│   │   ├── 01.Basic1.md
│   │   └── 02.Basic2.md
│   ├── 02.Java
│   │   ├── 01.JavaEE.md
│   │   └── 02.JavaSE.md
├── package-lock.json
└── package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

‍ head.ts 的内容:其实就是将原本配置文件里的 head 部分挪到这里

import { HeadTags } from 'vuepress/config';


export default <HeadTags> [
  
  ['link', { rel: 'icon', href: 'https://s3.bmp.ovh/imgs/2023/02/16/8d42caf2b4ba3334.png' }],
  
]
1
2
3
4
5
6
7
8

plugins.ts 的内容:就是将原本配置文件里的 plugins 部分挪到这里

import { UserPlugins } from 'vuepress/config'

export default <UserPlugins>[
  // 复制代码块的插件
  ['vuepress-plugin-code-copy', true],

  // 阅读进度条的插件
  'reading-progress',

  //光标效果的插件
  [
    'cursor-effects', {
      size: 2, // size of the particle, default: 2
      shape: 'star', // ['star' | 'circle'], // shape of the particle, default: 'star'
      zIndex: 999999999, // z-index property of the canvas, default: 999999999
    }
  ],

  //网站动态标题
  ['dynamic-title', {
    // showIcon: '',
    showText: '欢迎回来  O(∩_∩)O~~',
    // hideIcon: '',
    hideText: '等等,你别走啊 ::>_<::',
    recoverTime: 2000,
  }],

]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

‍ themeConfig.ts 的内容:同理,将 themeConfig 的内容挪到这里

import { VdoingThemeConfig } from "vuepress-theme-vdoing/types";

export default <VdoingThemeConfig>{
  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',

  // 编辑此页配置
  repo: 'Peter-JXL/vuepress-learn',
  docsDir: 'docs',
  editLinks: true,
  editLinkText: '编辑此页',

  // 页脚
  footer: {
    createYear: 2022,
    copyrightInfo: `<a href='https://beian.miit.gov.cn'>粤ICP备2022067627号-1</a>  
      <a href='http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011302003646'>粤公网安备 44011302003646号</a>
      `
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

‍ 最后是 config.ts 的内容:引入其他配置文件的配置

import head from "./config/head"
import themeConfig from "./config/themeConfig"
import plugins from "./config/plugins"  
module.exports = {
  title: '网站标题',
  theme: 'vdoing',
  head,
  themeConfig,
  plugins
}
1
2
3
4
5
6
7
8
9
10

‍ 最后重启下博客,观察运行是否正常。

本人主攻后端,对于前端的 Node 和 TS 不太熟悉,只会依葫芦画瓢。这里拆分配置文件的方法主要参考:Kele-Bingtang (opens new window),其他的功能如首页大图、站点信息等也是参考这个博客,非常感谢他。 ‍

# 自定义样式

VuePress 基于 Vue,所以主题色用的是 Vue 的绿色,那如何修改 VuePress 的主题色呢?

你可以创建一个 .vuepress/styles/palette.styl 文件,文件代码如下:

$accentColor = #3178c6
1

更多的颜色修改参考 VuePress 的 palette.styl (opens new window)。 ‍ 如果你想自定义修改一些 DOM 元素的样式呢?VuePress 提供了一种添加额外样式的简便方法。你可以创建一个 .vuepress/styles/index.styl 文件。这是一个 Stylus 文件,但你也可以使用正常的 CSS 语法。

我们在 .vupress 文件夹下创建这个目录,然后创建 index.styl 文件。如果想要修改页面上的某个元素,直接用浏览器控制台查看样式即可,然后就可以修改了:例如修改代码块的默认样式。

// 通过检查,查看元素样式声明
.dark .content__default code {
    background-color: rgba(58,58,92,0.7);
    color: #fff;
}
1
2
3
4
5

‍

# 所有配置

更多关于配置请参考官网:默认主题配置 | VuePress (opens new window)

本文也参考了其他博主的博客:

  • 本站 - 首页大图模块 | Young Kbt blog (opens new window)
  • 本站 - 站点信息模块 | Young Kbt blog (opens new window)
  • 本站 - 全局时间提示模块 | Young Kbt blog (opens new window)
  • 本站 - 代码块隐藏模块 | Young Kbt blog (opens new window)

使用 Markdown 语法,可以说明代码块是什么编程语言的,这样可以做到代码高亮。具体支持什么语言可以参考:Supported languages (opens new window)

VuePress 使用了 Prism (opens new window)来为 markdown 中的代码块实现语法高亮。Prism 支持大量的编程语言,你需要做的只是在代码块的开始倒勾中附加一个有效的语言别名. 引自官网:Markdown 拓展-代码块中的语法高亮 (opens new window)

如果没有在支持的语言中,则也没什么问题,顶多不会高亮,并且会在编译的过程中有个提示。

# Github Calendar

GitHub 或 Gitee 会在每个人的主页里放上一个提交记录图:

​​ ‍

有时候将其放到个人博客上面也是不错的选择。其实获取起来很简单:

<img src="https://ghchart.rshah.org/你的用户名"/>
1

只需在上述地址上,替换为你的 GitHub 用户名即可。

如果是用 hexo,可以参考这篇博客的效果:Gitcalendar | Akilar の糖果屋 (opens new window)

​​

# 获取源码

为了写本系列的博客,博主特地新建了一个项目用于演示,相关代码已放到 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 VuePressDemo5Settings origin/VuePressDemo5Settings​
  5. 安装依赖:npm i​
  6. 运行博客:npm run docs:dev​ ‍

# 参考

  • vuepress 热更新失效研究_禅思院的博客-CSDN 博客 (opens new window)
  • 年轻人的第一篇博客 - SegmentFault 思否 (opens new window)
  • java - 「奇怪的教程」年轻人的第一个博客搭建指南 - 个人文章 - SegmentFault 思否 (opens new window)
  • vuepress 使用简介及个人博客搭建_穆瑾轩的博客-CSDN 博客_vuepress (opens new window)
  • VuePress 博客优化之 last updated 最后更新时间如何设置 (opens new window)
  • 用可爱的插件装饰你的 Vuepress~-阿里云开发者社区 (opens new window) ‍
上次更新: 2025/5/9 14:55:39
插件
部署

← 插件 部署→

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