ギャツビーで現在のページURLを取得する方法

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

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

なぜ現在のURLが必要なのか

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

メタタグ

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

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

ソーシャル共有

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

スタイリング

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 「React」からのImport React;

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

  戻る （
    
  ）;
};

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

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

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

 const url = window.location.href;

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

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

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

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

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

Gatsbyのすべてのページとテンプレートコンポーネントには、現在のページに関する情報を含むロケーションプロップがあります。ただし、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プロパティを使用して現在のページURLを生成します

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

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

これが計画です：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 「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変数を作成します。これで、ビルドとランタイム中に利用できるサイトURLがあります。甘い！

 const {siteurl} = usesitemetadata（）;

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

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

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

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

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

方法4：サーバー側に現在のページURLを生成する

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

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

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

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

サーバー側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構文を機能させる必要があります。次に、2行目で、Gatsby-Config.jsファイルからデータを構成変数に引き込みます。

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

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

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

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

それでおしまい！

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

リソース

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

以上がギャツビーで現在のページURLを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。