如何获取Sitemap Gatsby静态文件的更新/lastmod值 [英] How to get updated / lastmod value for static files for sitemap Gatsby
问题描述
我一直在使用Gatsby，并一直在尝试为静态页面(src/pages)创建一个sitemap和lastmod值。我看到一个随机代码片段，其中有人在他的gatsby-config.js中运行以下查询，并能够获得他上次修改它们的日期。
allSitePage {
nodes {
path
context {
updated
}
}
}
我没能完成同样的壮举。
这是我到目前为止尝试过的方法。我假设他正在使用上下文管理器，并在他的js文件中设置上下文，并在每次编辑文件时手动更新上下文值。
const Updated = React.createContext('2021-11-29')
class IndexPage extends React.Component {
render() {
return (
<div>
{/* Example */}
</div>
)
}
}
/* Also tried IndexPage.contextType = Updated */
IndexPage.useContext = Updated
export default IndexPage
我已再次运行该查询，但未能传递要在graphql查询中看到的值。这是我在GraphQL操场上运行的查询。
query MyQuery {
allSitePage {
nodes {
id
context {
updated
}
}
}
}
如何在创建网站地图时获取/设置要在gatsby-config.js中使用的updated值？
推荐答案
1.使用gatsby-source-filesystem将静态页面文件添加到您的文件系统，以便您可以查询它们。
在gatsby-config.js中添加以下内容：
{
resolve: "gatsby-source-filesystem",
options: {
name: "pages",
path: "./src/pages/",
},
},
注意：此处对name属性使用的任何内容都将成为您在查询中筛选的内容。
2.将gatsby-transformer-gitinfo添加到您的项目中，以添加有关最近提交的File字段的一些GIT信息。(plugin docs)
只需在步骤1下面声明它，如下所示：
{
resolve: "gatsby-source-filesystem",
options: {
name: "pages",
path: "./src/pages/",
},
},
`gatsby-transformer-gitinfo`,
我们使用此插件是因为Gatsby的File节点中的任何modifiedTime/mtime/changeTime/ctime字段在部署时被覆盖，因为Git不记录或保留文件时间戳元数据。
3.现在我们已将所有必要数据添加到GraphQL中，可以对其进行查询以查看其外观：
query MyQuery {
site {
siteMetadata {
siteUrl
}
}
allSitePage {
nodes {
path
}
}
allFile(filter: {sourceInstanceName: {eq: "pages"}}) {
edges {
node {
fields {
gitLogLatestDate
}
name
}
}
}
}
注意：sourceInstanceName应等于您在步骤1中为options.name设置的值。
查询结果应如下所示：
{
"data": {
"site": {
"siteMetadata": {
"siteUrl": "https://www.example.com"
}
},
"allSitePage": {
"nodes": [
{
"path": "/dev-404-page/"
},
{
"path": "/404/"
},
{
"path": "/404.html"
},
{
"path": "/contact/"
},
{
"path": "/features/"
},
{
"path": "/"
},
{
"path": "/privacy/"
},
{
"path": "/terms/"
}
]
},
"allFile": {
"edges": [
{
"node": {
"fields": {
"gitLogLatestDate": "2021-12-09 23:18:29 -0600"
},
"name": "404"
}
},
{
"node": {
"fields": {
"gitLogLatestDate": "2021-12-09 23:18:29 -0600"
},
"name": "contact"
}
},
{
"node": {
"fields": {
"gitLogLatestDate": "2021-12-09 23:18:29 -0600"
},
"name": "privacy"
}
},
{
"node": {
"fields": {
"gitLogLatestDate": "2021-12-07 19:11:12 -0600"
},
"name": "index"
}
},
{
"node": {
"fields": {
"gitLogLatestDate": "2021-12-09 23:18:29 -0600"
},
"name": "terms"
}
},
{
"node": {
"fields": {
"gitLogLatestDate": "2021-12-09 23:18:29 -0600"
},
"name": "features"
}
}
]
}
},
"extensions": {}
}
4.现在让我们将它们放在gatsby-config.js中：
{
resolve: "gatsby-source-filesystem",
options: {
name: "pages",
path: "./src/pages/",
},
},
`gatsby-transformer-gitinfo`,
{
resolve: "gatsby-plugin-sitemap",
options: {
query: `{
site {
siteMetadata {
siteUrl
}
}
allSitePage {
nodes {
path
}
}
allFile(filter: {sourceInstanceName: {eq: "pages"}}) {
edges {
node {
fields {
gitLogLatestDate
}
name
}
}
}
}`,
resolvePages: ({
allSitePage: { nodes: sitePages },
allFile: { edges: pageFiles }
}) => {
return sitePages.map(page => {
const pageFile = pageFiles.find(({ node }) => {
const fileName = node.name === 'index' ? '/' : `/${node.name}/`;
return page.path === fileName;
});
return { ...page, ...pageFile?.node?.fields }
})
},
serialize: ({ path, gitLogLatestDate }) => {
return {
url: path,
lastmod: gitLogLatestDate
}
},
createLinkInHead: true,
},
}
gatsby-plugin-sitemap选项说明：
query不言自明resolvePages- 接受
query的结果，因此我们可以使用解构将allSitePage和allFile节点/边赋给变量。 - 通过
sitePages(allSitePage.nodes)映射，使用page.path查找匹配的文件name。- 如果文件
name是index，则使用/进行匹配，因为路径不是/index/，否则就用分隔符将文件name括起来。
- 如果文件
- 返回合并后的页面对象和包含GIT信息的匹配文件对象
- (从
resolvePages得到的对象数组成为插件代码中的allPages对象)
- 接受
serialize- 此函数通过
allPages映射resolvePages中的页面对象数组，因此我们可以再次使用解构来获取每个页面的path和gitLogLatestDate。 - 返回属性：
url：插件将使用查询中的siteMetaData.siteUrl，并追加此处分配的任何值以生成完整的URL。lastmod：需要有效的时间值并始终输出完整的ISO8601字符串，而不考虑传入的格式。注意：目前似乎没有办法仅通过
gatsby-plugin-sitemap将lastmod格式化为日期。这是因为gatsby-plugin-sitemap在幕后使用这个sitemap库，虽然该库的某些组件有一个lastmodDateOnly标志来砍掉时间字符串，但gatsby-plugin-sitemap并不使用它们。
- 此函数通过
createLinkInHead：链接站点标题中的站点地图索引
5.最后运行gatsby build，您应该会看到结果显示在public/sitemap/sitemap-0.xml
(似乎gatsby-plugin-sitemap最近切换到此位置，因此如果您使用的是较旧版本的插件，则可能在其他位置。)
结果应如下所示：
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://www.example.com/contact/</loc>
<lastmod>2021-12-10T05:18:29.000Z</lastmod>
</url>
<url>
<loc>https://www.example.com/features/</loc>
<lastmod>2021-12-10T05:18:29.000Z</lastmod>
</url>
<url>
<loc>https://www.example.com/</loc>
<lastmod>2021-12-08T01:11:12.000Z</lastmod>
</url>
<url>
<loc>https://www.example.com/privacy/</loc>
<lastmod>2021-12-10T05:18:29.000Z</lastmod>
</url>
<url>
<loc>https://www.example.com/terms/</loc>
<lastmod>2021-12-10T05:18:29.000Z</lastmod>
</url>
</urlset>
额外的、可能有用的详细信息-我正在使用的所有内容的版本：
"gatsby": "^4.0.0",
"gatsby-plugin-sitemap": "^5.3.0",
"gatsby-source-filesystem": "^4.3.0",
"gatsby-transformer-gitinfo": "^1.1.0",
这篇关于如何获取Sitemap Gatsby静态文件的更新/lastmod值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
