graphql - 如何在 GATSBY.js 中获取博客文章的 'Last Update Date'

Question

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

Gatsby 节点.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

Answer 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”中写了更多相关内容。