首页
学习
活动
专区
工具
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介绍

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

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

相关·内容

如何利用机器学习和Gatsby.js创建假新闻网站​

使用npm,您可以将Gatsby.js安装到本地机器上。 接下来最好安装git,这是一种非常强大且流行的版本控制系统。当您使用Gatsby.js站点模板时,Gatsby使用Git的一些功能。...(1)使用gatsby new [yoursite -name]完全从头开始, (2)使用gatsby new [yoursite -name] [starter-git-url]的启动模板, (3)使用我发布在...gatsby-node.js 此文件用于实现api。这些api可以使用GraphQL从数据层中获取数据。在处理程序化页面生成时,我们将更深入地研究这个文件的内容。...gatsby-ssr.js 此文件用于实现服务器端选然的api。我们不会在这个项目中使用。 布局设置 网站布局是一个非常重要的方面。...) }) } 在gatsby-node.js中,为每个markdown文件创建数据节点,然后所有这些节点将与页面模板一起使用,以创建实际的页面。

4.5K60

一杯茶的时间,上手 Gatsby 搭建个人博客

Gatsby 项目结构 建议使用 Starter 修改着理解 Gatsby,我用的是 Gatsby + Netlify CMS Starter[11]。...这里面查询语句虽然写的是字符串,但其实这些查询语句不会出现在最终的代码中,Gatsby 会先对其抽取[17]。 个人其实不太喜欢魔法,因为会增加初学者的理解难度。...Gatsby 如何生成特定页面 一般来说,在 /src/pages/ 目录下的组件会自动生成相应路径的页面,但如果是其它类型的文件就不会了。...在 /gatsby-node.js 中配置 Gatsby Node APIs,如果项目是基于 starter 的话你很可能会发现里面已经有相应的配置。...这里我们把自定义的路径存到 fields.slug 中。 通过 /gatsby-node.js 中的 exports.onCreateNode 钩子我们可以在生成节点的时候进行拦截处理。

3.2K20
  • Gatsby 创建一个博客

    您通常希望使用 gatsby develop 来启动本地开发服务器,以验证我们在步骤中所完成的功能。 添加必要的插件 Gatsby 支持使用丰富的插件,很多非常有用的插件都是为了完成普通任务而编写的。...对于这个特定的博客文章,我们想要一个单页面应用的感觉(没有页面重载),以及在 head 标签中动态更改 title标签的能力。...这个API写在在 gatsby-node.js文件中,在这个文件中发现的每一个导出都将由 Gatsby 分析。Gatsby详细地介绍了它的Node API规范。...看看我们,我们在这一点上已经是一个专业级的 Gatsby 使用者了!...添加一个 tag 列表和 tag 查询页 提示: gatsby-node.js 文件中的 createPages API 在这里很有用,还有之前的 frontmatter 在特定的博客文章之间添加导航(

    2.5K30

    Laravel 7 新特性-路由的趟坑之路(自定义键名以及作用域)

    prefer-dist laravel/laravel blog 生成用户认证脚手架 composer require laravel/ui npm install && npm run dev 我们使用内置服务...我们的以前的 URL 可能是如下这样: http://laravel7.test/posts/posts/1 我们是通过主键 ID 来进行查找的。...当然我们在以前的版本可以更改这个,我们需要在 模型中重写一个方法 getRouteKeyName 接下来我们看下 Laravel 7 以前是怎么实现的 首先。...定义一个路由 Route::get('posts/{post}', function (\App\Post $post) { dd($post); }); 接下来,我们重写 Post 模型文件...public function getRouteKeyName() { return 'slug'; } 接下来我们就可以使用 slug 来进行查询了 比如下面的 URL http://laravel7

    2.5K10

    史上最详细的WordPress的自定义文章类型指南(1)

    使用其他的主题朋友也可以参考一下。 插件创建Custom Post Type 插件和主题是相对独立的,所以使用插件来进行新建Custom Post Type的方式就不会依赖于主题了。...awsome_app=appppppppppp ,这种是添加了key-value查询参数的动态URL,这个地址就不会404。...这是因为在WordPress中启用了URL规则重写(rewrite)功能,会自动把和Post相关的动态URL改写为伪静态URL,这也会影响到自定义的Post Type。...WordPress 中的伪静态规则会被存储到数据库,新的文章类型注册之后原有的伪静态并不会自动更新,也就无法识别这个URL,所以就404了。...正如官网上的提示,如果你在WordPress中启用了URL规则重写,而且在创建自定义Post Type的时候没有把参数rewrite设置为false,那么在注册之后,还需要一些额外步骤来进行伪静态规则的刷新

    4.3K20

    3分钟短文:Laravel slug,让你的url地址更“好记”

    而友好的url地址更是能让人一目了然,增加用户的好感。同时对于爬虫也是好的示例,搜索引擎可以友好地展开工作了。 [img] 本文就来讲讲,如何在laravel中构造友好的url路由。 啥是slug?...我们在之前的章节已经使用laravel Route功能,重新构造了url,所以访问起来像是连贯的: http://example.com/events/42 直接使用位置参数绑定的方式传递。...如果使用如下方式,效果要友好的多: http://example.com/events/laravel-hacking-and-coffee 这种基于字符串位置参数绑定的URL方式,被称为 slug。...而slug查询,是基于字符串的,如果要使用slug此功能,需要改写默认的列名。...在模型文件内手动重写如下方法: public function getRouteKeyName() { return 'slug'; } 返回字符串,就是查询所依据的“字段名”。

    3.5K11

    Next.js + 云开发Webify 打造绝佳网站

    之前使用 Next.js + strapi 做了一个简单博客站点也顺道写了一篇 Next.js 简明教程,之后 Next 本身一直在迅猛发展。...支持版本 Github、Gitlab、Gitee 服务商,听说即将支持 Coding: Vue.js (vue-cli) React.js (create-react-app) Hexo Gatsby.js...如果你的博客文章,直接使用 md,git 管理,看到这里就OK了,git 提交,Webify自动会重新部署你的站点。...上述这种按需调用的服务,使用云函数最合适了,你不需要一个一直开机的虚拟机,你只需要在更新文章时候才需要唤起云函数就好,随用随停,成本低廉。...: `/p/${data.book.slug || data.book.uuid}/${               data.slug || data.uuid             }`,

    99120

    学习gatsby,从这里开始!

    不中断:网站更新也只是文件覆盖操作,不会因更新而中断服务。 速度快:网站所需数据在编译期就获取、压缩、优化完成,无需在打开网页时再花费时间从第三方获取数据,所以网站的访问速度非常快。...[data-layer-with-nodes] --- 2、Gatsby 项目文件结构 详情,看这里! --- 3、官方demo 展示 Gatsby 的各种功能怎么使用。详情,看这里!...--- 三、安装 Gatsby 并新建网站 Gatsby 是在 Node.js 的基础上建立,使用 Gatsby 之前必须先安装 Node.js 且版本 ≥ 12.13。...使用 Gatsby CLI 工具,三句命令就可以新建一个静态网站。详情步骤,看这里! --- 四、怎么新增网站页面? 浏览器打开的URL是怎么跟项目中的代码页面 (js文件) 对应起来的?...这种 URL 与 代码文件 之间的对应关系就称之为页面路由。那么Gatsby 中怎么新建代码页面?其页面路由又有哪些规则? 1、新建页面及其路由 详细步骤,看这里!

    2.2K20

    如何防御Java中的SQL注入

    攻击者想方设法用表单字段或URL参数向应用注入额外的SQL代码进而获得在目标数据库上执行未经授权的操作的能力。SQL注入的影响实现SQL注入的攻击者可以更改目标数据库中的数据。...= '"      + slug       + "'";代码通过关联用户以某种方式输入的值(可能是URL参数)来组装SQL查询。...假设这个Web应用的基URL是https://example.com/posts如果我们将my-first-java-project添加到URL中,它变为example.com/posts/my-first-java-projec...这包括使用正则表达式来验证某些类型的信息、验证数值参数是否符合预期范围以及检查参数是否符合预期数据类型。建议对所有类型的用户输入进行URL参数、表单字段、导入文件的内容等验证。...这里推荐使用只有读取权限的连接字符串;即便攻击者能够注入未经授权的代码,至少无法更改或删除数据。4.利用Java持久化防御SQL注入的另一种方法是使用JPQL (Java持久性查询语言)。

    65630

    前端路由的原理及应用

    使用浏览器访问网页时,如果网址URL中带有hash,页面就会定位到id(或者name)与hash值一样的元素的位置; hash还有一个另一个特点,hash的改变不会使页面重新加载; 浏览器不会把hash...主要有两种方法: 1.设置a标签的href属性为一个hash值,当点击a标签时会在当前的url后面增加上hash值,同时触发'hashchange'事件;2.直接在js中对location.hash进行更改...不过用了 history API 的实现,单页路由的 url不会多出一个#,变得更加美观。...它使用浏览器中的 History API 处理 URL,创建一个像example.com/some/path这样真实的 URL createHashHistory:使用 URL 中的 hash(#)部分去创建形如...下面来总结一下: hash方式:js通过hashChange事件来监听url的改变,浏览器兼容性较好,但是IE7及以下需要使用轮询方式; history API:url看起来像普通网站那样,以"/"分割

    2.3K20
    领券