LALAVELで非常にクールな404/503のエラーページを作成!

20604 ワード
webdev javascript laravel php テキストリンク
こんにちは.今回はクール404/503を作りましょう.laravelによるエラーページ.

エラーページ構造
Laravelは、特別なコントローラを追加せずに、指定したディレクトリにファイルを配置するだけでエラーページを表示できます.だから非常にサポートしやすいです.
あなたがしなければならないのは400のようなファイルを追加することです.ブレード.resources->view->errorsディレクトリへのPHP.
また、ベースを追加したい.ブレード.PHPをレイアウトディレクトリにテンプレートにします.
ファイルツリーは以下のようになります.
└─resources
  └─views
    └─errors
           404.blade.php
      └─layouts
              base.blade.php

作りましょう!
さあ、実際にテンプレートなどを使って作りましょう.
完成したサイトのサンプルはGithubにアップロードされました.
https://github.com/ichii731/php-examples/tree/main/laravel_error-page

dev環境
ubuntu20.04 LTS
PHP 7.4.3
Laravel Framework 6.20.26
Template Engine: Blade

404ページテンプレート
今回は、dev commonityで紹介されたテンプレートの一部を変更して配布しました.オリジナルテンプレートcodepenはこちら.
それは数字をカウントし、404と503にそれらをアニメーションクールな探しているテンプレートです.
一見簡単に見えるかもしれませんが、JavaScriptの“for”ステートメントを使用して簡単な設定です.これを使います.

テンプレートのカスタマイズ
次の変更をしました.
  • はSSSをCSS
    • に変えました
  • は、資産ヘルパーで説明されるCSS← asset('filepath') .
  • は様々なエラーを処理するベースブレードを作成し、エラー内容に応じてディスプレイを切り替えるように変更しました.
    • @ yield (""を使用してエラー実装に依存して表示されるテキストを変更するプロセス.
    資産要素を入力した後、ファイルとディレクトリ構造は以下のようになります.


    サンプルコード

    ブレードファイル
    ベース:リソース/ビュー/エラー/レイアウト/ベース.ブレード.PHP
    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@yield('title')</title>
  <link rel='stylesheet' href='{{ asset('/css/flexgrid.min.css') }}'>
  <link rel="stylesheet" href="{{ asset('/css/style.css') }}">
</head>
<body>
  <!-- partial:index.partial.html -->
  <div class="container">
    <div class="row">
      <div class="xs-12 md-6 mx-auto">
        <div id="countUp">
          <div class="number" data-count="@yield('http-request')">0</div>
          <div class="text">@yield('title')</div>
          <div class="text">@yield('message')</div>
          <div class="text">@yield('detail')</div>
        </div>
      </div>
    </div>
  </div>
  <!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <script src="{{ asset('/js/[email protected]') }}"></script>
  <script src="{{ asset('/js/script.js') }}"></script>
</body>
</html>
    404エラー:リソース/ビュー/エラー/404.ブレード.PHP
    @extends('errors.layouts.base')
@section('http-request', '404')
@section('title', 'Page not found')
@section('message', 'This may not mean anything.')
@section('detail', "I'm probably working on something that has blown up.")
    403のような他の問題のために、500の内部のサーバーエラー、503のサービスが利用できないなど、ちょうど上記のファイルをコピーして、ペーストして、500.blade.phpのような何かを加えてください.

    CSS/JSアセット
    スタイルシート: public/css/style.CSS
    @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,500');
html,
body {
  width: 100%;
  height: 100%;
}
body {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/257418/andy-holmes-698828-unsplash.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  min-width: 100vw;
  font-family: "Roboto Mono", "Liberation Mono", Consolas, monospace;
  color: rgba(255,255,255,0.87);
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.container,
.container > .row,
.container > .row > div {
  height: 100%;
}
#countUp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
#countUp .number {
  font-size: 4rem;
  font-weight: 500;
}
#countUp .number + .text {
  margin: 0 0 1rem;
}
#countUp .text {
  font-weight: 300;
  text-align: center;
}
    パブリックスクリプト/JSスクリプト.js
    var formatThousandsNoRounding = function(n, dp){
  var e = '', s = e+n, l = s.length, b = n < 0 ? 1 : 0,
      i = s.lastIndexOf(','), j = i == -1 ? l : i,
      r = e, d = s.substr(j+1, dp);
  while ( (j-=3) > b ) { r = '.' + s.substr(j, 3) + r; }
  return s.substr(0, j + 3) + r + 
    (dp ? ',' + d + ( d.length < dp ? 
        ('00000').substr(0, dp - d.length):e):e);
};

var hasRun = false;

inView('#countUp').on('enter', function() {
    if (hasRun == false) {
        $('.number').each(function() {
            var $this = $(this),
                countTo = $this.attr('data-count');

            $({ countNum: $this.text()}).animate({
                countNum: countTo
            },
            {
                duration: 500,
                easing:'linear',
                step: function() {
                    $this.text(formatThousandsNoRounding(Math.floor(this.countNum)));
                },
                complete: function() {
                    $this.text(formatThousandsNoRounding(this.countNum));
                }
            });
        });
        hasRun = true;
    }
});

    試してみましょう
    アルティザンコマンドでシンプルなサーバーを起動しましょう.実際の動作はGIFイメージ以下です.
    php artisan serve

    クールじゃない?それを参照してください.
    私は、それをgithubの上でrepoに掲示します.お試しください.( GithubはLaravel diffディレクトリ/ファイルのみをプッシュします)
    https://github.com/ichii731/php-examples/tree/main/laravel_error-page
    あなたが好きならば、ブログとツイッターもチェックしてください:D
    [python]パッケージ
    スプレッドシート構文、展開演算子(spread演算子)-1