前端文档SSR【免费下载链接】vuepress Minimalistic Vue-powered static site generator项目地址https://gitcode.com/gh_mirrors/vu/vuepress点击查看免费下载vuepress/plugin-last-updated是 VuePress 官方提供的最后更新时间插件它基于 Git 提交历史为每一个页面计算出最后一次提交的时间戳并渲染在页面底部。本文以该插件在 当前仓库 中的源码与官方文档为据系统讲解它的工作原理、两种启用方式默认主题内置与自定义主题手动接入、transformer与dateOptions两个核心配置项以及在多语言i18n场景下的正确用法读完即可在自己的 VuePress 站点中配置出专业、本地化的Last Updated信息栏。插件定位VuePress 官方插件家族的一员vuepress/plugin-last-updated位于仓库的packages/vuepress/plugin-last-updated/目录其 package.json 声明插件名vuepress/last-updated使用时去掉plugin-前缀版本1.9.10依赖vuepress/types提供插件类型定义与cross-spawn用于跨平台执行 Git 子进程入口index.js它属于 VuePress 官方插件体系packages/vuepress/下的plugin-*系列职责非常单一为每个页面注入lastUpdated时间字符串与lastUpdatedTimestamp13 位毫秒时间戳两个页面级数据字段。核心原理一条 Git 命令驱动整个插件整个插件的实现非常精简全部逻辑集中在 index.js 中核心是extendPageData钩子与一个 Git 子进程调用module.exports (options {}, context) ({ extendPageData ($page) { const { transformer, dateOptions } options const timestamp getGitLastUpdatedTimeStamp($page._filePath) const $lang $page._computed.$lang if (timestamp) { const lastUpdated typeof transformer function ? transformer(timestamp, $lang) : defaultTransformer(timestamp, $lang, dateOptions) $page.lastUpdated lastUpdated $page.lastUpdatedTimestamp timestamp } } }) function defaultTransformer (timestamp, lang, dateOptions) { return new Date(timestamp).toLocaleString(lang, dateOptions) } function getGitLastUpdatedTimeStamp (filePath) { let lastUpdated try { lastUpdated parseInt(spawn.sync( git, [log, -1, --format%at, path.basename(filePath)], { cwd: path.dirname(filePath) } ).stdout.toString(utf-8)) * 1000 } catch (e) { /* do not handle for now */ } return lastUpdated }从源码可以梳理出插件的工作流程在 VuePress 生成每个页面数据时触发extendPageData钩子通过cross-spawn以同步方式执行git log -1 --format%at 文件名在页面文件所在目录cwd: path.dirname(filePath)中查询该文件最近一次提交的 Unix 时间戳秒将秒级时间戳parseInt(...)后乘以 1000得到 13 位毫秒时间戳若用户提供了transformer函数则调用它格式化否则使用默认的defaultTransformer即new Date(timestamp).toLocaleString(lang, dateOptions)把结果写入$page.lastUpdated与$page.lastUpdatedTimestamp。需要注意几个实现细节命令使用了path.basename(filePath)即仅以文件名匹配最近提交。对于同名文件位于不同目录的情况Git 的log会返回该文件名最近一次被提交的任意路径记录因此结果可能不是精确到当前路径的提交。这是插件实现上的已知简化在绝大多数文档站点文件名全局唯一场景下无碍。异常被静默吞掉catch (e) { /* do not handle for now */ }这意味着在非 Git 仓库、Git 未安装或命令失败时timestamp为undefined页面不会获得lastUpdated字段构建不会因此报错。首次提交之前没有数据由于时间戳来自 Git 提交一个从未被提交过的页面文件不会产生时间字符串页面首次提交后才出现并随后续提交更新。默认主题无需安装直接开启官方文档明确说明如果你使用默认主题不需要安装本插件因为 VuePress 的core已经内置了它直接使用themeConfig.lastUpdated选项即可。这并非一句空话从 core 的 App.js 源码可以得到印证applyInternalPlugins()在内部插件列表中通过.use(vuepress/last-updated, !!shouldUseLastUpdated)挂载该插件而是否启用由shouldUseLastUpdated决定const shouldUseLastUpdated ( themeConfig.lastUpdated || Object.keys(siteConfig.locales themeConfig.locales || {}) .some(base themeConfig.locales[base].lastUpdated) )也就是说只要顶层themeConfig.lastUpdated为真或任一 locale 的themeConfig.locales[base].lastUpdated为真插件即被激活。vuepress/plugin-last-updated在 core 的 package.json 中被声明为依赖与这条内部挂载逻辑正好闭环。在默认主题下配置方式参见 default-theme-config.mdmodule.exports { themeConfig: { lastUpdated: Last Updated, // string | boolean } }默认关闭传true时显示前缀文案使用默认值Last Updated传字符串时该字符串会作为前缀显示在时间前面由于依赖 Git只能在 Git 仓库中使用且只对已提交过的页面生效之后每次提交该页面都会刷新时间。默认主题的 UI 渲染在 PageEdit.vue 中完成当$page.lastUpdated存在时页面底部右侧会显示前缀: 时间字符串前缀文本优先取$themeLocaleConfig.lastUpdated其次取$site.themeConfig.lastUpdated最后回退为英文Last Updated。因此你甚至可以为不同语言区域配置各自的前缀文案实现完全本地化的展示。自定义主题安装插件并自行渲染 UI如果你使用的是自定义主题那么必须手动安装并注册插件同时自行处理显示界面。此时可以通过$page.lastUpdated时间字符串访问页面数据详见 global-computed.md。安装插件配置在config.js的plugins数组中module.exports { plugins: [vuepress/last-updated] }在你的主题组件如Page.vue中即可读取template div slot namepage-top / slot namepage-content / p v-if$page.lastUpdated最后更新于{{ $page.lastUpdated }}/p /div /template主题作者还可以在extendPageData之外的任意 Vue 组件计算属性中访问this.$page.lastUpdatedTimestamp13 位毫秒时间戳用它做更灵活的二次加工。选项一transformer——自定义时间格式类型(timestamp: number, lang: string) string默认值undefined默认情况下插件为每个页面生成的是13 位毫秒时间戳并交由defaultTransformer用Date.prototype.toLocaleString(lang, dateOptions)转成可读字符串。如果你想要3 天前这类相对时间或某种特定排版可以传入transformer自行转换。官方文档给出的moment示例注意moment需自行安装const moment require(moment); module.exports { plugins: [ [ vuepress/last-updated, { transformer: (timestamp, lang) { // Dont forget to install moment yourself const moment require(moment) moment.locale(lang) return moment(timestamp).fromNow() } } ] ] }对照 index.js 的源码可以看到调用逻辑当transformer是函数时插件会优先使用它timestamp毫秒与lang作为两个参数传入其返回值将直接赋给$page.lastUpdated。多语言i18n模式下的 lang 参数如果你在 i18n 模式下运行transformer的第二个参数lang可用于为不同语言生成对应的时间文案——这正是上面moment.locale(lang)的用途。重要的规范提示VuePress 遵循 W3C 的 Language tags in HTML and XML 规范语言标签使用连字符-而非下划线_例如zh-CN、en-US。请确认你使用的格式化库遵循同一规范否则需要自行做zh_CN↔zh-CN之类的转换。这一点同样适用于默认的toLocaleString(lang)因为 ECMAScript 的toLocaleString也遵循 BCP 47 语言标签。选项二dateOptions——定制 toLocaleString 输出类型object默认值undefined当你不使用transformer时可以传入dateOptions对象它会被直接透传给默认的Date.prototype.toLocaleString(lang, dateOptions)见 defaultTransformer 实现用于控制输出的细节例如 12/24 小时制、时区、星期与月份名称等。官方文档示例——关闭 12 小时制输出 24 小时制时间module.exports { plugins: [ [ vuepress/last-updated, { dateOptions: { hour12: false } } ] ] }dateOptions支持Date.prototype.toLocaleString()的全部 options 参数常用字段包括字段作用示例值hour12是否使用 12 小时制false24 小时制year/month/day年月日的展示粒度numeric/2-digitweekday是否显示星期几long/shorthour/minute/second时分秒是否显示2-digit/numerictimeZone指定时区如Asia/Shanghai时区字符串注意dateOptions仅在未提供transformer时生效一旦传入了transformer格式化的全部逻辑由你的函数接管dateOptions将被忽略。数据流与使用场景小结综合 plugin 源码、core 集成点 与 默认主题渲染组件 可以看到完整链路Git 提交历史 │ git log -1 --format%at file (cross-spawn 同步执行) ▼ 秒级时间戳 × 1000 ──► 13 位毫秒时间戳 ($page.lastUpdatedTimestamp) │ ├─ 有 transformer──► transformer(timestamp, lang) ──► $page.lastUpdated └─ 无 transformer──► new Date(timestamp).toLocaleString(lang, dateOptions)该插件最典型的应用场景是技术文档站与博客在每篇文章底部自动展示最后更新于 2026-09-19 06:30:00让读者快速判断内容的新鲜度配合主题的editLinks编辑此页功能还能同时提供内容修正入口。对于需要展示相对时间如3 天前更新或自定义时区的站点则分别使用transformer与dateOptions即可。最后提醒两个易踩的坑一是必须在 Git 仓库内构建否则插件静默失败、页面不会出现时间二是页面必须至少提交过一次且之后的每次提交都会刷新时间——这正是最后更新语义的准确体现。赞分享前端文档SSR【免费下载链接】vuepress Minimalistic Vue-powered static site generator项目地址https://gitcode.com/gh_mirrors/vu/vuepress点击查看免费下载相关推荐VuePress 插件 vuepress/plugin-last-updated基于 Git 的「最后更新时间」实战指南VuePress 插件 vuepress/plugin last updated基于 Git 的「最后更新时间」实战指南 vuepress/plugin前端文档SSRVuePress 插件 vuepress/plugin-last-updated 完全指南基于 Git 提交时间的页面更新日期展示VuePress 插件 vuepress/plugin last updated 完全指南基于 Git 提交时间的页面更新日期展示 导读 vuepress前端文档SSRArchify Viewer Runtime 完全指南探索、故事、动效与可验证导出的读者端能力体系Archify Viewer Runtime 完全指南探索、故事、动效与可验证导出的读者端能力体系 Archify 生成的自包含 HTML 不只是静态图表而前端文档SSR上一篇终极Universal Radio Hacker教育计划培养下一代无线安全专家的10个技巧下一篇用MCP Apps构建实时监测仪表盘轮询模式完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考