它是标识特定内容项的片段，我们使用它来构建最终
Posted: Tue Dec 10, 2024 5:44 am
在本文中，我将解释 URL 段是什么以及它在网站实现中的典型用法。我还将介绍与其更改相关的风险以及如何通过保留 URL 段历史记录来减轻这些风险。本文中的代码示例是为Next.js构建的，但处理重定向的过程可以类似地应用于任何网站框架。
URL 段是什么？
简单来说，URL slug 是 URL 的最后一部分。 URL。
假设我们有一系列博客文章。它们始终可以通过以下 URL 访问h
博客文章标题 网址标记 网址
如何重新构建你的网站平台，避免风险极高的“大爆炸”式发布 重新平台化现有站点
如何在 Next.js 中验证和处理 webhook 通知 在 next-js 中处理 webhook
网站实施中的 URL 构建
URL 的第一部分 ( 站点实现定义。例如，您知道博客始终显示在 下/blog，产品显示在 下/store/product。URL 是站点定义的路径和内容项中定义的 URL 段的组合：
在 Next.js 中，我们通常使用与 URL 对应的路径上的页面组件来定义 URL /src/pages/blog/[slug].tsx：。
为什么 URL 段更改会带来问题？
那么当 URL 段发生变化时可能发生的最糟糕的事情是什么？
首先，URL 段通常不会改变。内容编辑者在创建内容项时定义 URL 段；页面会被搜索引擎编入索引，获得分数，并为您的网站带来流量。但是，有时编辑者有正当理由更改 URL 段。
如果编辑者只是更改了页面的 URL 段，那么该页面 德国手机号码数据库 将不复存在其原始 URL，并会带来一系列后果，例如自然流量的损失、人们收到 404 错误等等。
那么我们如何才能缓解这种情况呢？有三个步骤：
保留 URL 段更改的历史记录。
在站点实施中处理当前和旧的 URL 段。
将旧的 URL 段重定向到新的 URL 段并始终显示正确的内容。
保留 URL 段更改的历史记录
作为处理任何重定向的先决条件，我们需要了解当前和历史的 URL 段：
博客文章 当前 URL 段 以前使用过的 URL 段
如何在 Next.js 中验证和处理 webhook 通知 在 next-js 中处理 webhook next-js-webhooks
next-webhooks
...
已发布的内容项仅包含当前的 URL 段。对于历史记录，我们将使用Kontent.ai 自定义元素库中列出的名为“URL 段历史记录”的额外自定义元素。自定义元素会监视每个项目的已发布 URL 段，如果发生更改，它会自动保存旧 URL 段。
要使用自定义元素，我们首先需要部署它。您可以使用任何您喜欢的主机，只要它可以托管 HTML 和 JavaScript 文件即可。最简单的选择可能是Netlify，因为存储库包含一个按钮，允许您单击一下即可分叉并部署到那里。
部署代码后，请记下其 URL。
Kontent.ai
将自定义元素添加到您的内容类型并按以下方式填充字段：
托管代码 URL（HTTPS）
这是您部署的自定义元素分支的 URL。
允许自定义元素读取特定元素的值
选择原始 URL slug 字段。
参数 {JSON}
使用以下 JSON 并将占位符替换为您的 URL slug 元素的代号：{"urlSlugElementCodename": "url_slug_element_codename_placeholder"}
当您打开使用此内容类型的内容项时，根据其工作流步骤，您将看到以下内容：
Kontent.ai
自定义元素将为我们处理 URL 段历史记录，并在 Delivery API 响应中将数据作为字符串数组传递：
...
在网站实施中处理重定向
现在我们在 API 响应中有了当前和历史 URL 段，我们可以在代码中实现重定向。我们将重点介绍 Next.js，但正如我之前提到的，您可以将类似的方法应用于任何其他框架。
在Next.js中，动态页面使用两种特定方法来处理页面生成：
getStaticPaths
用于获取 Next.js 应生成页面（或重定向）的所有路径。
getStaticProps
用于构建最终页面。它会针对我们在 中提供的每个路径进行调用getStaticPaths。
在 中getStaticPaths，我们需要提供所有路径，包括当前路径和以前的路径。所有其他路径都将返回 404。我们可以通过以下方式获取两种类型的 URL 段：
.depthParameter(0)
.toPromise()
注意：此示例使用Kontent.ai 模型生成器自动生成的模型。
您会发现，在 中getStaticPaths，我们拥有有关哪个 URL 段是当前的以及哪个 URL 段应重定向（url_slug_history）的信息。 Next.js 的问题在于，它只允许我们返回页面路径中定义的变量的值。假设我们正在处理在 处呈现的博客文章https://kontent.ai/blog/{blog post URL slug}。页面组件将位于 处/pages/blog/[slug].tsx，因此我们可以返回的唯一参数是slug。
为什么这是个问题？稍后，在 中getStaticProps，我们只获取 URL slug，而没有任何其他信息，因此我们必须对每个博客文章向 Kontent.ai API 进行一次额外查询，以确定我们使用的是当前 slug 还是历史 slug。这将决定我们是否应该呈现页面或发出重定向。如果您要处理数千篇博客文章，那么从性能角度来看，这是不可接受的。
社区仍在等待 Next.js 为上述两种方法之间的数据传输提供更好的支持，但在此之前，我们可以使用建议的解决方法（使用缓存文件）getStaticPaths 。它允许我们通过进程间共享的物理文件在和之间共享更多数据getStaticProps。
URL 段是什么？
简单来说，URL slug 是 URL 的最后一部分。 URL。
假设我们有一系列博客文章。它们始终可以通过以下 URL 访问h
博客文章标题 网址标记 网址
如何重新构建你的网站平台，避免风险极高的“大爆炸”式发布 重新平台化现有站点
如何在 Next.js 中验证和处理 webhook 通知 在 next-js 中处理 webhook
网站实施中的 URL 构建
URL 的第一部分 ( 站点实现定义。例如，您知道博客始终显示在 下/blog，产品显示在 下/store/product。URL 是站点定义的路径和内容项中定义的 URL 段的组合：
在 Next.js 中，我们通常使用与 URL 对应的路径上的页面组件来定义 URL /src/pages/blog/[slug].tsx：。
为什么 URL 段更改会带来问题？
那么当 URL 段发生变化时可能发生的最糟糕的事情是什么？
首先，URL 段通常不会改变。内容编辑者在创建内容项时定义 URL 段；页面会被搜索引擎编入索引，获得分数，并为您的网站带来流量。但是，有时编辑者有正当理由更改 URL 段。
如果编辑者只是更改了页面的 URL 段，那么该页面 德国手机号码数据库 将不复存在其原始 URL，并会带来一系列后果，例如自然流量的损失、人们收到 404 错误等等。
那么我们如何才能缓解这种情况呢？有三个步骤：
保留 URL 段更改的历史记录。
在站点实施中处理当前和旧的 URL 段。
将旧的 URL 段重定向到新的 URL 段并始终显示正确的内容。
保留 URL 段更改的历史记录
作为处理任何重定向的先决条件，我们需要了解当前和历史的 URL 段：
博客文章 当前 URL 段 以前使用过的 URL 段
如何在 Next.js 中验证和处理 webhook 通知 在 next-js 中处理 webhook next-js-webhooks
next-webhooks
...
已发布的内容项仅包含当前的 URL 段。对于历史记录，我们将使用Kontent.ai 自定义元素库中列出的名为“URL 段历史记录”的额外自定义元素。自定义元素会监视每个项目的已发布 URL 段，如果发生更改，它会自动保存旧 URL 段。
要使用自定义元素，我们首先需要部署它。您可以使用任何您喜欢的主机，只要它可以托管 HTML 和 JavaScript 文件即可。最简单的选择可能是Netlify，因为存储库包含一个按钮，允许您单击一下即可分叉并部署到那里。
部署代码后，请记下其 URL。
Kontent.ai
将自定义元素添加到您的内容类型并按以下方式填充字段：
托管代码 URL（HTTPS）
这是您部署的自定义元素分支的 URL。
允许自定义元素读取特定元素的值
选择原始 URL slug 字段。
参数 {JSON}
使用以下 JSON 并将占位符替换为您的 URL slug 元素的代号：{"urlSlugElementCodename": "url_slug_element_codename_placeholder"}
当您打开使用此内容类型的内容项时，根据其工作流步骤，您将看到以下内容：
Kontent.ai
自定义元素将为我们处理 URL 段历史记录，并在 Delivery API 响应中将数据作为字符串数组传递：
...
在网站实施中处理重定向
现在我们在 API 响应中有了当前和历史 URL 段，我们可以在代码中实现重定向。我们将重点介绍 Next.js，但正如我之前提到的，您可以将类似的方法应用于任何其他框架。
在Next.js中，动态页面使用两种特定方法来处理页面生成：
getStaticPaths
用于获取 Next.js 应生成页面（或重定向）的所有路径。
getStaticProps
用于构建最终页面。它会针对我们在 中提供的每个路径进行调用getStaticPaths。
在 中getStaticPaths，我们需要提供所有路径，包括当前路径和以前的路径。所有其他路径都将返回 404。我们可以通过以下方式获取两种类型的 URL 段：
.depthParameter(0)
.toPromise()
注意：此示例使用Kontent.ai 模型生成器自动生成的模型。
您会发现，在 中getStaticPaths，我们拥有有关哪个 URL 段是当前的以及哪个 URL 段应重定向（url_slug_history）的信息。 Next.js 的问题在于，它只允许我们返回页面路径中定义的变量的值。假设我们正在处理在 处呈现的博客文章https://kontent.ai/blog/{blog post URL slug}。页面组件将位于 处/pages/blog/[slug].tsx，因此我们可以返回的唯一参数是slug。
为什么这是个问题？稍后，在 中getStaticProps，我们只获取 URL slug，而没有任何其他信息，因此我们必须对每个博客文章向 Kontent.ai API 进行一次额外查询，以确定我们使用的是当前 slug 还是历史 slug。这将决定我们是否应该呈现页面或发出重定向。如果您要处理数千篇博客文章，那么从性能角度来看，这是不可接受的。
社区仍在等待 Next.js 为上述两种方法之间的数据传输提供更好的支持，但在此之前，我们可以使用建议的解决方法（使用缓存文件）getStaticPaths 。它允许我们通过进程间共享的物理文件在和之间共享更多数据getStaticProps。