方案#

Astro官方给出的方法是：

添加最后修改时间

编写一个在你的 Markdown 和 MDX 文件里添加最后修改时间的 remark 插件。

docs.astro.build

基本上按照该文档来就行

操作步骤#

1.安装用于修改和格式化时间的Day.js #

1
pnpm add dayjs

2.新建remark插件#

IMPORTANT
如果你的博客不是部署在自己的服务器
而是部署在Cloudflare、Vercel等云托管平台（即每次构架都需要从你的Github仓库拉取文件）
则无法利用插件自动获取文件修改时间，请跳转至4.1更改为获取手动填写的时间，更改为获取手动填写的文章编辑时间

1
import { execSync } from "child_process";
2

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

3.添加配置#

1
...
2
import { remarkModifiedTime } from './src/plugins/remark-modified-time.mjs'
3
···

75
 markdown: {
76
    remarkPlugins: [
77
      remarkMath,
78
      remarkReadingTime,
79
      remarkExcerpt,
80
      remarkGithubAdmonitionsToDirectives,
81
      remarkDirective,
82
      remarkSectionize,
83
      parseDirectiveNode,
84
      remarkModifiedTime,
85
    ],

4.显示最后修改时间#

这里简单做了一个适配的ui组件，置于文章末尾，时间为倒数（即距离现在过去了多少时间）

1
···
2
import dayjs from 'dayjs'
3
import utc from 'dayjs/plugin/utc'
7 collapsed lines
4
import { licenseConfig } from 'src/config'
5
import PostMetadata from '../../components/PostMeta.astro'
6
import ImageWrapper from '../../components/misc/ImageWrapper.astro'
7
import { profileConfig, siteConfig } from '../../config'
8
import { formatDateToYYYYMMDD } from '../../utils/date-utils'
9
import Comments from '@components/widget/Comments.svelte'
10

11

12
dayjs.extend(utc)
13

13 collapsed lines
14
export async function getStaticPaths() {
15
  const blogEntries = await getCollection('posts', ({ data }) => {
16
    return import.meta.env.PROD ? data.draft !== true : true
17
  })
18
  return blogEntries.map(entry => ({
19
    params: { slug: entry.slug },
20
    props: { entry },
21
  }))
22
}
23

24
const { entry } = Astro.props
25
const { Content, headings } = await entry.render()
26

27
const { remarkPluginFrontmatter } = await entry.render()
28

29
const lastModified = dayjs(remarkPluginFrontmatter.lastModified)
30
  .utc()
31
  .format('YYYY-MM-DDTHH:mm:ss')
32

33

86 collapsed lines
34
const jsonLd = {
35
  '@context': 'https://schema.org',
36
  '@type': 'BlogPosting',
37
  headline: entry.data.title,
38
  description: entry.data.description || entry.data.title,
39
  keywords: entry.data.tags,
40
  author: {
41
    '@type': 'Person',
42
    name: profileConfig.name,
43
    url: Astro.site,
44
  },
45
  datePublished: formatDateToYYYYMMDD(entry.data.published),
46
  inLanguage: entry.data.lang
47
    ? entry.data.lang.replace('_', '-')
48
    : siteConfig.lang.replace('_', '-'),
49
  // TODO include cover image here
50
}
51
---
52
<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true} headings={headings} series={entry.data.series}>
53
    <script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
54
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
55
        <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
56
            {}
57
        ]}>
58
            <!-- word count and reading time -->
59
            <div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation">
60
                <div class="flex flex-row items-center">
61
                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
62
                        <Icon name="material-symbols:notes-rounded"></Icon>
63
                    </div>
64
                    <div class="text-sm">{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
65
                </div>
66
                <div class="flex flex-row items-center">
67
                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
68
                        <Icon name="material-symbols:schedule-outline-rounded"></Icon>
69
                    </div>
70
                    <div class="text-sm">{remarkPluginFrontmatter.minutes} {" " + i18n(I18nKey.minutesCount)}</div>
71
                </div>
72
            </div>
73

74
            <!-- title -->
75
            <div class="relative onload-animation">
76
                <div
77
                    data-pagefind-body data-pagefind-weight="10" data-pagefind-meta="title"
78
                    class="transition w-full block font-bold mb-3
79
                    text-3xl md:text-[2.25rem]/[2.75rem]
80
                    text-black/90 dark:text-white/90
81
                    md:before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
82
                    before:absolute before:top-[0.75rem] before:left-[-1.125rem]
83
                ">
84
                    {entry.data.title}
85
                </div>
86
            </div>
87

88
            <!-- metadata -->
89
            <div class="onload-animation">
90
                <PostMetadata
91
                        class="mb-5"
92
                        published={entry.data.published}
93
                        updated={entry.data.updated}
94
                        tags={entry.data.tags}
95
                        category={entry.data.category}
96
                ></PostMetadata>
97
                {!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
98
            </div>
99

100
            <!-- always show cover as long as it has one -->
101

102
            {entry.data.image &&
103
                <ImageWrapper id="post-cover" src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
104
            }
105

106

107
            <Markdown class="mb-6 markdown-content onload-animation">
108
                <Content />
109
            </Markdown>
110

111
            {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
112

113
        </div>
114
    </div>
115

116
     <!---
117
    <Comment post={entry}></Comment>
118
     -->
119

120
    <!-- 添加隐藏元素存储日期 -->
121
    <div id="last-modified" data-last-modified={lastModified} style="display: none;"></div>
122

123
    <div class="card-base p-6 mb-4">
124
        <script is:inline>
125
            function runtime() {
126
                // 从隐藏元素获取日期
127
                const lastModifiedElement = document.getElementById('last-modified');
128
                const startDate = new Date(lastModifiedElement.dataset.lastModified);
129
                const currentDate = new Date();
130
                const diff = currentDate - startDate;
131

132
                const seconds = Math.floor(diff / 1000);
133
                const days = Math.floor(seconds / 86400);
134
                const hours = Math.floor((seconds % 86400) / 3600);
135
                const minutes = Math.floor((seconds % 3600) / 60);
136
                const secs = seconds % 60;
137

138
                const years = Math.floor(days / 365);
139
                const months = Math.floor((days % 365) / 30);
140
                const remainingDays = days % 30;
141

142
                let runtimeString = '距离上次编辑: ';
143
                if (years > 0) {
144
                    runtimeString += `${years}年`;
145
                }
146
                if (months > 0) {
147
                    runtimeString += `${months}月`;
148
                }
149
                if (remainingDays > 0) {
150
                    runtimeString += `${remainingDays}天`;
151
                }
152
                if (hours > -1) {
153
                    runtimeString += `${hours}小时`;
154
                }
155
                if (minutes > -1 && minutes < 10) {
156
                    runtimeString += `0${minutes}分`;
157
                }
158
                if (minutes > 9) {
159
                    runtimeString += `${minutes}分`;
160
                }
161
                if (secs > -1 && secs < 10) {
162
                    runtimeString += `0${secs}秒`;
163
                }
164
                if (secs > 9) {
165
                    runtimeString += `${secs}秒`;
166
                }
167

168
                document.getElementById("modifiedtime").innerHTML = runtimeString;
169
            }
170
            setInterval(runtime, 1000);
171
        </script>
172
        <div class="card-base p-1 mb-0.1">
173
            <script is:inline></script>
174
            <div class="flex items-center gap-2">
175
                <!-- 修正后的图标容器 -->
176
                <div class="transition h-9 w-9 rounded-lg overflow-hidden
177
           bg-[var(--primary)] relative
178
           flex items-center justify-center mr-0">
179
    <!-- 半透明遮罩层 -->
180
    <div class="absolute inset-0 bg-white/70 dark:bg-black/70 rounded-md overflow-hidden"></div>
181
    <!-- 图标 -->
182
    <Icon name="material-symbols:history-rounded"
183
          class="text-[1.35rem] text-[var(--primary)] relative z-10"/></div>
184
                <!-- 文字容器保持不变 -->
185
                <div class="flex flex-col gap-0.1">
186
                    <div id="modifiedtime" class="text-[1.0rem] leading-tight text-black/75 dark:text-white/75"></div>
187
                    <p class="text-[0.8rem] leading-tight text-black/75 dark:text-white/75">部分信息可能已经过时</p>
188
                </div>
189
            </div>
190
        </div>
191
        <!--  <p>{lastModified}</p>   -->
192
    </div>
193
···

4.1更改为获取手动填写的时间#

关于[slug].astro的修改，部署于托管平台的，此处需要改为获取文章头部数据中的updated时间

其余代码不变即可

手动填写时格式为：updated: YYYY-MM-DD HH:mm:ss

29
 const lastModified = dayjs(remarkPluginFrontmatter.lastModified)
30
 const lastModified = dayjs(entry.data.updated)
31
  .utc()
32
  .format('YYYY-MM-DDTHH:mm:ss')

效果#

每篇文章结尾都会显示最后修改时间啦😋

往下滑一点就能看到效果

方案#

操作步骤#

1.安装用于修改和格式化时间的Day.js#

2.新建remark插件#

3.添加配置#

4.显示最后修改时间#

4.1更改为获取手动填写的时间#

效果#

1.安装用于修改和格式化时间的Day.js #