跳转到内容

添加阅读时间

创建一个 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 will give us minutes read as a friendly string,
        // i.e. "3 min read"
        data.astro.frontmatter.minutesRead = readingTime.text;
      };
    }

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

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

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

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

  4. 显示阅读时间

    如果你的博客文章存储在内容集合中，可以从 render(entry) 函数中访问 remarkPluginFrontmatter。然后，在你希望它出现的任何地方，在模板中渲染 minutesRead。

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

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

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

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

    如果你正在使用 Markdown 布局，可以在你的布局模板中使用来自 Astro.props 的 minutesRead frontmatter 属性。

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

    <html>
      <head>...</head>
      <body>
        <p>{minutesRead}</p>
        <slot />
      </body>
    </html>
贡献 社区 赞助