如何在 GATSBY.js 中获取博客文章的“最后更新日期”答案

【问题标题】：How to get 'Last Update Date' of a blog post in GATSBY.js如何在 GATSBY.js 中获取博客文章的“最后更新日期”
【发布时间】：2021-02-09 19:31:21
【问题描述】：

您好，我不是开发人员，所以问题对你们来说可能很容易。我使用了 gatsby 网站的高级启动器。该博客运行良好，但我需要在我的标题下提供最后更新时间。搜索了一些解决方案，但没有一个有效。你能提供一些帮助吗？

gatsby-node.js

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions;
  if (node.internal.type !== 'MarkdownRemark') {
    return;
  }
  const fileNode = getNode(node.parent);
  createNodeField({
    node,
    name: 'modifiedTime',
    value: fileNode.mtime
  });
};




`````````````````````````
PostListing.jsx




class PostListing extends React.Component {
  getPostList() {
    const postList = [];
    this.props.postEdges.forEach(postEdge => {
      postList.push({
        path: postEdge.node.fields.slug,
        tags: postEdge.node.frontmatter.tags,
        cover: postEdge.node.frontmatter.cover,
        title: postEdge.node.frontmatter.title,
        date: postEdge.node.fields.date,
        excerpt: postEdge.node.excerpt,
        timeToRead: postEdge.node.timeToRead,
        modifiedTime:postEdge.node.modifiedTime
      });
    });
    return postList;
  }
  render() {
    const postList = this.getPostList();
    return (
      <div className='posts'>
        {/* Your post list here. */
        postList.map(post => (
          <Fragment>    
              <div className='singlePost__date'>
                <h4 style={{color:'white'}}>  {post.modifiedTime}</h4>
              </div>
              <div className='singlePost__Title'>
              <Link classname='singlePost' to={post.path} key={post.title}>
                    <h1 className='singlePost__title'>{post.title}</h1>
              </Link> 
              </div>

          </Fragment>

        ))}
      </div>
    );
  }
}

export default PostListing;

I expect something like 

TITLE
last updated : 3/2/2019

【问题讨论】：

标签： graphql gatsby

【解决方案1】：

您可以使用存储在 Git 中的信息来获取文件被修改的最新时间。

第一种方法

手动跟踪它，但如果您忘记编辑修改时间，这可能容易出错。因此，如果您无法让其他人工作，我建议将其作为最后一个选择。

第二种方法

您可以编辑您的 gatsby-node.js 以从 Git 中提取信息，如下所示：

const { execSync } = require("child_process")

exports.onCreateNode = ({ node, actions }) => {
  // ...

  if (node.internal.type === "MarkdownRemark") {
    const gitAuthorTime = execSync(
      `git log -1 --pretty=format:%aI ${node.fileAbsolutePath}`
    ).toString()
    actions.createNodeField({
      node,
      name: "gitAuthorTime",
      value: gitAuthorTime,
    })
  }

  // ...
}

然后，在您的模板中，您可以获取它：

query($slug: String!) {
  markdownRemark(fields: { slug: { eq: $slug } }) {
    # ...
    fields {
      gitAuthorTime
    }
    # ...
  }
}

最后，像这样在 JSX 中使用它：

import React from "react"

const BlogPost = (props) => {
  const { gitAuthorTime } = props.data.markdownRemark.fields

  render(<p>Updated at: ${gitAuthorTime}</p>)
}

export default BlogPost

第三种方法

与上一个类似，但它使用插件gatsby-transformer-info。它的作用与第二种方法类似，但这次您需要以不同的方式访问修改后的时间。像这样：

query($slug: String!) {
  markdownRemark(fields: { slug: { eq: $slug } }) {
    # ...
    parent {
      ... on File {
        fields {
          gitLogLatestDate
        }
      }
    }
    # ...
  }
}

如果您想查看，我在我的博文“Add Updated At To Your Gatsby Blog”中写了更多关于此的内容。

【讨论】：

【解决方案2】：

编辑： 下面的答案实际上是错误的，因为File. modifiedTime 是降价文件本身的修改时间，而不是您的内容的修改时间。例如，如果您将博客部署在 Netlify 上，那么您的文件的 modifiedTime 将与您本地环境中的不同。

我认为正确的答案是单独跟踪它。如果您使用的是 NetlifyCMS 等 CMS，您可以创建一个字段，在每次编辑时自动更新日期/时间。

无论您在哪里查询降价文件，都可以使用以下字段：

query {
  allMarkdownRemark {
    edges {
      node {
        frontmatter { /* other stuff */ }
        parent {
          ... on File {
            modifiedTime(formatString: "MM/DD/YYYY")
          }
        }
      }
    }
  }
}

并通过postEdge.node.parent.modifiedTime 访问它

【讨论】：