首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Gatsby使用gatsby-node.js重写Slug不会更改url

Gatsby是一个基于React的静态网站生成器,它使用GraphQL查询语言来获取数据并生成静态页面。gatsby-node.js是Gatsby的一个核心文件,用于自定义Gatsby构建过程中的节点创建、页面生成和路由设置等操作。

在Gatsby中,slug是指用于标识页面的URL路径部分。如果你想通过更改slug来修改页面的URL,可以通过在gatsby-node.js中编写自定义的slug生成逻辑来实现。

以下是一个示例的gatsby-node.js文件,展示了如何使用gatsby-node.js重写slug并更改URL:

代码语言:txt
复制
const { createFilePath } = require('gatsby-source-filesystem');
const path = require('path');

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions;
  if (node.internal.type === 'MarkdownRemark') {
    const slug = createFilePath({ node, getNode, basePath: 'pages' });
    createNodeField({
      node,
      name: 'slug',
      value: slug,
    });
  }
};

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `);

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve('./src/templates/blog-post.js'),
      context: {
        slug: node.fields.slug,
      },
    });
  });
};

上述代码中,onCreateNode函数用于在MarkdownRemark节点上创建一个名为slug的字段,并将其值设置为通过createFilePath函数生成的路径。createPages函数则用于根据生成的slug创建页面。

这样,当你在Markdown文件的frontmatter中设置slug时,Gatsby会根据该slug生成对应的页面,并将其URL路径设置为对应的slug值。

Gatsby的优势在于其强大的静态网站生成能力和丰富的生态系统。它适用于构建各种类型的静态网站,包括博客、企业网站、电子商务网站等。对于Gatsby的更多了解和使用,你可以参考腾讯云的云开发文档中关于Gatsby的介绍:Gatsby介绍

请注意,以上答案仅供参考,具体的实现方式可能因项目需求和个人偏好而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券