Cara Mendapatkan URL Halaman Semasa di Gatsby

Tugas yang seolah -olah mudah ini telah saya menggaru kepala saya selama beberapa jam semasa saya bekerja di laman web saya. Kerana ternyata, mendapatkan URL halaman semasa di Gatsby tidak semudah yang anda fikirkan, tetapi juga tidak begitu rumit untuk difahami.

Mari kita lihat beberapa kaedah membuatnya berlaku. Tetapi pertama, anda mungkin tertanya -tanya mengapa di bumi kita mahu melakukan sesuatu seperti ini.

Mengapa anda mungkin memerlukan URL semasa

Jadi sebelum kita masuk ke dalam bagaimana , mari kita jawab soalan yang lebih besar: Mengapa anda ingin mendapatkan URL halaman semasa? Saya boleh menawarkan beberapa kes penggunaan.

Tag meta

Perkara pertama yang jelas yang anda mahukan URL semasa adalah tag meta di kepala dokumen:

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

Perkongsian sosial

Saya telah melihatnya di beberapa laman web di mana pautan ke halaman semasa dipaparkan di sebelah butang perkongsian. Sesuatu seperti ini (terdapat di pasaran kreatif)

Gaya

Ini kurang jelas tetapi saya telah menggunakannya beberapa kali dengan komponen gaya. Anda boleh menjadikan gaya yang berbeza berdasarkan keadaan tertentu. Salah satu daripada syarat tersebut boleh menjadi laluan halaman (iaitu bahagian URL selepas nama tapak). Inilah contoh cepat:

 Import bertindak balas daripada 'bertindak balas';
import yang digayakan dari 'gaya-komponen';

susun atur const = ({Path, Children}) => (
  <styledlayout path="{Path}">
    {anak}
  </styledlayout>
);
    
const styledLayout = styled.main`
  latar belakang warna: $ {({path}) => (path === '/'? '#fff': '#000')};
`;

susun atur lalai eksport;

Di sini, saya telah membuat komponen susun atur gaya yang, berdasarkan jalan, mempunyai warna latar belakang yang berbeza.

Senarai contoh ini hanya menggambarkan idea dan tidak semestinya komprehensif. Saya pasti terdapat lebih banyak kes di mana anda mungkin ingin mendapatkan URL halaman semasa. Jadi bagaimana kita mendapatkannya?

Memahami masa binaan vs runtime

Tidak begitu pantas! Sebelum kita sampai ke kaedah sebenar dan coretan kod, saya ingin membuat satu perhentian terakhir dan menjelaskan secara ringkas beberapa konsep teras Gatsby.

Perkara pertama yang perlu kita fahami ialah Gatsby, antara banyak perkara lain, adalah penjana tapak statik. Ini bermakna ia mencipta fail statik (yang biasanya HTML dan JavaScript). Tiada pelayan dan tiada pangkalan data di laman web pengeluaran. Semua keping maklumat (termasuk URL halaman semasa) mesti ditarik dari sumber lain atau dihasilkan semasa masa membina atau runtime sebelum memasukkannya ke dalam markup.

Itu membawa kita kepada konsep penting kedua yang perlu kita fahami: membina masa vs runtime. Saya menggalakkan anda membaca dokumentasi rasmi Gatsby mengenainya, tetapi inilah tafsiran saya.

Runtime adalah apabila salah satu halaman statik dibuka dalam penyemak imbas . Dalam hal ini, halaman ini mempunyai akses kepada semua API pelayar yang indah, termasuk API Window yang, di antara banyak perkara lain, mengandungi URL halaman semasa.

Satu perkara yang mudah dikelirukan, terutamanya apabila bermula dengan Gatsby, ialah menjalankan Gatsby dalam terminal dalam mod pembangunan memancarkan penyemak imbas untuk anda. Ini bermakna semua rujukan kepada objek tetingkap berfungsi dan tidak mencetuskan sebarang kesilapan.

Bina masa berlaku apabila anda selesai membangun dan memberitahu Gatsby untuk menjana aset yang dioptimumkan akhir menggunakan arahan Gatsby Build. Semasa masa membina, penyemak imbas tidak wujud. Ini bermakna anda tidak boleh menggunakan objek tetingkap.

Di sini datang a-ha! seketika. Jika binaan diasingkan dari penyemak imbas, dan tidak ada pelayan atau pangkalan data di mana kita boleh mendapatkan URL, bagaimana Gatsby sepatutnya tahu nama domain yang sedang digunakan? Itulah perkara - ia tidak boleh! Anda boleh mendapatkan slug atau laluan halaman, tetapi anda tidak dapat memberitahu apa url asas. Anda mesti menentukannya.

Ini adalah konsep yang sangat asas, tetapi jika anda datang segar dengan pengalaman bertahun -tahun WordPress, ia boleh mengambil sedikit masa untuk maklumat ini untuk tenggelam. Anda tahu bahawa Gatsby adalah pelayan dan semua tetapi saat -saat seperti ini membuat anda menyedari: tidak ada pelayan.

Sekarang kita telah menyusunnya, mari kita melompat ke kaedah sebenar untuk mendapatkan URL halaman semasa.

Kaedah 1: Gunakan harta HREF dari Objek Window.Location

Kaedah pertama ini tidak khusus untuk Gatsby dan boleh digunakan dalam aplikasi JavaScript yang cukup banyak dalam penyemak imbas. Lihat, penyemak imbas adalah kata kunci di sini.

Katakan anda sedang membina salah satu komponen perkongsian dengan medan input yang mesti mengandungi URL halaman semasa. Inilah caranya anda boleh melakukannya:

 Import bertindak balas daripada 'bertindak balas';

const foo = () => {
  const url = typeof window! == 'undefined'? window.location.href: '';

  kembali (
    <input type="text" readonly value="{url}">
  );
};

Eksport lalai foo;

Jika objek tetingkap wujud, kami mendapat harta HREF objek lokasi yang merupakan anak tetingkap. Jika tidak, kami memberikan pemboleh ubah URL nilai rentetan kosong.

Sekiranya kita melakukannya tanpa cek dan tulis seperti ini:

 const url = window.location.href;

... binaan akan gagal dengan kesilapan yang kelihatan seperti ini:

 HTML statik bangunan yang gagal untuk halaman - 2.431s
Ralat #95312 
"Window" tidak tersedia semasa penyerahan sisi pelayan.

Seperti yang saya nyatakan sebelum ini, ini berlaku kerana penyemak imbas tidak wujud semasa masa membina . Itulah kelemahan yang besar dalam kaedah ini. Anda tidak boleh menggunakannya jika anda memerlukan URL untuk hadir pada versi statik halaman.

Tetapi ada kelebihan yang besar juga! Anda boleh mengakses objek tetingkap dari komponen yang bersarang di dalam komponen lain. Dalam erti kata lain, anda tidak perlu menggerudi prop URL dari komponen ibu bapa.

Kaedah 2: Dapatkan harta HREF data lokasi dari alat peraga

Setiap komponen halaman dan templat di Gatsby mempunyai prop lokasi yang mengandungi maklumat mengenai halaman semasa. Walau bagaimanapun, tidak seperti window.location, prop ini hadir di semua halaman.

Memetik Gatsby Docs:

Perkara yang menarik ialah anda boleh mengharapkan prop lokasi tersedia untuk anda di setiap halaman.

Tetapi mungkin terdapat tangkapan di sini. Sekiranya anda baru ke Gatsby, anda akan log prop itu ke konsol, dan perhatikan bahawa ia kelihatan hampir sama dengan tingkap.location (tetapi ia bukan perkara yang sama) dan juga mengandungi atribut HREF. Bagaimana mungkin ini? Nah, tidak. Prop HREF hanya ada semasa runtime.

Perkara yang paling teruk tentang ini ialah menggunakan location.href secara langsung tanpa pemeriksaan terlebih dahulu jika ia wujud tidak akan mencetuskan kesilapan semasa masa membina.

Semua ini bermakna kita boleh bergantung pada lokasi prop untuk berada di setiap halaman, tetapi tidak boleh mengharapkan ia mempunyai harta HREF semasa masa membina. Berhati -hati dengan itu, dan jangan gunakan kaedah ini untuk kes -kes kritikal di mana anda memerlukan URL berada dalam markup pada versi statik halaman.

Oleh itu mari kita menulis semula contoh sebelumnya menggunakan kaedah ini:

 Import bertindak balas daripada 'bertindak balas';

const page = ({location}) => {
  const url = location.href? location.href: '';

  kembali (
    <input type="text" readonly value="{url}">
  );
};

halaman lalai eksport;

Ini harus menjadi halaman peringkat atau templat peringkat atas. Anda tidak boleh mengimportnya di mana sahaja dan mengharapkan ia berfungsi. Prop lokasi tidak akan ditentukan.

Seperti yang anda lihat, kaedah ini hampir sama dengan yang sebelumnya. Gunakannya untuk kes -kes di mana URL diperlukan hanya semasa runtime.

Tetapi bagaimana jika anda perlu mempunyai URL penuh dalam markup halaman statik? Mari kita beralih ke kaedah ketiga.

Kaedah 3: Menjana URL Halaman Semasa dengan harta PathName dari Data Lokasi

Seperti yang dibincangkan pada permulaan jawatan ini, jika anda perlu memasukkan URL penuh ke halaman statik, anda perlu menentukan URL asas untuk laman web di suatu tempat dan entah bagaimana mendapatkannya semasa membina masa. Saya akan menunjukkan kepada anda bagaimana untuk melakukannya.

Sebagai contoh, saya akan membuat tag dalam header. Adalah penting untuk mempunyai URL halaman penuh di dalamnya sebelum halaman hits penyemak imbas. Jika tidak, enjin carian dan pengikis tapak akan melihat atribut HREF kosong, yang tidak dapat diterima.

Inilah rancangannya:

1. Tambah harta tapak ke SiteMetadata di gatsby-config.js.
2. Buat cangkuk pertanyaan statik untuk mendapatkan sitemetadata dalam mana -mana komponen.
3. Gunakan cangkuk itu untuk mendapatkan Siteurl.
4. Campurkannya dengan laluan halaman dan tambahkannya ke markup.

Mari pecahkan setiap langkah ke bawah.

Tambahkan harta tanah ke sitemetadata di gatsby-config.js

Gatsby mempunyai fail konfigurasi yang dipanggil gatsby-config.js yang boleh digunakan untuk menyimpan maklumat global mengenai laman web di dalam objek SiteMetadata. Itu berfungsi untuk kami, jadi kami akan menambah Siteurl ke objek itu:

 modul.exports = {
  sitemetadata: {
    Tajuk: 'Dmitry Mayorov',
    Penerangan: 'Dmitry adalah pemaju depan yang membina laman web yang sejuk.',
    Pengarang: '@dmtrmrv',
    Siteurl: 'https://dmtrmrv.com',
  }
};

Buat cangkuk pertanyaan statik untuk mendapatkan sitemetadata dalam mana -mana komponen

Seterusnya, kami memerlukan cara untuk menggunakan SiteMetadata dalam komponen kami. Nasib baik, Gatsby mempunyai API statik yang membolehkan kita berbuat demikian. Anda boleh menggunakan cangkuk UseStaticQuery secara langsung di dalam komponen anda, tetapi saya lebih suka membuat fail berasingan untuk setiap pertanyaan statik yang saya gunakan di laman web. Ini menjadikan kod lebih mudah dibaca.

Untuk melakukan itu, buat fail yang dipanggil Use-Site-Metadata.js di dalam folder cangkuk di dalam folder SRC laman web anda dan salin dan tampal kod berikut kepadanya.

 import {useStaticQuery, graphql} dari 'gatsby';

const useitemetadata = () => {
  const {site} = useStaticQuery (
  Graphql`
    pertanyaan {
    tapak {
      sitemetadata {
      tajuk
      Penerangan
      pengarang
      Siteurl
      }
    }
    }
  `,
  );
  kembali site.sitemetadata;
};

menggunakan kegunaan lalai eksport;

Pastikan untuk menyemak bahawa semua hak milik, keterangan, penulis, dan mana -mana sifat lain yang anda miliki dalam objek SiteMetadata - muncul dalam pertanyaan GraphQL.

Gunakan cangkuk itu untuk mendapatkan SiteUrl

Inilah bahagian yang menyeronokkan: kami mendapat URL tapak dan menggunakannya di dalam komponen.

 Import bertindak balas daripada 'bertindak balas';
Helmet import dari 'React-Helmet';
import usesitemetadata dari '../hooks/use-site-metadata';

const page = ({location}) => {
  const {siteUrl} = useItemetAdata ();
  kembali (
    <madelimet>
      <link rel="canonical" href="%7B%60%24">
    
  );
};

halaman lalai eksport;</madelimet>

Mari pecahkannya.

Pada baris 3, kami mengimport hook Useitemetadata yang kami buat ke dalam komponen.

 import usesitemetadata dari '../hooks/use-site-metadata';

Kemudian, pada baris 6, kita merosakkan data yang datang daripadanya, mewujudkan pembolehubah Siteurl. Sekarang kami mempunyai URL tapak yang tersedia untuk kami semasa membina dan runtime. Manis!

 const {siteUrl} = useItemetAdata ();

Campurkan URL tapak dengan jalan halaman dan tambahkannya ke markup

Sekarang, ingat prop lokasi dari kaedah kedua? Perkara yang hebat mengenainya ialah ia mengandungi harta PathName semasa kedua -dua membina dan runtime. Lihat ke mana ia pergi? Apa yang perlu kita lakukan ialah menggabungkan kedua -dua:

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

Ini mungkin penyelesaian yang paling mantap yang akan berfungsi di pelayar dan semasa membina pengeluaran. Saya secara peribadi menggunakan kaedah ini paling banyak.

Saya menggunakan Helmet React dalam contoh ini. Sekiranya anda tidak mendengarnya, ia adalah alat untuk menjadikan bahagian kepala dalam aplikasi React. Darrell Hoffman menulis penjelasan yang bagus di sini di CSS-Tricks.

Kaedah 4: Menjana URL halaman semasa di sebelah pelayan

Apa?! Adakah anda hanya mengatakan pelayan? Bukankah Gatsby penjana tapak statik? Ya, saya katakan pelayan. Tetapi ia bukan pelayan dalam erti kata tradisional.

Seperti yang sudah kita ketahui, Gatsby menjana (iaitu pelayan pelayan) halaman statik semasa masa membina. Di situlah nama itu berasal. Apa yang hebat tentang itu ialah kita boleh menyambungkan proses itu dengan menggunakan API berganda yang telah disediakan oleh Gatsby.

API yang paling menarik minat kami dipanggil Onrenderbody. Kebanyakan masa, ia digunakan untuk menyuntik skrip dan gaya tersuai ke halaman. Tetapi apa yang menarik tentang ini (dan API sisi pelayan yang lain) adalah bahawa ia mempunyai parameter PathName. Ini bermakna kita boleh menjana URL halaman semasa "pada pelayan."

Saya tidak akan menggunakan kaedah ini secara peribadi untuk menambah tag meta ke bahagian kepala kerana kaedah ketiga yang kita lihat lebih sesuai untuk itu. Tetapi demi contoh, izinkan saya menunjukkan kepada anda bagaimana anda boleh menambah pautan kanonik ke laman web menggunakan OnRenderBody.

Untuk menggunakan mana-mana API sisi pelayan, anda perlu menulis kod dalam fail yang dipanggil Gatsby-SSR.js yang terletak di folder root laman web anda. Untuk menambah pautan ke bahagian kepala, anda akan menulis sesuatu seperti ini:

 const react = memerlukan ('bertindak balas');
const config = memerlukan ('./ gatsby-config');

Exports.onRenderbody = ({PathName, Setetheadcomponents}) => {
  Setheadcomponents ([
    <link rel="canonical" href="%7B%60%24">,
  ]);
};

Mari pecahkan kod ini sedikit demi sedikit.

Kami memerlukan reaksi pada baris 1. Ia perlu membuat kerja sintaks JSX. Kemudian, pada baris 2, kami menarik data dari fail gatsby-config.js ke dalam pemboleh ubah konfigurasi.

Seterusnya, kami memanggil kaedah Setetheadcomponents di dalam OnRenderbody dan lulus pelbagai komponen untuk ditambah ke tajuk tapak. Dalam kes kami, ia hanya satu tag pautan. Dan untuk atribut HREF pautan itu sendiri, kami menggabungkan Siteurl dan Nama Path:

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

Seperti yang saya katakan sebelum ini, ini mungkin bukan kaedah pergi untuk menambah tag ke bahagian kepala, tetapi adalah baik untuk mengetahui bahawa Gatsby mempunyai API sisi pelayan yang memungkinkan untuk menghasilkan URL untuk mana-mana halaman yang diberikan semasa peringkat penyerahan pelayan.

Jika anda ingin mengetahui lebih lanjut mengenai penyampaian pelayan dengan Gatsby, saya menggalakkan anda membaca dokumentasi rasmi mereka.

Itu sahaja!

Seperti yang anda lihat, mendapatkan URL halaman semasa di Gatsby tidak begitu rumit, terutamanya apabila anda memahami konsep teras dan mengetahui alat yang tersedia untuk digunakan. Jika anda tahu kaedah lain, sila beritahu saya dalam komen!

Sumber

• Antara muka tetingkap JavaScript
• Gambaran Keseluruhan Proses Membina Gatsby
• Data lokasi dari alat peraga
• API Rendering Server Gatsby
• React Helmet

Atas ialah kandungan terperinci Cara Mendapatkan URL Halaman Semasa di Gatsby. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!