如何在Gatsby中获取当前页面URL

这项看似简单的任务使我在网站上工作时抓了几个小时。事实证明，在盖茨比（Gatsby）中获取当前页面URL并不像您想象的那样简单，但也不是那么复杂。

让我们看一些使它实现的方法。但是首先，您可能想知道为什么我们甚至想做这样的事情。

为什么您可能需要当前的URL

因此，在进入如何进行之前，让我们首先回答更大的问题：您为什么要获取当前页面的URL？我可以提供一些用例。

元标记

您想要当前URL的第一件事是文档头中的元标记：

 <link rel="“" canonical href="%7Burl%7D">
<meta property="“" og content="{url}">

社交分享

我已经在多个网站上看到了它，其中共享按钮旁边显示了指向当前页面的链接。这样的东西（在创意市场上找到）

造型

这是不太明显的，但我已经使用了几次样式组件。您可以根据某些条件呈现不同的样式。这些条件之一可以是页面路径（即网站名称之后的URL的一部分）。这是一个快速示例：

从“反应”中导入反应；
从“样式组件”中导入样式；

const布局=（{path，children}）=>（
  <styledlayout>
    {孩子们}
  </styledlayout>
）；
    
const styledlayout = styplet.main`
  背景色：$ {（{path}）=>（路径==='/'？？'#fff'：'＃000'）};
`;

导出默认布局；

在这里，我创建了一个样式的布局组件，该组件基于路径具有不同的背景颜色。

此示例列表仅说明了这个想法，绝不是全面的。我敢肯定，还有更多情况您可能想获取当前页面URL。那我们怎么得到它呢？

了解构建时间与运行时

不太快！在获得实际的方法和代码段之前，我想进行最后一站，并简要解释盖茨比的一些核心概念。

我们需要理解的第一件事是，盖茨比（Gatsby）除其他许多方面都是静态站点生成器。这意味着它会创建静态文件（通常是HTML和JavaScript）。生产网站上没有服务器，也没有数据库。所有信息（包括当前页面URL）必须从其他来源中提取或在构建时间或运行时生成，然后将其插入标记。

这使我们进入了我们需要了解的第二个重要概念：构建时间与运行时。我鼓励您阅读有关它的官方盖茨比文档，但这是我的解释。

运行时是浏览器中打开静态页面之一的时候。在这种情况下，该页面可以访问所有出色的浏览器API，包括窗口API，其中包括当前页面URL。

很容易混淆的一件事，尤其是从盖茨比（Gatsby）开始时，在开发模式下跑步的盖茨比（Gatsby）在终端中开发了为您旋转的浏览器。这意味着对窗口对象的所有引用都可以工作，并且不会触发任何错误。

当您完成开发并告诉Gatsby使用Gatsby Build Command生成最终优化资产时，就会发生构建时间。在构建时间期间，浏览器不存在。这意味着您无法使用窗口对象。

A-HA来了！片刻。如果构建与浏览器隔离，并且没有可以获取URL的服务器或数据库，那么盖茨比应该如何知道正在使用什么域名？就是这样 - 不可能！您可以获取页面的lug或路径，但是您根本无法判断基本URL是什么。您必须指定它。

这是一个非常基本的概念，但是如果您有多年的WordPress经验，可能需要一些时间才能使此信息沉入。

现在我们已经解决了这些问题，让我们跳到获取当前页面URL的实际方法。

方法1：使用窗口的HREF属性。Location对象

第一种方法不是特定于Gatsby的，并且可以在浏览器中的几乎所有JavaScript应用程序中使用。看，浏览器是这里的关键词。

假设您正在与必须包含当前页面URL的输入字段共享组件之一构建那些共享组件之一。您可能会这样做：

从“反应”中导入反应；

const foo =（）=> {
  const url = typeof窗口！=='undefined'？ window.location.href：'';

  返回 （
    <input type="“" text readonly value="{url}">
  ）；
};

导出默认foo;

如果存在窗口对象，我们将获得窗口中的位置对象的HREF属性。如果没有，我们将URL变量为空字符串值。

如果我们在没有检查的情况下这样做并这样写：

 const url = window.location.href;

…构建将失败，错误看起来像这样：

失败的建筑静态HTML页面-2.431s
错误＃95312 
在服务器端渲染过程中，“窗口”不可用。

正如我之前提到的，这是因为在构建时间内不存在浏览器。这是这种方法的巨大缺点。如果您需要在页面的静态版本上存在URL，则不能使用它。

但是也有很大的优势！您可以从嵌套在其他组件内的组件中访问窗口对象。换句话说，您不必从父组件中钻出URL道具。

方法2：从道具获取位置数据的HREF属性

盖茨比（Gatsby）中的每个页面和模板组件都有一个位置道具，其中包含有关当前页面的信息。但是，与窗口不同，请在所有页面上都存在此道具。

引用盖茨比文档：

很棒的是，您可以期望每页上都可以使用位置道具。

但是这里可能会有一个捕捉。如果您是盖茨比（Gatsby）的新手，则将其将其记录到控制台上，并注意它看起来与窗口几乎相同。location（但不是同一件事），并且还包含HREF属性。怎么可能？好吧，不是。 HREF道具仅在运行时才存在。

最糟糕的是，直接使用locustance.href，而无需先检查它是否存在，在构建时间期间不会触发错误。

所有这些意味着我们可以依靠位置道具在每个页面上，但不能指望它在构建时间期间具有HREF属性。请注意，不要将此方法用于需要在页面的静态版本上标记的关键情况。

因此，让我们使用以下方法重写上一个示例：

从“反应”中导入反应；

const page =（{location}）=> {
  const url = location.href？ location.href：'';

  返回 （
    <input type="“" text readonly value="{url}">
  ）；
};

导出默认页面;

这必须是顶级页面或模板组件。您不能仅在任何地方导入它并期望它起作用。位置道具将不确定。

如您所见，此方法与上一个方法非常相似。将其用于仅在运行时需要URL的情况。

但是，如果您需要在静态页面的标记中包含完整的URL怎么办？让我们继续使用第三种方法。

方法3：从位置数据生成带有路径名属性的当前页面URL

正如我们在本文开头讨论的那样，如果您需要在静态页面中包含完整的URL，则必须在某个地方指定网站的基本URL，并以某种方式在构建时间内获取。我会告诉你如何做。

例如，我将创建一个标签。在页面登录浏览器之前，将完整的页面url放入其中很重要。否则，搜索引擎和站点刮板将看到空的HREF属性，这是不可接受的。

这是计划：

1. 将siteurl属性添加到gatsby-config.js中的sitemetadata中。
2. 创建一个静态查询钩以在任何组件中检索Sitemetadata。
3. 使用该钩获取SiteUrl。
4. 将其与页面的路径相结合，然后将其添加到标记中。

让我们打破每个步伐。

将siteurl属性添加到gatsby-config.js中的sitemetadata

盖茨比（Gatsby）有一个称为gatsby-config.js的配置文件，该文件可用于存储SiteMetAdata对象中有关该站点的全局信息。这对我们有用，因此我们将在该对象中添加SiteUrl：

 Module.exports = {
  sitemetadata：{
    标题：“ dmitry Mayorov”，
    描述：“ Dmitry是建立凉爽站点的前端开发人员。”
    作者：'@dmtrmrv'，
    siteurl：'https：//dmtrmrv.com'，
  }
};

创建一个静态查询钩以检索任何组件中的sitemetadata

接下来，我们需要一种在组件中使用sitemetadata的方法。幸运的是，盖茨比（Gatsby）拥有静态API，可以使我们这样做。您可以直接在组件中使用UsestaticQuery挂钩，但是我更喜欢为我在网站上使用的每个静态查询创建一个单独的文件。这使得代码易于阅读。

为此，在您网站的SRC文件夹内的挂钩文件夹中创建一个名为use-site-metadata.js的文件，然后将以下代码复制并粘贴到其中。

从'gatsby'导入{usestaticquery，graphQl};

const usesitemetadata =（）=> {
  const {site} = usestaticquery（
  GraphQl`
    询问 {
    地点 {
      sitemetadata {
      标题
      描述
      作者
      Siteurl
      }
    }
    }
  `，，
  ）；
  返回站点。
};

导出默认用途intemetadata;

确保检查所有属性（例如标题，描述，作者和您在SiteMetAdata对象中的任何其他属性）都出现在GraphQl查询中。

用那个挂钩获得SiteUrl

这是有趣的部分：我们获取网站URL并在组件中使用。

从“反应”中导入反应；
从“反应螺旋中心”进口头盔；
导入从'../ hooks/use-site-metadata'中使用initemetadata';

const page =（{location}）=> {
  const {siteurl} = usesitemetadata（）;
  返回 （
    
      <link rel="“" canonical href="%7B%60%24">
    
  ）；
};

导出默认页面;

让我们分解。

在第3行上，我们将创建到组件中创建的usesitemetadata挂钩导入。

导入从'../ hooks/use-site-metadata'中使用initemetadata';

然后，在第6行中，我们破坏了来自该数据的数据，创建了SiteUrl变量。现在，我们拥有在构建和运行时可用于我们的站点URL。甜的！

 const {siteurl} = usesitemetadata（）;

将站点URL与页面的路径相结合，然后将其添加到标记中

现在，还记得第二种方法中的位置道具吗？最棒的是，它在构建和运行时都包含PathName属性。看看它要去哪里？我们要做的就是结合两个：

 `$ {siteUrl} $ {location.pathname}`

这可能是最强大的解决方案，它将在浏览器和生产构建过程中起作用。我个人最常使用此方法。

我在此示例中使用了React头盔。如果您还没有听说过，它是在React应用程序中渲染头部部分的工具。达雷尔·霍夫曼（Darrell Hoffman）在CSS-Tricks上写了一个很好的解释。

方法4：在服务器端生成当前页面URL

什么？！您只是说服务器吗？ Gatsby不是静态站点生成器吗？是的，我确实说了服务器。但这不是传统意义上的服务器。

众所周知，盖茨比在构建时间内生成（IE服务器渲染）静态页面。这就是名字的来源。很棒的是，我们可以使用盖茨比已经提供的多个API将其连接到该过程。

最感兴趣的API被称为Onrenderbody。在大多数情况下，它用于将自定义脚本和样式注入页面。但是，令人兴奋的是（和其他服务器端API），它具有路径名参数。这意味着我们可以在“服务器上”生成当前页面URL。

我个人不会使用此方法将元标记添加到头部部分，因为我们查看的第三种方法更适合于此。但是为了举例来说，让我向您展示如何使用OnRenderboby添加到网站的规范链接。

要使用任何服务器端API，您需要在位于网站的根文件夹中的名为gatsby-ssr.js的文件中编写代码。要将链接添加到头部部分，您将写下类似的内容：

 const react = require（'react'）;
const config = require（'./ gatsby-config'）;

exports.onrenderbody =（{pathName，setheadComponents}）=> {
  setheadComponents（[
    在
  ）;
};

让我们一点一点地打破此代码。

我们需要在第1行上进行反应。有必要使JSX语法起作用。然后，在第2行上，我们将数据从gatsby-config.js文件提取到配置变量中。

接下来，我们将其在Onrenderbody内部调用SetheadComponents方法，并将其传递到一个组件中，以添加到站点标题。在我们的情况下，这只是一个链接标签。对于链接本身的HREF属性，我们将siteUrl和路径名组合在一起：

 `$ {config.sitemetadata.siteurl} $ {pathName}`

就像我之前说的那样，这可能不是在头部添加标签的首选方法，但是很高兴知道盖茨比具有服务器端API，可以在服务器渲染阶段为任何给定页面生成URL。

如果您想了解有关使用Gatsby的服务器端渲染的更多信息，我建议您阅读他们的官方文档。

就是这样！

如您所见，在盖茨比（Gatsby）中获取当前页面的URL不是很复杂，尤其是一旦您了解了核心概念并了解可用的工具。如果您知道其他方法，请在评论中告诉我！

资源

• JavaScript窗口接口
• 盖茨比构建过程的概述
• 来自道具的位置数据
• 盖茨比服务器渲染API
• 反应头盔

以上是如何在Gatsby中获取当前页面URL的详细内容。更多信息请关注PHP中文网其他相关文章！