从 01 开始
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

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

在 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)

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

使用 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​ ‍

# 参考

上次更新: 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 号 | 点击查看十年之约