この一見簡単なタスクでは、ウェブサイトで作業(yè)している間、數(shù)時間頭を掻きました。結(jié)局のところ、ギャツビーで現(xiàn)在のページURLを取得することは、あなたが思うほど簡単ではなく、理解するのもそれほど複雑ではありません。

それを?qū)g現(xiàn)するいくつかの方法を見てみましょう。しかし、最初に、なぜ私たちはこのようなことをしたいのかさえ、なぜあなたは疑問に思うかもしれません。

なぜ現(xiàn)在のURLが必要なのか

それで、私たちがどのように入る前に、まずより大きな質(zhì)問に答えましょう：なぜあなたは現(xiàn)在のページのURLを取得したいのですか？いくつかのユースケースを提供できます。

メタタグ

現(xiàn)在のURLに必要な最初の明らかなことは、ドキュメントヘッドのメタタグです。

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

ソーシャル共有

私はそれを複數(shù)のWebサイトで見ました。ここでは、ボタンの共有の橫に現(xiàn)在のページへのリンクが表示されます。このようなもの（クリエイティブマーケットで見つかりました）

スタイリング

これはそれほど明白ではありませんが、スタイルのコンポーネントで數(shù)回使用しました。特定の條件に基づいて異なるスタイルをレンダリングできます。これらの條件の1つは、ページパス（つまり、サイトの名前の後のURLの一部）です。簡単な例があります：

 「React」からのImport React;
「スタイルのコンポーネント」からスタイルのインポート。

const layout =（{path、children}）=>（
  <styledlayout path="{path}">
    {子供たち}
  </styledlayout>
）;
    
const styledlayout = styled.main`
  background-color：$ {（{path}）=>（path === '/'？ '#fff'： '＃000'）};
`;

デフォルトのレイアウトをエクスポートします。

ここでは、パスに基づいて異なる背景色を持つスタイルのレイアウトコンポーネントを作成しました。

この例のリストは、アイデアのみを示しており、決して包括的ではありません?，F(xiàn)在のページURLを取得したい場合が多いと確信しています。では、どうやってそれを手に入れるのでしょうか？

ビルド時間とランタイムを理解します

それほど速くない！実際のメソッドとコードスニペットに到達する前に、最後の停留所を作成し、ギャツビーのいくつかのコアコンセプトを簡単に説明したいと思います。

私たちが理解する必要がある最初のことは、ギャツビーは他の多くのことの中でも、靜的サイトジェネレーターであるということです。つまり、靜的ファイル（通常はHTMLとJavaScript）が作成されます。本番ウェブサイトにはサーバーもデータベースもありません。すべての情報（現(xiàn)在のページURLを含む）は、マークアップに挿入する前に、他のソースから取得するか、ビルド時間またはランタイム中に生成する必要があります。

それは、私たちが理解する必要がある2番目の重要な概念、つまり時間とランタイムの構(gòu)築につながります。それに関する公式のギャツビーのドキュメントを読むことをお勧めしますが、ここに私の解釈があります。

ランタイムは、靜的ページの1つがブラウザで開かれている場合です。その場合、ページには、現(xiàn)在のページURLが含まれているウィンドウAPIを含む、すべての素晴らしいブラウザAPIにアクセスできます。

特にギャツビーから始めたときに簡単に混亂しやすいことの1つは、Gatsbyのランニングギャツビーが開発モードでターミナルで開発され、ブラウザをスピンズアップしていることです。つまり、ウィンドウオブジェクトへのすべての參照が機能し、エラーをトリガーしないことを意味します。

ビルド時間は、開発が完了したときに発生し、ギャツビーにギャツビービルドコマンドを使用して最終的な最適化された資産を生成するように伝えます。ビルド時間中、ブラウザは存在しません。これは、ウィンドウオブジェクトを使用できないことを意味します。

これがA-HAが來ます！一瞬。ビルドがブラウザから分離されており、URLを取得できるサーバーまたはデータベースがない場合、Gatsbyはどのドメイン名が使用されているかをどのように知ることになっていますか？それが事です - それはできません！ページのナメクジやパスを入手できますが、ベースURLが何であるかを知ることはできません。指定する必要があります。

これは非常に基本的な概念ですが、WordPressの経験が長年にわたって新鮮になっている場合、この情報が沈むのに時間がかかることがあります。Gatsbyはサーバーレスであり、このような瞬間を除いて、このようなすべての瞬間は、サーバーがありません。

それを整理したので、現(xiàn)在のページのURLを取得するための実際の方法にジャンプしましょう。

方法1：window.locationオブジェクトのHREFプロパティを使用します

この最初の方法はギャツビーに固有ではなく、ブラウザのほとんどすべてのJavaScriptアプリケーションで使用できます。參照してください、ブラウザはここでキーワードです。

現(xiàn)在のページのURLを含む必要がある入力フィールドを使用してコンポーネントを共有するコンポーネントの1つを構(gòu)築しているとしましょう。これがあなたがそれをする方法です：

 「React」からのImport React;

const foo =（）=> {
  const url = typeof window！== '未定義'？ window.location.href： '';

  戻る （
    
  ）;
};

デフォルトのfooをエクスポートします。

ウィンドウオブジェクトが存在する場合、ウィンドウの子であるロケーションオブジェクトのHREFプロパティを取得します。そうでない場合は、URL変數(shù)に空の文字列値を與えます。

チェックなしでそれを行う場合、次のように書いてください：

 const url = window.location.href;

…このように見えるエラーでビルドは失敗します：

ページの靜的HTMLの構(gòu)築に失敗しました-2.431s
エラー＃95312 
「ウィンドウ」は、サーバー側(cè)のレンダリング中に使用できません。

先に述べたように、これはビルド時にブラウザが存在しないために起こります。これは、この方法の大きな欠點です。ページの靜的バージョンにURLが存在する必要がある場合は、使用できません。

しかし、大きな利點もあります！他のコンポーネントの奧深くにネストされているコンポーネントからウィンドウオブジェクトにアクセスできます。言い換えれば、親コンポーネントからURLプロップをドリルする必要はありません。

方法2：小道具から位置データのHREFプロパティを取得する

Gatsbyのすべてのページとテンプレートコンポーネントには、現(xiàn)在のページに関する情報を含むロケーションプロップがあります。ただし、window.locationとは異なり、この小道具はすべてのページに存在します。

Gatsbyのドキュメントを引用：

素晴らしいことは、すべてのページでロケーションプロップが利用できると期待できることです。

しかし、ここにはキャッチがあるかもしれません。 Gatsbyに慣れていない場合は、その小道具をコンソールにログに記録し、Windocy.location（ただし同じものではない）とほぼ同じに見え、HREF屬性も含まれていることに注意してください。これはどのように可能ですか？まあ、そうではありません。 HREFの小道具は、ランタイム中にのみ存在します。

これで最悪なことは、location.hrefを使用して最初に存在するかどうかを直接使用することで、ビルド時にエラーがトリガーされないことです。

これはすべて、すべてのページに位置する場所に頼ることができることを意味しますが、ビルド時間中にHREFプロパティがあるとは期待できません。それに注意してください。この方法は、ページの靜的バージョンのマークアップにURLが必要な重要なケースに使用しないでください。

この方法を使用して、前の例を書き直しましょう。

 「React」からのImport React;

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

  戻る （
    
  ）;
};

デフォルトページのエクスポート。

これは、トップレベルのページまたはテンプレートコンポーネントでなければなりません。どこにでもインポートするだけで、機能することを期待することはできません。ロケーションの小道具は未定義です。

ご覧のとおり、この方法は前の方法とかなり似ています。実行時にのみURLが必要な場合に使用します。

しかし、靜的ページのマークアップに完全なURLが必要な場合はどうでしょうか？ 3番目の方法に進みましょう。

方法3：ロケーションデータからPathNameプロパティを使用して現(xiàn)在のページURLを生成します

この投稿の冒頭で説明したように、靜的ページに完全なURLを含める必要がある場合は、WebサイトのベースURLをどこかに指定し、ビルド時間中に何らかの形で取得する必要があります。それを行う方法をお見せします。

例として、ヘッダーにタグを作成します。ページがブラウザにヒットする前に、完全なページURLを入れることが重要です。それ以外の場合、検索エンジンとサイトスクレーパーには、空のHREF屬性が表示されますが、これは受け入れられません。

これが計畫です：

1. Gatsby-Config.jsのSiteMetadataにSiteURLプロパティを追加します。
2. 靜的クエリフックを作成して、任意のコンポーネントのSiteMetadataを取得します。
3. そのフックを使用してsiteurlを取得します。
4. ページのパスと組み合わせて、マークアップに追加します。

各ステップを壊しましょう。

Gatsby-Config.jsのSiteMetadataにSiteURLプロパティを追加します

Gatsbyには、SiteMetadataオブジェクト內(nèi)のサイトに関するグローバルな情報を保存するために使用できるGatsby-Config.jsという構(gòu)成ファイルがあります。それは私たちのために機能するので、そのオブジェクトにsiteurlを追加します。

 module.exports = {
  sitemetadata：{
    タイトル：「Dmitry Mayorov」、
    説明：「Dmitryは、クールなサイトを構(gòu)築するフロントエンド開発者です」、
    著者： '@dmtrmrv'、
    siteurl： 'https：//dmtrmrv.com'、
  }
};

靜的クエリフックを作成して、任意のコンポーネントのSiteMetadataを取得する

次に、コンポーネントでSiteMetadataを使用する方法が必要です。幸いなことに、ギャツビーには靜的APIがあり、まさにそれを行うことができます。コンポーネント內(nèi)に直接UseStaticQueryフックを使用できますが、Webサイトで使用する各靜的クエリに対して個別のファイルを作成することをお勧めします。これにより、コードの読み取りが容易になります。

それを行うには、サイトのSRCフォルダー內(nèi)のフックフォルダー內(nèi)のuse-site-metadata.jsというファイルを作成し、次のコードをコピーして貼り付けます。

 'gatsby'から{usestaticquery、graphql}をimport;

const outesitemetadata =（）=> {
  const {site} = uesestaticquery（
  graphql`
    クエリ{
    サイト {
      sitemetadata {
      タイトル
      説明
      著者
      Siteurl
      }
    }
    }
  `、
  ）;
  return site.sitemetadata;
};

デフォルトのediTemetadataをエクスポートします。

タイトル、説明、著者、およびSiteMetadataオブジェクトにあるその他のプロパティなど、すべてのプロパティがGraphQLクエリに表示されることを確認してください。

そのフックを使用してsiteurlを取得します

楽しい部分は次のとおりです。サイトURLを取得し、コンポーネント內(nèi)で使用します。

 「React」からのImport React;
「React-Helmet」からヘルメットをインポートします。
'../hooks/use-site-metadata'からuseSitemetadataをインポートします。

const page =（{location}）=> {
  const {siteurl} = usesitemetadata（）;
  戻る （
    
      <link rel="canonical" href="%7B%60%24">
    
  ）;
};

デフォルトページのエクスポート。

それを分解しましょう。

3行目では、作成したコンポーネントに使用したouteSiTemetadataフックをインポートします。

 '../hooks/use-site-metadata'からuseSitemetadataをインポートします。

次に、6行目で、そこから生じるデータを破壊し、SiteURL変數(shù)を作成します。これで、ビルドとランタイム中に利用できるサイトURLがあります。甘い！

 const {siteurl} = usesitemetadata（）;

サイトURLをページのパスと組み合わせて、マークアップに追加します

さて、2番目の方法のロケー??ションプロップを覚えていますか？それについての素晴らしいところは、ビルドとランタイムの両方の間にPathNameプロパティが含まれていることです。どこに行くのかわかりますか？私たちがしなければならないのは、2つを組み合わせることです。

 `$ {siteurl} $ {location.pathname}`

これはおそらく、ブラウザや生産中に機能する最も堅牢なソリューションです。私は個人的にこの方法を最も使用しています。

この例では、Reactヘルメットを使用しています。聞いたことがない場合は、Reactアプリケーションでヘッドセクションをレンダリングするためのツールです。 Darrell Hoffmanは、CSS-Tricksについてここで素晴らしい説明を書きました。

方法4：サーバー側(cè)に現(xiàn)在のページURLを生成する

何？！サーバーと言っただけですか？ Gatsbyは靜的サイトジェネレーターではありませんか？はい、私はサーバーと言いました。しかし、それは伝統(tǒng)的な意味でのサーバーではありません。

すでに知っているように、Gatsbyはビルド時に靜的ページを生成します（つまり、サーバーレンダリング）。それが名前の出所です。それの素晴らしいところは、ギャツビーがすでに提供している複數(shù)のAPIを使用して、そのプロセスに接続できることです。

私たちが最も興味を持っているAPIは、OnRenderbodyと呼ばれます。ほとんどの場合、ページにカスタムスクリプトとスタイルを注入するために使用されます。しかし、これ（および他のサーバー側(cè)API）についてエキサイティングなのは、パス名パラメーターがあることです。これは、「サーバー上」の現(xiàn)在のページURLを生成できることを意味します。

私たちが見た3番目の方法がそれに適しているため、この方法は個人的にはメタタグをヘッドセクションに追加することはありません。しかし、例のために、OnRenderbodyを使用してサイトに標準リンクを追加する方法をお見せしましょう。

サーバー側(cè)APIを使用するには、サイトのルートフォルダーにあるGatsby-SSR.JSというファイルにコードを記述する必要があります。ヘッドセクションにリンクを追加するには、次のようなものを書きます。

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

exports.onrenderbody =（{pathname、setheadcomponents}）=> {
  setheadcomponents（[
    <link rel="canonical" href="%7B%60%24">、
  ]）;
};

このコードを少しずつ破りましょう。

1行目で反応する必要があります。JSX構(gòu)文を機能させる必要があります。次に、2行目で、Gatsby-Config.jsファイルからデータを構(gòu)成変數(shù)に引き込みます。

次に、onRenderbody內(nèi)のSetheadComponentsメソッドを呼び出して、サイトヘッダーに追加するコンポーネントの配列を渡します。私たちの場合、それはたった1つのリンクタグです。そして、リンク自體のHREF屬性については、SiteurlとPathNameを組み合わせます。

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

先ほど言ったように、これはおそらくヘッドセクションにタグを追加するための頼りになる方法ではありませんが、Gatsbyがサーバーのレンダリング段階で特定のページのURLを生成できるサーバー側(cè)のAPIを持っていることを知っておくのは良いことです。

Gatsbyでサーバー側(cè)のレンダリングについて詳しく知りたい場合は、公式ドキュメントを読むことをお勧めします。

それでおしまい！

ご覧のとおり、ギャツビーの現(xiàn)在のページのURLを取得することは、特にコアの概念を理解し、使用可能なツールを知ると、それほど複雑ではありません。他の方法を知っている場合は、コメントでお知らせください！

リソース

• JavaScriptウィンドウインターフェイス
• ギャツビービルドプロセスの概要
• 小道具からの位置データ
• GatsbyサーバーレンダリングAPI
• 反応ヘルメット

以上がギャツビーで現(xiàn)在のページURLを取得する方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。