Question

你好，我不是开发人员，所以这个问题对您来说可能很容易。我从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

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

Answer 2

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

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

并通过postEdge.node.parent.modifiedTime

在您的计算机中访问它

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

2 个答案:

第一种方法

第二种方法

第三种方法