如何在盖茨比中获取博客文章'Last Update Date'.js

Question

你好，我不是开发人员，所以这个问题对你们来说很容易。我使用了来自Gatsby网站的Advance Starter。该博客工作完美，但我需要在标题下提供最后更新的时间。搜索了一些解决方案，但它们都没有起作用。您能提供一些帮助吗？

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

Answer 1

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

1st方法

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

第二种方法

您可以编辑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

第三种方法

类似于上一个，但使用插件盖茨比转换器INFO。它做的事情与第二种方法类似，但是这次您需要以不同的方式访问修改后的时间。喜欢：

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

我在博客文章中写了更多有关此的信息，并添加到您的盖茨比博客中。如果您想检查一下。

Answer 2

edit：下面的答案实际上是错误的，因为 File. modifiedTime是的修改时间 markdown文件本身＆amp;不是您的内容的修改时间。例如，如果您在netlify上部署博客，则文件的修改时间与本地环境中的不同。

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

---

无论您在何处查询Markdown文件，都可以使用以下字段：

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

并在通过postEdge.node.parent.modifiedTime