如何在 Gatsby URL 中输入 post 日期？

Question

所有 Gatsby starter demos 的路径都像 /gatsby-starter-blog/hi-folks/

如何使用 /2015-05-28/hi-folks/ 或 /2015/hi-folks/ 设置年份。

谢谢！

Answer 1

两个选项：

1) 只需将博客 post 放入您希望 url 命名的目录中，在本例中 /2015-05-28/hi-folks/index.md。 2) 您可以通过从 gatsby-node.js 中导出一个名为 rewritePath 的函数以编程方式设置路径。为每个页面调用它，其中包含页面来自的文件的文件系统数据+页面的元数据。所以说你想在你的 markdown 的 frontmatter 中设置 post 的日期，并让每个 post 成为一个简单的 markdown 文件，其路径如 /a-great-blog-post.md

所以要做你想做的，添加到你的 gatsby-node.js 像这样的东西：

import moment from 'moment'

exports.rewritePath = (parsedFilePath, metadata) => {
  if (parsedFilePath.ext === "md") {
    return `/${moment(metadata.createdAt).format('YYYY')}/${parsedFilePath.name}/`
  }
}

Answer 2

Gatsby 不再支持

rewritePath。这是一个已确认在 Gatsby 2.3 中有效的解决方案，

const m = moment(node.frontmatter.date)
const value = `${m.format('YYYY')}/${m.format('MM')}/${slug}`
createNodeField({ node, name: 'slug', value })

Answer 3

在我的 gatsby-node.js 文件中，我添加了一个 slug 生成器和一个模板解析器。

在 src/posts 中，我在该文件夹中添加了一个文件夹 2020 我创建了使 slug 地址路径如此 my-blog-post 的文件夹，在这些文件夹中，我有一个 index.md 文件。

现在我有 URL 看起来像 http://www.example.com/2020/my-blog-post/。

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */

const { createFilePath } = require(`gatsby-source-filesystem`);

// Generates pages for the blog posts
exports.createPages = async function ({ actions, graphql }) {
    const { data } = await graphql(`
        query {
            allMarkdownRemark {
                edges {
                    node {
                        fields {
                            slug
                        }
                    }
                }
            }
        }
    `);
    data.allMarkdownRemark.edges.forEach((edge) => {
        const slug = edge.node.fields.slug;
        actions.createPage({
            path: slug,
            component: require.resolve(`./src/templates/blog-post.js`),
            context: { slug: slug },
        });
    });
};

// Adds url slugs to the graph data response
exports.onCreateNode = ({ node, getNode, actions }) => {
    const { createNodeField } = actions;
    if (node.internal.type === `MarkdownRemark`) {
        const slug = createFilePath({ node, getNode, basePath: `posts` });
        createNodeField({
            node,
            name: `slug`,
            value: slug,
        });
    }
};

在我的 src/templates/blog-post.js 文件中我有：

import React from 'react';
import { graphql } from 'gatsby';
import Layout from '../components/layout';

export default function BlogPost({ data }) {
    const post = data.markdownRemark;
    const tags = (post.frontmatter.tags || []).map((tag, i) => {
        return <li key={i}>#{tag}</li>;
    });

    return (
        <Layout>
            <article className="post">
                <header>
                    <h1>{post.frontmatter.title}</h1>
                    <div className="meta">
                        <time>{post.frontmatter.date}</time>
                        <ul>{tags}</ul>
                    </div>
                </header>
                <section dangerouslySetInnerHTML={{ __html: post.html }} />
            </article>
        </Layout>
    );
}

export const query = graphql`
    query($slug: String!) {
        markdownRemark(fields: { slug: { eq: $slug } }) {
            html
            frontmatter {
                title
                date(formatString: "DD-MMMM-YYYY")
                tags
            }
        }
    }
`;

我的 markdown 文件然后像这样使用 frontmatter 数据：

---
title: Post title here
date: "2020-05-25T14:23:23Z"
description: "A small intro here"
tags: ["tag1", "tag2"]
---

Main post content would be here...

如何在 Gatsby URL 中输入 post 日期？

How to put post date in Gatsby URL?

reactjs

gatsby