VuePress博客优化最后更新如何设置最后更新时间

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，但是浏览最终站点：TypeScript4中文文档，我们会发现在每篇文章的底部，并且没有像VuePress官方文档那样的最后更新时间：在这篇文章中，我们来探讨一下如何实现最后更新时间。官方自带了VuePress的官方文档。我们可以知道，VuePress自带了一个显示最后更新时间的插件。默认主题下不需要安装这个插件，因为VuePress的核心已经包含了这个插件。你可以直接在config.js文件中使用它：//.vuepress/config.jsmodule.exports={themeConfig:{lastUpdated:'LastUpdated',//string|boolean}}注意themeConfig.lastUpdated默认关闭，当给定一个字符串时，它将显示为前缀（默认：LastUpdated）。在这个示例代码中，我们将lastUpdated的值设置为“LastUpdate”，最终的效果应该和上面的VuePress官网截图一致。这里也提醒一下：由于lastUpdated是基于git的，所以只能在基于git的项目中启用。此外，由于使用的时间戳来自git提交，它只会出现在给定页面的第一次提交之后，并且只会在对该页面的后续提交更改时更新。然后我们按照文档尝试配置一下，发现并没有所谓的最后更新时间，因为没有显示内容，看来这里也有很大的落差：查看插件源码，为什么是这样？回头看我们代码编译提交的过程，实际上我们是在本地编写源代码，然后执行构建命令，gitinit构建后的结果，然后强行提交到远程仓库。从我们的deploy.sh脚本文件可以看出：npmrundocs:buildcddocs/.vuepress/distgitinitgitadd-Agitcommit-m'deploy'gitpush-fgit@github.com:mqyqingfeng/learn-typescript。gitmaster:gh-pages应该没问题，我们只是作为git仓库提交，也提交了一个commit，为什么显示不出来呢？说起来，最后更新的最后更新时间是怎么产生的呢？他是如何根据gitcommit记录自动生成时间的呢？为了解决这个问题，满足我们的好奇心，我们不妨看看@vuepress/plugin-last-updated这个npm包的源码，发现它的源码出奇的简单：constpath=require('path')constspawn=require('cross-spawn')/***@type{import('@vuepress/types').Plugin}*/module.exports=(options={},context)=>({extendPageData($page){const{transformer,dateOptions}=optionsconsttimestamp=getGitLastUpdatedTimeStamp($page._filePath)const$lang=$page._computed.$langif(timestamp){constlastUpdated=typeoftransformer==='函数'?transformer(timestamp,$lang):defaultTransformer(timestamp,$lang,dateOptions)$page.lastUpdated=lastUpdated$page.lastUpdatedTimestamp=timestamp}}})functiondefaultTransformer(timestamp,lang,dateOptions){returnnewDate(timestamp).toLocaleString(lang,dateOptions)}functiongetGitLastUpdatedTimeStamp(filePath){让lastUpdated尝试{lastUpdated=parseInt(spawn.sync('git',['log','-1','--format=%at',path.basename(filePath)],{cwd:path.dirname(filePath)}).stdout.toString('utf-8'))*1000}catch(e){/*暂不处理*/}returnlastUpdated}通过源码我们可以发现，之所以能够产生时间，其实是通过使用gitlog命令，然后在$page全局属性中写Whatis$pageand$page?查看官方文档-GlobalComputedAttributes章节：在VuePress中，内置了一些核心计算属性，供默认使用或自定义主题使用。对于每一个页面，都会有一个$page的计算属性，官方也给出了$page的例子：{"title":"GlobalComputed","frontmatter":{"sidebar":"auto"},"regularPath":"/zh/miscellaneous/global-computed.html","key":"v-bc9a3e3f9692d","path":"/zh/miscellaneous/global-computed.html","headers":[{"level":2,"title":"$site","slug":"site"},{"level":2,"title":"$page","slug":"page"},...]}由此，我们可以认为VuePress其实是为每个页面生成一个$page计算属性，然后在多个地方显示计算属性的值，那么突破口就来了。如果我们像源码那样直接在$page中写入一个lastUpdated属性呢？在Markdown中使用Vue，我们的每一个页面都是根据markdown文件生成的。我们如何在降价文件中将lastUpdated属性写入$page？幸运的是，在VuePress中，markdown可以直接使用Vue语法。这里我们使用vuepress-theme-reco主题的示例代码作为说明：//直接在markdown文案中写

样式模块>.example{color:#41b883;}在页面上显示效果如下：那么我们直接在Markdown中直接写如下Vue代码：我们在本地运行代码，然后查看页面，会发现确实成功写入了最后更新时间：Vue组件，但是每篇都插入一段Vue代码很麻烦.勉强可以接受手动更新时间，但是不能接受每次这么多文章都要手动改，即使Batchreplacement也有点麻烦。就没有更优化的方法了吗？那么我们就可以把这段Vue代码抽取出来，放到一个Vue组件中，把具体的时间封装在组件中，然后把这个组件导入到各个md文件中。并且VuePress还可以支持组件的引入。查看官方文档：所有在.vuepress/components下找到的*.vue文件都会自动注册为全局异步组件，如：.└─.vuepress└─components├─demo-1.vue├─OtherComponent.vue└─Foo└─Bar.vue你可以在任何Markdown文件中直接使用这些组件（组件名称从文件名中获取）：我们将创建一个新的.vuepress文件夹下的components文件夹，然后创建一个LastUpdated.vue文件，代码为：然后我们在会用到这个时间的md文件里写：自然时间也写成功了：这样每次我们在LastUpdated组件修改时间，所有地方的时间引入组件的位置将发生变化。Markdown的问题好像是用曲线救国解决的，就是每次都需要手动更新，所有引用的地方都会更新。如果要在某个地方实现本地更新，就得自己写时间。其实还是有点麻烦的。我们回顾下官方文档中的介绍：由于lastUpdated是基于git的，所以只能在基于git的项目中启用。此外，由于使用的时间戳来自git提交，它只会出现在给定页面的第一次提交之后，并且只会在对该页面的后续提交更改时更新。官方文档中也有这样一句话：lastUpdated是最后一次git提交这个文件的UNIX时间戳。那么这句话中的“thisfile”指的是哪个文件呢？回想一下我们的提交方式，每次只提交编译好的文件。编译后的文件是一个HTML文件。虽然是以git仓库的形式提交的，但是编译后应该是静态的。运行html文件时无法通过git仓库获取最后一次提交时间，所以这个文件应该不是指编译后的文件，那么排除编译后的文件，其实我们可以认为这里指的文件实际上应该是是你写的降价文件。当你执行编译命令时，从git日志中获取时间并将其写入编译代码中。这也可以解释为什么我们按照官方文档配置后没有显示时间，因为我们的源代码确实不是git仓库，我们只是编译代码生成一个代码仓库提交，自然无法获取到时间。于是我们进入源码根目录，然后执行gitinit。注意，如果要生成最后更新时间，至少需要commit仓库gitinit文件一次，但是我们gitadd的时候，可能会报错，会提示你已经添加了另一个git仓库在您当前的存储库中：您在当前存储库中添加了另一个git存储库。这是因为我们编译的dist目录也是一个git仓库，但是解决方法其实很简单，我们直接用一个.gitignore文件就可以忽略dist目录，这个是.gitignore文件里面写的内容：node_modulesdist我们commit之后然后运行代码，你会看到每篇文章都会有最后更新时间：Lastupdated如果你想改变之前的时间LastUpdated:这个字符，你可以在config.js中写：module.exports={themeConfig:{lastUpdated:'LastUpdated'}}显示效果会变成：changetheformat如果想改变时间的显示格式，参考@vuepress/plugin-last-updated的官方文档，可以这样写：constmoment=require('moment');module.exports={plugins:[['@vuepress/last-updated',{transformer:(timestamp,lang)=>{//不要忘记安装momentconstmoment=require('moment')moment.locale(lang)returnmoment(timestamp).fromNow()}}]]}显示效果为:至此，虽然绕了一圈，还是简单的解决了这个问题。系列文章博客搭建系列是我目前为止唯一写的实用系列教程，讲解如何使用VuePress搭建博客并部署到GitHub、Gitee、个人服务器等平台。一会带你用VuePress+GitHubPages搭建博客一会教你如何在GitHub和Gitee之间同步代码还是不知道如何使用GitHubActions？看看这个Gitee是如何自动部署Pages的？仍然使用GitHubActions！一个足够做前端的Linux命令，一个足够简单的NginxLocation配置讲解一篇教你如何将博客部署到自己服务器的文章微信：“mqyqingfeng”，加我到SaeYu的唯一读者群。如有错误或不准确的地方，请务必指正，万分感谢。如果你喜欢或者有启发，欢迎star，这也是对作者的鼓励。