這項看似簡單的任務使我在網(wǎng)站上工作時抓了幾個小時。事實證明，在蓋茨比（Gatsby）中獲取當前頁面URL并不像您想象的那樣簡單，但也不是那么復雜。

讓我們看一些使它實現(xiàn)的方法。但是首先，您可能想知道為什么我們甚至想做這樣的事情。

為什么您可能需要當前的URL

因此，在進入如何進行之前，讓我們首先回答更大的問題：您為什么要獲取當前頁面的URL？我可以提供一些用例。

元標記

您想要當前URL的第一件事是文檔頭中的元標記：

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

社交分享

我已經(jīng)在多個網(wǎng)站上看到了它，其中共享按鈕旁邊顯示了指向當前頁面的鏈接。這樣的東西（在創(chuàng)意市場上找到）

造型

這是不太明顯的，但我已經(jīng)使用了幾次樣式組件。您可以根據(jù)某些條件呈現(xiàn)不同的樣式。這些條件之一可以是頁面路徑（即網(wǎng)站名稱之后的URL的一部分）。這是一個快速示例：

從“反應”中導入反應；
從“樣式組件”中導入樣式；

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

導出默認布局；

在這里，我創(chuàng)建了一個樣式的布局組件，該組件基于路徑具有不同的背景顏色。

此示例列表僅說明了這個想法，絕不是全面的。我敢肯定，還有更多情況您可能想獲取當前頁面URL。那我們怎么得到它呢？

了解構(gòu)建時間與運行時

不太快！在獲得實際的方法和代碼段之前，我想進行最后一站，并簡要解釋蓋茨比的一些核心概念。

我們需要理解的第一件事是，蓋茨比（Gatsby）除其他許多方面都是靜態(tài)站點生成器。這意味著它會創(chuàng)建靜態(tài)文件（通常是HTML和JavaScript）。生產(chǎn)網(wǎng)站上沒有服務器，也沒有數(shù)據(jù)庫。所有信息（包括當前頁面URL）必須從其他來源中提取或在構(gòu)建時間或運行時生成，然后將其插入標記。

這使我們進入了我們需要了解的第二個重要概念：構(gòu)建時間與運行時。我鼓勵您閱讀有關(guān)它的官方蓋茨比文檔，但這是我的解釋。

運行時是瀏覽器中打開靜態(tài)頁面之一的時候。在這種情況下，該頁面可以訪問所有出色的瀏覽器API，包括窗口API，其中包括當前頁面URL。

很容易混淆的一件事，尤其是從蓋茨比（Gatsby）開始時，在開發(fā)模式下跑步的蓋茨比（Gatsby）在終端中開發(fā)了為您旋轉(zhuǎn)的瀏覽器。這意味著對窗口對象的所有引用都可以工作，并且不會觸發(fā)任何錯誤。

當您完成開發(fā)并告訴Gatsby使用Gatsby Build Command生成最終優(yōu)化資產(chǎn)時，就會發(fā)生構(gòu)建時間。在構(gòu)建時間期間，瀏覽器不存在。這意味著您無法使用窗口對象。

A-HA來了！片刻。如果構(gòu)建與瀏覽器隔離，并且沒有可以獲取URL的服務器或數(shù)據(jù)庫，那么蓋茨比應該如何知道正在使用什么域名？就是這樣 - 不可能！您可以獲取頁面的lug或路徑，但是您根本無法判斷基本URL是什么。您必須指定它。

這是一個非?；镜母拍睿侨绻卸嗄甑腤ordPress經(jīng)驗，可能需要一些時間才能使此信息沉入。

現(xiàn)在我們已經(jīng)解決了這些問題，讓我們跳到獲取當前頁面URL的實際方法。

方法1：使用窗口的HREF屬性。Location對象

第一種方法不是特定于Gatsby的，并且可以在瀏覽器中的幾乎所有JavaScript應用程序中使用?？?，瀏覽器是這里的關(guān)鍵詞。

假設您正在與必須包含當前頁面URL的輸入字段共享組件之一構(gòu)建那些共享組件之一。您可能會這樣做：

從“反應”中導入反應；

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

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

導出默認foo;

如果存在窗口對象，我們將獲得窗口中的位置對象的HREF屬性。如果沒有，我們將URL變量為空字符串值。

如果我們在沒有檢查的情況下這樣做并這樣寫：

 const url = window.location.href;

…構(gòu)建將失敗，錯誤看起來像這樣：

失敗的建筑靜態(tài)HTML頁面-2.431s
錯誤＃95312 
在服務器端渲染過程中，“窗口”不可用。

正如我之前提到的，這是因為在構(gòu)建時間內(nèi)不存在瀏覽器。這是這種方法的巨大缺點。如果您需要在頁面的靜態(tài)版本上存在URL，則不能使用它。

但是也有很大的優(yōu)勢！您可以從嵌套在其他組件內(nèi)的組件中訪問窗口對象。換句話說，您不必從父組件中鉆出URL道具。

方法2：從道具獲取位置數(shù)據(jù)的HREF屬性

蓋茨比（Gatsby）中的每個頁面和模板組件都有一個位置道具，其中包含有關(guān)當前頁面的信息。但是，與窗口不同，請在所有頁面上都存在此道具。

引用蓋茨比文檔：

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

但是這里可能會有一個捕捉。如果您是蓋茨比（Gatsby）的新手，則將其將其記錄到控制臺上，并注意它看起來與窗口幾乎相同。location（但不是同一件事），并且還包含HREF屬性。怎么可能？好吧，不是。 HREF道具僅在運行時才存在。

最糟糕的是，直接使用locustance.href，而無需先檢查它是否存在，在構(gòu)建時間期間不會觸發(fā)錯誤。

所有這些意味著我們可以依靠位置道具在每個頁面上，但不能指望它在構(gòu)建時間期間具有HREF屬性。請注意，不要將此方法用于需要在頁面的靜態(tài)版本上標記的關(guān)鍵情況。

因此，讓我們使用以下方法重寫上一個示例：

從“反應”中導入反應；

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

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

導出默認頁面;

這必須是頂級頁面或模板組件。您不能僅在任何地方導入它并期望它起作用。位置道具將不確定。

如您所見，此方法與上一個方法非常相似。將其用于僅在運行時需要URL的情況。

但是，如果您需要在靜態(tài)頁面的標記中包含完整的URL怎么辦？讓我們繼續(xù)使用第三種方法。

方法3：從位置數(shù)據(jù)生成帶有路徑名屬性的當前頁面URL

正如我們在本文開頭討論的那樣，如果您需要在靜態(tài)頁面中包含完整的URL，則必須在某個地方指定網(wǎng)站的基本URL，并以某種方式在構(gòu)建時間內(nèi)獲取。我會告訴你如何做。

例如，我將創(chuàng)建一個標簽。在頁面登錄瀏覽器之前，將完整的頁面url放入其中很重要。否則，搜索引擎和站點刮板將看到空的HREF屬性，這是不可接受的。

這是計劃：

1. 將siteurl屬性添加到gatsby-config.js中的sitemetadata中。
2. 創(chuàng)建一個靜態(tài)查詢鉤以在任何組件中檢索Sitemetadata。
3. 使用該鉤獲取SiteUrl。
4. 將其與頁面的路徑相結(jié)合，然后將其添加到標記中。

讓我們打破每個步伐。

將siteurl屬性添加到gatsby-config.js中的sitemetadata

蓋茨比（Gatsby）有一個稱為gatsby-config.js的配置文件，該文件可用于存儲SiteMetAdata對象中有關(guān)該站點的全局信息。這對我們有用，因此我們將在該對象中添加SiteUrl：

 Module.exports = {
  sitemetadata：{
    標題：“ dmitry Mayorov”，
    描述：“ Dmitry是建立涼爽站點的前端開發(fā)人員?！?    作者：'@dmtrmrv'，
    siteurl：'https：//dmtrmrv.com'，
  }
};

創(chuàng)建一個靜態(tài)查詢鉤以檢索任何組件中的sitemetadata

接下來，我們需要一種在組件中使用sitemetadata的方法。幸運的是，蓋茨比（Gatsby）擁有靜態(tài)API，可以使我們這樣做。您可以直接在組件中使用UsestaticQuery掛鉤，但是我更喜歡為我在網(wǎng)站上使用的每個靜態(tài)查詢創(chuàng)建一個單獨的文件。這使得代碼易于閱讀。

為此，在您網(wǎng)站的SRC文件夾內(nèi)的掛鉤文件夾中創(chuàng)建一個名為use-site-metadata.js的文件，然后將以下代碼復制并粘貼到其中。

從'gatsby'導入{usestaticquery，graphQl};

const usesitemetadata =（）=> {
  const {site} = usestaticquery（
  GraphQl`
    詢問 {
    地點 {
      sitemetadata {
      標題
      描述
      作者
      Siteurl
      }
    }
    }
  `，，
  ）；
  返回站點。
};

導出默認用途intemetadata;

確保檢查所有屬性（例如標題，描述，作者和您在SiteMetAdata對象中的任何其他屬性）都出現(xiàn)在GraphQl查詢中。

用那個掛鉤獲得SiteUrl

這是有趣的部分：我們獲取網(wǎng)站URL并在組件中使用。

從“反應”中導入反應；
從“反應螺旋中心”進口頭盔；
導入從'../ hooks/use-site-metadata'中使用initemetadata';

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

導出默認頁面;

讓我們分解。

在第3行上，我們將創(chuàng)建到組件中創(chuàng)建的usesitemetadata掛鉤導入。

導入從'../ hooks/use-site-metadata'中使用initemetadata';

然后，在第6行中，我們破壞了來自該數(shù)據(jù)的數(shù)據(jù)，創(chuàng)建了SiteUrl變量?，F(xiàn)在，我們擁有在構(gòu)建和運行時可用于我們的站點URL。甜的！

 const {siteurl} = usesitemetadata（）;

將站點URL與頁面的路徑相結(jié)合，然后將其添加到標記中

現(xiàn)在，還記得第二種方法中的位置道具嗎？最棒的是，它在構(gòu)建和運行時都包含PathName屬性?？纯此ツ睦?？我們要做的就是結(jié)合兩個：

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

這可能是最強大的解決方案，它將在瀏覽器和生產(chǎn)構(gòu)建過程中起作用。我個人最常使用此方法。

我在此示例中使用了React頭盔。如果您還沒有聽說過，它是在React應用程序中渲染頭部部分的工具。達雷爾·霍夫曼（Darrell Hoffman）在CSS-Tricks上寫了一個很好的解釋。

方法4：在服務器端生成當前頁面URL

什么？！您只是說服務器嗎？ Gatsby不是靜態(tài)站點生成器嗎？是的，我確實說了服務器。但這不是傳統(tǒng)意義上的服務器。

眾所周知，蓋茨比在構(gòu)建時間內(nèi)生成（IE服務器渲染）靜態(tài)頁面。這就是名字的來源。很棒的是，我們可以使用蓋茨比已經(jīng)提供的多個API將其連接到該過程。

最感興趣的API被稱為Onrenderbody。在大多數(shù)情況下，它用于將自定義腳本和樣式注入頁面。但是，令人興奮的是（和其他服務器端API），它具有路徑名參數(shù)。這意味著我們可以在“服務器上”生成當前頁面URL。

我個人不會使用此方法將元標記添加到頭部部分，因為我們查看的第三種方法更適合于此。但是為了舉例來說，讓我向您展示如何使用OnRenderboby添加到網(wǎng)站的規(guī)范鏈接。

要使用任何服務器端API，您需要在位于網(wǎng)站的根文件夾中的名為gatsby-ssr.js的文件中編寫代碼。要將鏈接添加到頭部部分，您將寫下類似的內(nèi)容：

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

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

讓我們一點一點地打破此代碼。

我們需要在第1行上進行反應。有必要使JSX語法起作用。然后，在第2行上，我們將數(shù)據(jù)從gatsby-config.js文件提取到配置變量中。

接下來，我們將其在Onrenderbody內(nèi)部調(diào)用SetheadComponents方法，并將其傳遞到一個組件中，以添加到站點標題。在我們的情況下，這只是一個鏈接標簽。對于鏈接本身的HREF屬性，我們將siteUrl和路徑名組合在一起：

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

就像我之前說的那樣，這可能不是在頭部添加標簽的首選方法，但是很高興知道蓋茨比具有服務器端API，可以在服務器渲染階段為任何給定頁面生成URL。

如果您想了解有關(guān)使用Gatsby的服務器端渲染的更多信息，我建議您閱讀他們的官方文檔。

就是這樣！

如您所見，在蓋茨比（Gatsby）中獲取當前頁面的URL不是很復雜，尤其是一旦您了解了核心概念并了解可用的工具。如果您知道其他方法，請在評論中告訴我！

資源

• JavaScript窗口接口
• 蓋茨比構(gòu)建過程的概述
• 來自道具的位置數(shù)據(jù)
• 蓋茨比服務器渲染API
• 反應頭盔

以上是如何在Gatsby中獲取當前頁面URL的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！