更多配置
# 最后更新时间
有时候我们想要看到文章的更新时间，此时可以配置 themeConfig.lastUpdated 字段：
// .vuepress/config.js
module.exports = {
themeConfig: {
lastUpdated: '上次更新', // string | boolean
}
}
效果：在文章底部有一个更新时间
补充说明：
themeConfig.lastUpdated默认是关闭的，如果给定一个字符串，它将会作为前缀显示（默认值Last Updated）。themeConfig.lastUpdated的时间是读取每个文件最后一次git提交的 UNIX 时间戳，所以只能在一个基于git的项目中启用它。此外，由于使用的时间戳来自 git commit，因此它将仅在给定页的第一次提交之后显示，并且仅在该页面后续提交更改时更新。
注意：
如果你的更新时间没有显示，就需要涉及到LastUpdated是怎么设置值的，具体可以参考文章VuePress 博客优化之 last updated 最后更新时间如何设置 (opens new window)，
简单来说就是，LastUpdated不是通过你的文件修改时间来设置的，而是通过git log获取你的文章的对应代码推送到git的时间，注意是代码，不是构建后的dist文件，所以我们需要将代码上传到git才能显示更新时间，
这里推荐将代码推送到一个新的分支
pages-code，因为后面我们会在自动部署 (opens new window)用到这个代码。注意！！：在你的文件夹vuepress-starter中新建一个文件.gitignore，内容
node_modules/ docs/.vuepress/dist
# Git 仓库和编辑链接
当配置了 themeConfig.repo 选项，将会自动在每个页面的导航栏生成生成一个 GitHub 链接，以及在页面的底部生成一个 "Edit this page" 链接。
module.exports = {
themeConfig: {
repo: 'vuejs/vuepress',
editLinks: true,
docsDir: 'docs',
// 默认为 "Edit this page"
editLinkText: '编辑此页'
}
效果：文章底部有一个编辑此页的链接
有了这个链接，如果读者想要修改文章，可以直接点击后修改；
例如，读者看到有什么想要补充的或者修改错别字之类的，就可以点击，然后 fork 项目并 PR。
可以通过 YAML front matter 来禁用指定某个页面的编辑链接：
---
editLink: false
---
# footer
如果是在默认主题，你可以定义一个全局组件来定义页脚；或者针对某个页面定制页脚。参考：
- Configuration | Theme(opens new window) (opens new window)
- 默认主题配置 | VuePress(opens new window) (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>
`
},
},
效果：在每个页面的底部都有页脚：
# 分离配置
随着博客功能的不断完善，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
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' }],
]
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,
}],
]
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
`
},
}
最后是 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
}
最后重启下博客，观察运行是否正常。
本人主攻后端，对于前端的 Node 和 TS 不太熟悉，只会依葫芦画瓢。这里拆分配置文件的方法主要参考：Kele-Bingtang (opens new window) (opens new window)，其他的功能如首页大图、站点信息等也是参考这个博客，非常感谢他。
参考：