添加阅读时间

创建一个 remark 插件 ，它可以将阅读时间属性添加到 Markdown 或 MDX 文件的 frontmatter 中，然后你就可以使用该属性来为每个页面显示所需的阅读时间。

操作步骤

标题部分 操作步骤

  1. 安装辅助工具包

    安装如下两个辅助工具包：

    终端窗口
    npm install reading-time mdast-util-to-string

  2. 创建一个 remark 插件

该插件使用 mdast-util-to-string 包来获取 Markdown 文件的文本内容，然后将文本传递给 reading-time 包以计算阅读时间（以分钟为单位）。

remark-reading-time.mjs
import getReadingTime from 'reading-time';
import { toString } from 'mdast-util-to-string';


export function remarkReadingTime() {
  return function (tree, { data }) {
    const textOnPage = toString(tree);
    const readingTime = getReadingTime(textOnPage);
    // readingTime.text 会以友好的字符串形式给出阅读时间，例如 3 分钟。
    data.astro.frontmatter.minutesRead = readingTime.text;
  };
}

  1. 将插件添加到你的配置中：

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import { remarkReadingTime } from './remark-reading-time.mjs';
    

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

    现在，所有的 Markdown 文档都会在其 frontmatter 中包含一个计算后的 minutesRead 属性。

  2. 展示阅读时间

    如果你的博客文章存储在 内容集合 中，那么也可以从 entry.render() 函数访问 remarkPluginFrontmatter，然后在模板中根据需要来决定渲染 minutesRead 属性的位置。

    src/pages/posts/[slug].astro
    ---
    import { CollectionEntry, getCollection } from 'astro:content';
    

    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();
    ---
    

    <html>
      <head>...</head>
      <body>
        ...
        <p>{remarkPluginFrontmatter.minutesRead}</p>
        ...
      </body>
    </html>

    如果你正在使用 Markdown 布局，那么在布局模板中也可以直接通过 Astro.props 来获取 frontmatter 中的 minutesRead 属性。

    src/layouts/BlogLayout.astro
    ---
    const { minutesRead } = Astro.props.frontmatter;
    ---
    

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

更多方案