添加最后修改时间

发布于 2024-06-05 21:19:56 字数 3530 浏览 0 评论 0 收藏 0

学习如何编写一个在你的 Markdown 或 MDX 文件的 frontmatter 中添加最后修改时间的 remark 插件。使用这个属性在你的页面中显示最后修改时间。

操作步骤

安装辅助包
安装用于修改和格式化时间的 Day.js：
- npm
- pnpm
- Yarn
```
npm install dayjs
```
```
pnpm add dayjs
```
```
yarn add dayjs
```

创建一个 remark 插件

这个插件使用 execSync 运行一个 Git 命令获取最后一次提交的 ISO 8601 时间戳，然后将时间戳添加到文件的 frontmatter 中。

remark-modified-time.mjs

import { execSync } from "child_process";


export function remarkModifiedTime() {
  return function (tree, file) {
    const filepath = file.history[0];
    const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`);
    file.data.astro.frontmatter.lastModified = result.toString();
  };
}

使用文件系统而不是 Git

虽然使用 Git 是获取文件的最后修改时间的推荐方式，但也可以使用文件系统的修改时间。这个插件使用 statSync 获取文件的 ISO 8601 格式的 mtime (修改时间)，然后将时间戳添加到文件的 frontmatter 中。

remark-modified-time.mjs

import { statSync } from "fs";


export function remarkModifiedTime() {
  return function (tree, file) {
    const filepath = file.history[0];
    const result = statSync(filepath);
    file.data.astro.frontmatter.lastModified = result.mtime.toISOString();
  };
}

将插件添加到你的配置中

astro.config.mjs

import { defineConfig } from 'astro/config';
import { remarkModifiedTime } from './remark-modified-time.mjs';


export default defineConfig({
  markdown: {
    remarkPlugins: [remarkModifiedTime],
  },
});

现在所有的 Markdown 文档的 frontmatter 中都会有一个 lastModified 属性。

显示最后修改时间

如果你的博客文章存储在内容集合中，通过 entry.render() 函数获取 remarkPluginFrontmatter，然后在模板中你喜欢的位置渲染 lastModified。

src/pages/posts/[slug].astro

---
import { CollectionEntry, getCollection } from 'astro:content';import dayjs from "dayjs";import utc from "dayjs/plugin/utc";

dayjs.extend(utc);


export async function getStaticPaths() {
  const blog = await getCollection('blog');
  return blog.map(entry => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}


const { entry } = Astro.props;const { Content, remarkPluginFrontmatter } = await entry.render();

const lastModified = dayjs(remarkPluginFrontmatter.lastModified)  .utc()  .format("HH:mm:ss DD MMMM YYYY UTC");
---


<html>
  <head>...</head>
  <body>
    ...    <p>Last Modified: {lastModified}</p>
    ...
  </body>
</html>

如果你使用的是 Markdown 布局，在布局模板中通过 Astro.props 来获取 frontmatter 中的 lastModified 属性。

src/layouts/BlogLayout.astro

---import dayjs from "dayjs";import utc from "dayjs/plugin/utc";

dayjs.extend(utc);

const lastModified = dayjs()  .utc(Astro.props.frontmatter.lastModified)  .format("HH:mm:ss DD MMMM YYYY UTC");
---


<html>
  <head>...</head>
  <body>    <p>{lastModified}</p>
    <slot />
  </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

添加最后修改时间

操作步骤

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。