所有Gatsby 入门演示都有类似的路径/gatsby-starter-blog/hi-folks/
我如何设置它/2015-05-28/hi-folks/
或仅使用/2015/hi-folks/
.
谢谢!
所有Gatsby 入门演示都有类似的路径/gatsby-starter-blog/hi-folks/
我如何设置它/2015-05-28/hi-folks/
或仅使用/2015/hi-folks/
.
谢谢!
两种选择:
1)在这种情况下,只需将博客文章放在您希望 url 命名的目录中/2015-05-28/hi-folks/index.md
。2) 您可以通过从gatsby-node.js
被调用的rewritePath
. 为每个页面调用它,其中包含页面来自的文件的文件系统数据 + 页面的元数据。因此,假设您想在 Markdown 的 frontmatter 中设置帖子的日期,并使每个帖子成为一个简单的 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}/`
}
}
rewritePath
Gatsby 不再支持。这是一个已确认适用于 Gatsby 2.3 的解决方案,
const m = moment(node.frontmatter.date)
const value = `${m.format('YYYY')}/${m.format('MM')}/${slug}`
createNodeField({ node, name: 'slug', value })
在我的gatsby-node.js
文件中,我添加了一个 slug 生成器和一个模板解析器。
在里面,我在该文件夹中src/posts
添加了一个文件夹2020
,我创建了文件夹,my-blog-post
这些文件夹使 slug 地址路径像这样,在这些文件夹中,我有一个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
}
}
}
`;
我的降价文件然后使用 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...