Gatsby에서 현재 페이지 URL을 얻는 방법

이 간단한 작업은 웹 사이트에서 작업하는 동안 몇 시간 동안 머리를 긁어 냈습니다. 결과적으로 Gatsby에서 현재 페이지 URL을 얻는 것은 생각만큼 간단하지는 않지만 이해하기에는 복잡하지 않습니다.

이를 수행하는 몇 가지 방법을 살펴 보겠습니다. 그러나 먼저, 당신은 왜 지구상에서 우리가 이런 일을하고 싶은지 궁금 할 것입니다.

현재 URL이 필요한 이유

그래서 우리가 방법 에 들어가기 전에 먼저 더 큰 질문에 대답합시다. 왜 현재 페이지의 URL을 얻고 싶습니까? 몇 가지 사용 사례를 제공 할 수 있습니다.

메타 태그

현재 URL을 원하는 첫 번째 명백한 것은 문서 헤드의 메타 태그입니다.

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

소셜 공유

현재 페이지에 대한 링크가 공유 버튼 옆에 표시되는 여러 웹 사이트에서 보았습니다. 이와 같은 것 (Creative Market에서 발견)

스타일링

이것은 분명하지 않지만 스타일의 경쟁자와 함께 몇 번 사용했습니다. 특정 조건에 따라 다른 스타일을 렌더링 할 수 있습니다. 이러한 조건 중 하나는 페이지 경로 (즉, 사이트 이름의 URL 부분) 일 수 있습니다. 다음은 빠른 예입니다.

 'React'에서 React React;
'스타일의 경쟁자'에서 스타일링 된 수입;

const 레이아웃 = ({path, children}) => (
  <styledlayout>
    {어린이들}
  </styledlayout>
);
    
Const StyledLayout = Styled.Main`
  배경색 : $ {({path}) => (path === '/'? '#fff': '#000')};
`;;

기본 레이아웃 내보내기;

여기서는 경로를 기반으로 배경색이 다른 스타일 레이아웃 구성 요소를 만들었습니다.

이 예 목록은 아이디어만을 보여 주며 결코 포괄적이지 않습니다. 현재 페이지 URL을 얻으려면 더 많은 사례가 있다고 확신합니다. 그래서 우리는 어떻게 얻습니까?

빌드 시간 대 런타임을 이해하십시오

그렇게 빠르지 않습니다! 실제 방법과 코드 스 니펫에 도달하기 전에 마지막 정거장을 만들고 개츠비의 몇 가지 핵심 개념을 간단히 설명하고 싶습니다.

우리가 이해해야 할 첫 번째는 Gatsby는 다른 많은 것들 중에서도 정적 사이트 생성기라는 것입니다. 즉, 정적 파일 (일반적으로 HTML 및 JavaScript)을 생성한다는 것을 의미합니다. 프로덕션 웹 사이트에는 서버와 데이터베이스가 없습니다. 모든 정보 (현재 페이지 URL 포함)는 다른 소스에서 가져 오거나 마크 업에 삽입하기 전에 빌드 시간 또는 런타임 중에 생성되어야합니다.

그것은 우리가 이해해야 할 두 번째 중요한 개념으로 이어집니다 : 빌드 시간 대 런타임. 공식 개츠비 문서를 읽어 보는 것이 좋습니다. 그러나 여기에 제 해석이 있습니다.

런타임은 브라우저 에서 정적 페이지 중 하나가 열리는 경우입니다. 이 경우 페이지는 현재 페이지 URL을 포함하는 Window API를 포함하여 모든 훌륭한 브라우저 API에 액세스 할 수 있습니다.

혼동하기 쉬운 한 가지는 특히 개츠비로 시작할 때 개발 모드에서 터미널에서 실행하는 것이 브라우저를 회전 시킨다는 것입니다. 즉, Window Object Work에 대한 모든 참조를 의미하며 오류가 발생하지 않습니다.

Gatsby Build 명령을 사용하여 개발을 마치고 Gatsby에게 최종 최적화 된 자산을 생성하도록 지시 할 때 빌드 시간이 발생합니다. 빌드 시간에는 브라우저가 존재하지 않습니다. 이것은 당신이 창 객체를 사용할 수 없다는 것을 의미합니다.

여기 a-ha가 온다! 순간. 빌드가 브라우저에서 격리되어 있고 URL을 얻을 수있는 서버 나 데이터베이스가없는 경우 Gatsby는 어떻게 사용되는 도메인 이름을 알아야합니까? 그게 그게 다야. 페이지의 슬러그 또는 경로를 얻을 수 있지만 기본 URL이 무엇인지 알 수는 없습니다. 당신은 그것을 지정해야합니다.

이것은 매우 기본적인 개념이지만, 수년간의 WordPress 경험으로 신선하게 들어 오면이 정보가 가라 앉는 데 시간이 걸릴 수 있습니다. Gatsby는 서버가없고 이와 같은 모든 순간을 알게된다는 것을 알고 있습니다. 서버가 없습니다.

이제 우리가 정리 했으므로 현재 페이지의 URL을 얻기위한 실제 방법으로 이동합시다.

방법 1 : Window.location 객체의 HREF 속성 사용

이 첫 번째 방법은 Gatsby에만 국한되지 않으며 브라우저의 거의 모든 JavaScript 응용 프로그램에서 사용할 수 있습니다. 브라우저는 여기서 핵심 단어입니다.

현재 페이지의 URL을 포함 해야하는 입력 필드를 갖춘 공유 구성 요소 중 하나를 구축한다고 가정 해 봅시다. 다음은 다음과 같은 방법입니다.

 'React'에서 React React;

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

  반품 (
    
  );
};

수출 기본 FOO;

창 객체가 있으면 창의 자녀 인 위치 개체의 HREF 속성을 얻습니다. 그렇지 않은 경우 URL 변수에 빈 문자열 값을 제공합니다.

수표없이 수행하고 다음과 같이 씁니다.

 const url = window.location.href;

… 빌드는 다음과 같이 보이는 오류로 실패합니다.

 페이지 용 정적 HTML을 구축하지 못했습니다 -2.431
오류 #95312 
서버 측 렌더링 중에 "창"을 사용할 수 없습니다.

앞에서 언급했듯이 브라우저가 빌드 시간 동안 존재하지 않기 때문에 발생합니다. 그것은이 방법의 큰 단점입니다. 페이지의 정적 버전에 URL이 필요한 경우 사용할 수 없습니다.

그러나 큰 이점도 있습니다! 다른 구성 요소 내부에 깊숙이 중첩 된 구성 요소에서 창 객체에 액세스 할 수 있습니다. 다시 말해, 부모 구성 요소에서 URL 소품을 드릴 필요는 없습니다.

방법 2 : 소품에서 위치 데이터의 HREF 속성을 얻으십시오.

Gatsby의 모든 페이지 및 템플릿 구성 요소에는 현재 페이지에 대한 정보가 포함 된 위치 소품이 있습니다. 그러나 Window.location과 달리이 소품은 모든 페이지에 있습니다.

개츠비 문서 인용 :

가장 좋은 점은 모든 페이지에서 위치 소품을 사용할 수 있다는 것입니다.

그러나 여기에 캐치가있을 수 있습니다. Gatsby를 처음 사용하는 경우 해당 소품을 콘솔에 로그인하고 Window.location과 거의 동일하게 보이지만 HREF 속성도 포함되어 있음을 알 수 있습니다. 이것이 어떻게 가능합니까? 글쎄, 그렇지 않습니다. HREF 소품은 런타임 중에 만 있습니다.

이것에 대한 최악의 점은 위치를 먼저 확인하지 않고 직접 위치를 사용하면 빌드 시간 동안 오류가 발생하지 않는다는 것입니다.

이 모든 것은 우리가 모든 페이지에 위치한 위치 소품에 의존 할 수 있지만 빌드 시간 동안 HREF 속성을 가질 것으로 기대할 수는 없습니다. 이를 알고 있으며,이 방법을 페이지의 정적 버전의 마크 업에 있어야하는 중요한 경우 에이 방법을 사용하지 마십시오.

이 방법을 사용하여 이전 예제를 다시 작성해 봅시다.

 'React'에서 React React;

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

  반품 (
    
  );
};

내보내기 기본 페이지;

이것은 최상위 페이지 또는 템플릿 구성 요소 여야합니다. 어디서나 가져 와서 작동하기를 기대할 수 없습니다. 위치 소품은 정의되지 않습니다.

보시다시피,이 방법은 이전 방법과 매우 유사합니다. URL이 런타임 중에 만 필요한 경우에 사용하십시오.

그러나 정적 페이지의 마크 업에 전체 URL이 필요한 경우 어떻게해야합니까? 세 번째 방법으로 넘어 갑시다.

방법 3 : 위치 데이터에서 PathName 속성으로 현재 페이지 URL을 생성합니다.

이 게시물의 시작 부분에서 논의했듯이 정적 페이지에 전체 URL을 포함시켜야하는 경우 웹 사이트의 기본 URL을 어딘가에 지정하고 빌드 시간 동안 어떻게 든 가져와야합니다. 그렇게하는 방법을 보여 드리겠습니다.

예를 들어, 헤더에서 태그를 만들겠습니다. 페이지가 브라우저에 닿기 전에 전체 페이지 URL을 사용하는 것이 중요합니다. 그렇지 않으면 검색 엔진과 사이트 스크레이퍼는 빈 HREF 속성을 볼 수 있습니다.

다음은 계획입니다.

1. gatsby-config.js의 siteemetAdata에 siteUrl 속성을 추가하십시오.
2. 모든 구성 요소에서 SiteMetAdata를 검색하려면 정적 쿼리 후크를 만듭니다.
3. 그 후크를 사용하여 siteUrl을 얻으십시오.
4. 페이지의 경로와 결합하여 마크 업에 추가하십시오.

각 단계를 끊으 봅시다.

gatsby-config.js의 siteemetAdata에 siteUrl 속성을 추가하십시오

Gatsby에는 Gatsby-config.js라는 구성 파일이 있으며 SiteemetAdata 객체 내부에 사이트에 대한 글로벌 정보를 저장하는 데 사용할 수 있습니다. 그것은 우리에게 효과가 있으므로 해당 객체에 SiteUrl을 추가 할 것입니다.

 module.exports = {
  siteemetadata : {
    제목 : 'Dmitry Mayorov',
    설명 : 'Dmitry는 멋진 사이트를 구축하는 프론트 엔드 개발자입니다.',
    저자 : '@dmtrmrv',
    siteurl : 'https://dmtrmrv.com',
  }
};

모든 구성 요소에서 SiteMetadata를 검색하려면 정적 쿼리 후크 생성

다음으로 구성 요소에서 SiteMetadata를 사용하는 방법이 필요합니다. 운 좋게도 Gatsby는 정체 API를 가지고있어 우리가 그렇게 할 수 있습니다. 컴포넌트 내부의 usestaticquery hook를 직접 사용할 수 있지만 웹 사이트에서 사용하는 각 정적 쿼리에 대해 별도의 파일을 만드는 것이 좋습니다. 이로 인해 코드를 쉽게 읽을 수 있습니다.

이를 위해 사이트의 SRC 폴더 내부의 후크 폴더 내부에서 use-site-metadata.js라는 파일을 작성하고 다음 코드를 복사하여 붙여 넣으십시오.

 '개츠비'에서 {usestaticquery, graphql} import;

const usatesitemetadata = () => {
  const {site} = usestaticquery (
  그래프 QL
    쿼리 {
    사이트 {
      siteemetadata {
      제목
      설명
      작가
      siteUrl
      }
    }
    }
  `,
  );
  Return Site.SitemetAdata;
};

내보내기 기본 useitemetAdata;

제목, 설명, 저자 및 SiteemetAdata 객체에있는 다른 속성과 같은 모든 속성이 GraphQL 쿼리에 나타나는지 확인하십시오.

그 후크를 사용하여 siteUrl을 얻으십시오

재미있는 부분은 다음과 같습니다. 우리는 사이트 URL을 가져 와서 구성 요소 내부에 사용합니다.

 'React'에서 React React;
'React-Helmet'에서 헬멧 가져 오기;
'../hooks/use-site-metadata'에서 avest usatesitemetadata;

const page = ({location}) => {
  const {siteurl} = useitemetadata ();
  반품 (
    
      <link rel="canonical" href="%7B%60%24">
    헬멧>
  );
};

내보내기 기본 페이지;

고장합시다.

3 행에서 우리는 구성 요소로 만든 useitemetadata 후크를 가져옵니다.

 '../hooks/use-site-metadata'에서 avest usatesitemetadata;

그런 다음 6 행에서 우리는 그 데이터를 파괴하여 SiteUrl 변수를 생성합니다. 이제 빌드 및 런타임 중에 사용할 수있는 사이트 URL이 있습니다. 달콤한!

 const {siteurl} = useitemetadata ();

사이트 URL을 페이지 경로와 결합하여 마크 업에 추가하십시오.

이제 두 번째 방법의 위치 소품을 기억하십니까? 그것의 가장 큰 장점은 빌드 및 런타임 동안 PathName 속성을 포함한다는 것입니다. 어디로 가고 있는지 보시겠습니까? 우리가해야 할 일은 두 가지를 결합하는 것입니다.

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

이것은 아마도 브라우저에서 그리고 생산 빌드에서 작동하는 가장 강력한 솔루션 일 것입니다. 나는 개인적 으로이 방법을 가장 많이 사용합니다.

이 예에서는 React Helmet을 사용하고 있습니다. 들어 본 적이 없다면 React Applications에서 헤드 섹션을 렌더링하는 도구입니다. Darrell Hoffman은 CSS- 트릭에 대한 좋은 설명을 썼습니다.

방법 4 : 서버 측에서 현재 페이지 URL을 생성합니다.

무엇?! 방금 서버라고 했습니까? Gatsby가 정적 사이트 생성기가 아닌가? 예, 서버라고 말했습니다. 그러나 그것은 전통적인 의미의 서버가 아닙니다.

이미 알고 있듯이 Gatsby는 빌드 시간 동안 정적 페이지를 생성합니다. 그것이 이름이 오는 곳입니다. 그 점은 Gatsby가 이미 제공하는 여러 API를 사용하여 해당 프로세스에 연결할 수 있다는 것입니다.

우리에게 가장 관심이있는 API는 Onrenderbody라고 불립니다. 대부분의 경우 사용자 정의 스크립트와 스타일을 페이지에 주입하는 데 사용됩니다. 그러나 이것 (및 다른 서버 측 API)에서 흥미로운 점은 PathName 매개 변수가 있다는 것입니다. 즉, "서버에서"현재 페이지 URL을 생성 할 수 있습니다.

이 방법을 개인적으로 사용하여 헤드 섹션에 메타 태그를 추가하지 않겠습니다. 세 번째 방법이 더 적합하기 때문입니다. 그러나 예를 들어, Onrenderbody를 사용하여 사이트에 표준 링크를 추가 할 수있는 방법을 보여 드리겠습니다.

서버 측 API를 사용하려면 사이트의 루트 폴더에있는 Gatsby-SSR.JS라는 파일에 코드를 작성해야합니다. 헤드 섹션에 링크를 추가하려면 다음과 같은 내용을 작성합니다.

 const react = require ( 'react');
const config = require ( './ gatsby-config');

Exports.onrenderbody = ({pathName, setheadcomponents}) => {
  세게 폰트 (
    <link rel="canonical" href="%7B%60%24">,
  ]);
};

이 코드를 조금씩 깨뜨리겠습니다.

1 행에 반응이 필요합니다. JSX 구문을 작동시켜야합니다. 그런 다음 2 행에서 Gatsby-config.js 파일의 데이터를 구성 변수로 가져옵니다.

다음으로, 우리는 Onrenderbody 내부의 SetheadComponents 메소드를 호출하고 사이트 헤더에 추가 할 구성 요소 배열을 전달합니다. 우리의 경우, 그것은 단지 하나의 링크 태그입니다. 그리고 링크 자체의 HREF 속성을 위해 SiteUrl과 PathName을 결합합니다.

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

앞서 말했듯이, 이것은 아마도 헤드 섹션에 태그를 추가하는 방법이 아니지만 Gatsby에는 서버 렌더링 단계에서 특정 페이지에 대해 URL을 생성 할 수있는 서버 측 API가 있음을 아는 것이 좋습니다.

Gatsby와의 서버 측 렌더링에 대해 자세히 알고 싶다면 공식 문서를 읽어 보시기 바랍니다.

그게 다야!

보시다시피, Gatsby에서 현재 페이지의 URL을 얻는 것은 그다지 복잡하지 않습니다. 특히 핵심 개념을 이해하고 사용할 수있는 도구를 알면 특히 복잡하지 않습니다. 다른 방법을 알고 있다면 의견에 알려주십시오!

자원

• JavaScript 창 인터페이스
• 개츠비 빌드 프로세스의 개요
• 소품의 위치 데이터
• 개츠비 서버 렌더링 API
• 반응 헬멧

위 내용은 Gatsby에서 현재 페이지 URL을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!