でカスタム404ページを作成する

2436 ワード
vue gridsome webdev テキストリンク
先日、私は2009年に遊んでいましたGravit これを作りました.

そして“HMM、私はこれと何かを見つける必要があります.”私は、それが完全に私のサイトに合うと決めました404 page .
それで、それがされる方法を見ましょう!

Gridsomeの404Vueファイル


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


デフォルトでは、存在しないパスに移動すると、「404 - not found」というプレーンページが返されます.
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ページを見たことがありますか?以下の共有あなたのお気に入り!👇
amd-gpu in ubuntu
210403 JavaScript jQuery Word Puzzle解答