這項(xiàng)看似簡(jiǎn)單的任務(wù)使我在網(wǎng)站上工作時(shí)抓了幾個(gè)小時(shí)。事實(shí)證明，在蓋茨比（Gatsby）中獲取當(dāng)前頁(yè)面URL並不像您想像的那樣簡(jiǎn)單，但也不是那麼複雜。

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

為什麼您可能需要當(dāng)前的URL

因此，在進(jìn)入如何進(jìn)行之前，讓我們首先回答更大的問(wèn)題：您為什麼要獲取當(dāng)前頁(yè)面的URL？我可以提供一些用例。

元標(biāo)記

您想要當(dāng)前URL的第一件事是文檔頭中的元標(biāo)記：

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

社交分享

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

造型

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

從“反應(yīng)”中導(dǎo)入反應(yīng)；
從“樣式組件”中導(dǎo)入樣式；

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

導(dǎo)出默認(rèn)佈局；

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

此示例列表僅說(shuō)明了這個(gè)想法，絕不是全面的。我敢肯定，還有更多情況您可能想獲取當(dāng)前頁(yè)面URL。那我們?cè)觞N得到它呢？

了解構(gòu)建時(shí)間與運(yùn)行時(shí)

不太快！在獲得實(shí)際的方法和代碼段之前，我想進(jìn)行最後一站，並簡(jiǎn)要解釋蓋茨比的一些核心概念。

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

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

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

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

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

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

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

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

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

第一種方法不是特定於Gatsby的，並且可以在瀏覽器中的幾乎所有JavaScript應(yīng)用程序中使用。看，瀏覽器是這裡的關(guān)鍵詞。

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

從“反應(yīng)”中導(dǎo)入反應(yīng)；

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

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

導(dǎo)出默認(rèn)foo;

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

如果我們?cè)跊](méi)有檢查的情況下這樣做並這樣寫(xiě)：

 const url = window.location.href;

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

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

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

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

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

蓋茨比（Gatsby）中的每個(gè)頁(yè)面和模板組件都有一個(gè)位置道具，其中包含有關(guān)當(dāng)前頁(yè)面的信息。但是，與窗口不同，請(qǐng)?jiān)谒许?yè)面上都存在此道具。

引用蓋茨比文檔：

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

但是這裡可能會(huì)有一個(gè)捕捉。如果您是蓋茨比（Gatsby）的新手，則將其將其記錄到控制臺(tái)上，並註意它看起來(lái)與窗口幾乎相同。 location（但不是同一件事），並且還包含HREF屬性。怎麼可能？好吧，不是。 HREF道具僅在運(yùn)行時(shí)才存在。

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

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

因此，讓我們使用以下方法重寫(xiě)上一個(gè)示例：

從“反應(yīng)”中導(dǎo)入反應(yīng)；

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

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

導(dǎo)出默認(rèn)頁(yè)面;

這必須是頂級(jí)頁(yè)面或模板組件。您不能僅在任何地方導(dǎo)入它並期望它起作用。位置道具將不確定。

如您所見(jiàn)，此方法與上一個(gè)方法非常相似。將其用於僅在運(yùn)行時(shí)需要URL的情況。

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

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

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

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

這是計(jì)劃：

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

讓我們打破每個(gè)步伐。

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

蓋茨比（Gatsby）有一個(gè)稱(chēng)為gatsby-config.js的配置文件，該文件可用於存儲(chǔ)SiteMetAdata對(duì)像中有關(guān)該站點(diǎn)的全局信息。這對(duì)我們有用，因此我們將在該對(duì)像中添加SiteUrl：

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

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

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

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

從'gatsby'導(dǎo)入{usestaticquery，graphQl};

const usesitemetadata =（）=> {
  const {site} = usestaticquery（
  GraphQl`
    詢(xún)問(wèn) {
    地點(diǎn) {
      sitemetadata {
      標(biāo)題
      描述
      作者
      Siteurl
      }
    }
    }
  `，，
  ）；
  返回站點(diǎn)。
};

導(dǎo)出默認(rèn)用途intemetadata;

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

用那個(gè)掛鉤獲得SiteUrl

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

從“反應(yīng)”中導(dǎo)入反應(yīng)；
從“反應(yīng)螺旋中心”進(jìn)口頭盔；
導(dǎo)入從'../ hooks/use-site-metadata'中使用initemetadata';

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

導(dǎo)出默認(rèn)頁(yè)面;

讓我們分解。

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

導(dǎo)入從'../ hooks/use-site-metadata'中使用initemetadata';

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

 const {siteurl} = usesitemetadata（）;

將站點(diǎn)URL與頁(yè)面的路徑相結(jié)合，然後將其添加到標(biāo)記中

現(xiàn)在，還記得第二種方法中的位置道具嗎？最棒的是，它在構(gòu)建和運(yùn)行時(shí)都包含PathName屬性。看看它要去哪裡？我們要做的就是結(jié)合兩個(gè)：

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

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

我在此示例中使用了React頭盔。如果您還沒(méi)有聽(tīng)說(shuō)過(guò)，它是在React應(yīng)用程序中渲染頭部部分的工具。達(dá)雷爾·霍夫曼（Darrell Hoffman）在CSS-Tricks上寫(xiě)了一個(gè)很好的解釋。

方法4：在服務(wù)器端生成當(dāng)前頁(yè)面URL

什麼？ ！您只是說(shuō)服務(wù)器嗎？ Gatsby不是靜態(tài)站點(diǎn)生成器嗎？是的，我確實(shí)說(shuō)了服務(wù)器。但這不是傳統(tǒng)意義上的服務(wù)器。

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

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

我個(gè)人不會(huì)使用此方法將元標(biāo)記添加到頭部部分，因?yàn)槲覀儾榭吹牡谌N方法更適合於此。但是為了舉例來(lái)說(shuō)，讓我向您展示如何使用OnRenderboby添加到網(wǎng)站的規(guī)範(fàn)鏈接。

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

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

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

讓我們一點(diǎn)一點(diǎn)地打破此代碼。

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

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

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

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

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

就是這樣！

如您所見(jiàn)，在蓋茨比（Gatsby）中獲取當(dāng)前頁(yè)面的URL不是很複雜，尤其是一旦您了解了核心概念並了解可用的工具。如果您知道其他方法，請(qǐng)?jiān)谠u(píng)論中告訴我！

資源

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

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