如何将更新的内容添加到您的盖茨比博客

热门技术勘探工
92 阅读4分钟

建立你的网站声誉的一个很好的提示是保持你的内容是最新的。许多网站，尤其是博主，时不时地会这样做。我也时常这样做，但我没有向我的读者展示这些信息。

同样重要的是，我无法向搜索引擎（阅读谷歌）展示我的博客文章的最新程度。而如果你想让搜索引擎尽可能将你的博文显示在搜索结果的最前面，显示文章的更新时间会很有用。因此，你不仅是在告知用户帖子的相关程度，而且也是在提高帖子的SEO:

如果你写的内容涉及经常变化的主题（JavaScript khm-khm），你可能希望保持这些帖子的新鲜度。当然，也有那些永恒的写作作品，不会因为显示更新时间而受益。如果你觉得你有这样的文章，也许最好不要让它们显示修改时间。

我想为我的博客文章显示 "更新于 "已经有很长时间了，最后我终于做到了。我受到莫妮卡-伦特最近一期通讯的启发，她提到你可以快速做到这一点，但对于具体如何做并没有太多的细节。

请继续关注，因为我们将通过几个解决方案，在你的博客文章上用Gatsby显示最后修改或更新日期。

一个明显的（手动）解决方案

其中一个直接的解决方案是在你的前台事务中添加一个字段，像这样:

---
title: Top 5 JavaScript Libraries in 2021
published: 2021-01-04
updated: 2021-02-09
---

Hey everyone, let us go through some of the top 5 JS libraries this year.

如果你注意到，我们有两个日期字段。一个字段是发表的，它告诉你文章是什么时候发表的。然后，我们有一个更新字段，它将显示帖子何时被更新或修改。我把这个字段命名为更新，但你可以释放你内心的创造力，想出一个更适合你的名字。

使用这种手动方法是令人愉快和直接的，但它有一个缺点。你必须记得每次编辑博文时都要更新它，这就给错误留下了空间。

如果我们能以某种方式将整个过程自动化，那就更好了。 幸运的是，我们现在正朝着这个方向前进，带好。

不那么明显的（自动）解决方案

如果我们想摆脱每次编辑博文时不断地更新前台的日期字段的痛苦，我们可以使用Git。值得庆幸的是，Git会记录日期、时间以及你在每次提交时修改了哪些文件。所有这些信息在Git里面就像音乐一样，因为它正是我们所需要的。

但是，我们如何将这些信息 "拉入 "Gatsby中呢？我们需要修改gatsby-node.js ，并动态地添加一个新的字段。如果你是一个初学者，或者你有点害怕接触gatsby-node.js ，我建议你看看我的博文 "从零开始建立Gatsby博客"。在那里，我们深入研究了用gatsby-node.js 来做动态的事情。或者你可以坚持到博文的最后，在那里我们展示了一个更直接的解决方案。

为了生成一个新的字段，从Git中获取最后修改时间，我们必须在我们的gatsby-node.js 中添加以下代码:

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,
    })
  }

  // ...
}

我们在这里做的是，告诉Gatsby在节点创建时为其添加gitAuthorTime字段。我们使用execSync 来执行一个git log 命令，返回一个作者日期。这个Git命令并不像看起来那么复杂，让我们把它分解一下:

  • git log 返回提交日志
  • git log -1 返回最新的提交日志
  • git log -1 --pretty=format:%aI 返回严格的 ISO 8601 格式的最新提交者日期。在它的文档中，有一堆的选项
  • git log -1 --pretty=format:%aI ${node.fileAbsolutePath} 返回上面提到的所有内容，但是针对一个特定的文件。

太棒了，现在我们在我们的节点上添加了一个gitAuthorTime 字段，我们可以简单地在我们的博客文章模板中查询它:

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

以后我们就可以像这样在我们的props中访问它:

import React from "react"

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

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

export default BlogPost

酷，但如果你不想配置gastby-node.js 呢？ 不用再看了，有，你猜对了，有一个Gatsby插件。

简单（自动）的解决方案

有一个gatsby-transformer-info插件，可以为我们从Git中提取信息。使用这个插件可以帮助我们，这样我们就不必在gatsby-node.js 里面编写和维护自定义的解决方案。

安装完插件并运行Gatsby服务器后，File 节点上会存在几个新字段。这种方法有一个问题，在我们的GraphQL查询中，我们查询的是markdownRemark ，而不是博客文章的file 。

幸运的是，这并不是一个大问题，因为File 是MarkdownRemark 节点的父节点。这意味着我们可以像这样从插件中提取这些新字段:

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

如果你感到困惑，不要担心，我也是如此。我们在这里使用了GraphQL的一个内联片段。MarkdownRemark 节点的父节点可以是File ，所以我们做了... on File ，所以我们可以访问File的字段。它不像前面的例子那么干净，我们直接把字段添加到MarkdownRemark ，但它仍然是好的。

然后我们可以像这样在我们的道具中获得gitLogLatestDate :

import React from "react"

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

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

export default BlogPost

关闭了

希望你在这篇文章之后成功地设置了你的博文的修改/更新时间。我计划很快发布另一篇相关的博文，解释你如何进一步提高你的博客的SEO。如果你对这样的内容感兴趣，可以考虑订阅通讯。

avatar
文章
阅读
粉丝