npm 包 @vuepress/plugin-last-updated 使用教程

在开发网站时，最后更新时间是一个基本要素，用于提高网站的可信性和内容信息的准确性。在 vuepress 中，为了更方便的展示文档的最后更新时间，我们可以使用 npm 包 @vuepress/plugin-last-updated。

什么是 @vuepress/plugin-last-updated？

@vuepress/plugin-last-updated 是一个 VuePress 的插件，它可以根据 Git 的提交记录在页面上自动的展示最后更新时间。它的实现原理非常简单，它会利用 Git 的提交记录来自动识别页面最后一次更新的时间，并将此时间插入到页面的特定位置。

如何在 VuePress 中使用 @vuepress/plugin-last-updated？

在 VuePress 中使用 @vuepress/plugin-last-updated 很简单，我们只需要进行以下步骤：

1. 安装 @vuepress/plugin-last-updated 插件

npm install -D @vuepress/plugin-last-updated

1. 在 .vuepress/config.js 中添加插件

module.exports = {
  plugins: ['@vuepress/plugin-last-updated']
}

1. 在需要展示最后更新时间的页面的 frontmatter 中添加 lastUpdated 字段

---
title: My Page
lastUpdated: June 24th, 2021
---

或者，您也可以简单地设置 true ，表示自动添加最后更新时间，如下：

---
title: My Page
lastUpdated: true
---

1. 显示最后更新时间

添加了 lastUpdated 字段后，您可以通过在页面上添加下面代码来显示最后更新时间：

<footer>
  <p>Last Updated: {{ $page.lastUpdated }}</p>
</footer>

实例使用

下面，我们通过一个简单的实例来展示如何使用 @vuepress/plugin-last-updated。

1. 安装 VuePress

mkdir vuepress-demo
cd vuepress-demo
npm init -y
npm i -D vuepress

1. 初始化 VuePress

mkdir docs
echo '# Hello VuePress' > docs/README.md
echo '---\nlastUpdated: true\n---' >> docs/README.md

1. 添加最后更新插件

npm i -D @vuepress/plugin-last-updated

在 .vuepress/config.js 中添加 @vuepress/plugin-last-updated 插件

module.exports = {
  plugins: ['@vuepress/plugin-last-updated'],
}

1. 更新 README.md 文件

在 docs/README.md 的 footer 中添加显示最后更新时间的代码，并用 npm run docs:dev 命令运行，我们就可以在页面上看到最后更新时间了：

-- -------------------- ---- -------
----------
  -----
    --------- -------------
  ------
-----------

--------
------ ------- --
---------

----------
  --------
    ------- -------- -- ----------------- ------
  ---------
-----------

最后，启动 VuePress：

npm run docs:dev

运行后，您就可以在浏览器中看到您的页面，其中包含了页面的最后更新时间。

结论

今天，我们学习了如何在 VuePress 中使用 @vuepress/plugin-last-updated 插件。我们了解了该插件的原理、使用方法和示例。最后，我们知道了 @vuepress/plugin-last-updated 在 VuePress 中展示网站更新时间是多么方便，希望对您有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f05dbee403f2923b035bf1e