Gridsome에서 사용자 지정 404 페이지 만들기

다른 날 나는 Gravit에서 놀다가 이것을 만들었습니다.



그리고 "음, 이것과 관련이 있는 것을 찾아야 해."라고 생각했습니다. 404 page 으로 내 사이트에 완벽하게 맞을 것이라고 결정했습니다.

그럼 어떻게 되는지 봅시다!

Gridsome의 404.vue 파일

add a 404.vue page to your src/pages/ folder

기본적으로 존재하지 않는 경로로 이동하면 h1 태그에 "404 - 찾을 수 없음"이 있는 일반 페이지가 반환됩니다. 사용자가 이제 페이지로 돌아가거나 URL을 직접 변경해야 하므로 특별히 흥미롭거나 도움이 되지 않습니다. .

Gridsome은 기본 404 페이지를 매우 간단하게 교체합니다. 404.vue 폴더에 src/pages/ 페이지를 추가합니다.

오류 메시지를 표시하는 것 외에도 사용자가 유효한 페이지로 쉽게 돌아갈 수 있도록 기본 레이아웃을 페이지에 적용하여 오류 페이지가 거슬리지 않게 했습니다.

글을 쓰는 시점에서 이것은 내 404 페이지 뒤에 있는 코드입니다.

//src/pages/404.vue

<template>
  <Layout>
    <div class="post max-w-4xl mx-auto text-center">
      <h1>
        404 - page not found
      </h1>
      <p>Oops! That page returns an</p>
      <g-image
        src="~/assets/errorsAllTheWayDown.png"
        width="500"
        quality="50"
        alt="error text with a rainbow gradient and shadows creating a pop-out 3d effect"
      />
    </div>
  </Layout>
</template>

이제 일부 사용자 정의가 완료되었으므로 재미있는 요소를 추가하여 404 페이지를 약간의 이스터 에그로 바꾸는 실험을 시작할 수 있습니다!


또한 available on RedBubble인 오류 이미지의 '플랫' 버전을 만들었습니다! 👀


최근에 흥미로운 오프라인 또는 404 페이지를 본 적이 있습니까? 아래에서 즐겨 찾기를 공유하십시오! 👇