如何在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中文網其他相關文章！