AdminLTE は、純粋に HTML と CSS から構築された優れたバックグラウンド テンプレートです。この記事では、AdminLTE と CSS をエレガントに統合する方法について説明します。 Laravel を使用すると、Bower を使用して AdminLTE をタイムリーに更新および管理できます。
Laravel
AdminLTE 2.3.2
Bower
Composer
よくわからない場合は、公式 Web サイトにアクセスしてドキュメントのリンクを参照してください
ここでは、コマンドラインを直接使用します
composer create-project laravel/laravel myapp --prefer-dist
このコマンドで、myapp という名前の新しい Laravel プロジェクトを作成しました。成功すると、下の図が表示されます
myapp/public フォルダーに移動します
cd myapp/public
このフォルダーで次のコマンドを実行します
bower install admin-lte
完了すると、次のコマンドが表示されます。追加の bower_componets フォルダーがあり、このフォルダー内に AdminLTE が表示されます
Laravel はここで優れたものを使用しています テンプレート エンジン Blade を最大限に活用するために、 Blade では、いくつかの一般的な HTML スタート ページを Blade テンプレートに適用する必要があります。まず、resources/views フォルダーにビューを作成し、admin_template.blade.php という名前を付けます。次に、このページに対応するルートを作成します。以下に作成したように
Route::get('admin', function () { return view('admin_template'); });次に、bower_components/admin-lte/starter.html のコンテンツをビュー テンプレートにコピーし、関連するリンクを AdminLTE の対応するディレクトリにポイントします。以下は次のとおりです。私の予備設定:
<script src="{{ asset("/bower_components/AdminLTE/plugins/jQuery/jQuery-2.1.4.min.js")}}"></script><!-- Bootstrap 3.3.5 --><script src="{{ asset("/bower_components/AdminLTE/bootstrap/js/bootstrap.min.js")}}"></script><!-- AdminLTE App --><script src="{{ asset("/bower_components/AdminLTE/dist/js/app.min.js")}}"></script>これと同様に、css と js の関連リンクを対応するディレクトリにポイントし、localhost:8000/admin を通じてページの変更を確認します。この時点でページは次のようになります。以下に示すように:
AdminLTE を使用するためのリソースがすべて揃ったので、メイン ビューに最後の仕上げを追加しましょう。このテンプレートを 3 つのファイル、sidebar.blade.php、に分割します。 header.blade.php、footer.blade.php
この3つのファイルの中身は、それぞれadmin_template.blade.phpheader部分、side部分、footer部分です。 この3つの部分を切り出します。ファイルを順番に。
テンプレートのパーソナライズを分離したので、次に示すように、コンテンツの動的読み込み用に初期の admin_template.blade.php
テンプレートを設定する必要があります。
<!DOCTYPE html><html>head><meta charset="UTF-8"><title>{{ $page_title or "AdminLTE Dashboard" }}</title><meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'><!-- Bootstrap 3.3.2 --><link href="{{ asset("/bower_components/AdminLTE/bootstrap/css/bootstrap.min.css") }}" rel="stylesheet" type="text/css" /><!-- Font Awesome Icons --><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /><!-- Ionicons --><link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" /><!-- Theme style --><link href="{{ asset("/bower_components/AdminLTE/dist/css/AdminLTE.min.css")}}" rel="stylesheet" type="text/css" /><!-- AdminLTE Skins. We have chosen the skin-blue for this starter page. However, you can choose any other skin. Make sure you apply the skin class to the body tag so the changes take effect.--><link href="{{ asset("/bower_components/AdminLTE/dist/css/skins/skin-blue.min.css")}}" rel="stylesheet" type="text/css" /><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]--></head><body class="hold-transition skin-blue sidebar-mini"><div class="wrapper"><!-- Header -->@include('header')<!-- Sidebar -->@include('sidebar')<!-- Content Wrapper. Contains page content --><div class="content-wrapper"> <!-- Content Header (Page header) --> <section class="content-header"> <h1> {{ $page_title or "Page Title" }} <small>{{ $page_description or null }}</small> </h1> <!-- You can dynamically generate breadcrumbs here --> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li> <li class="active">Here</li> </ol> </section> <!-- Main content --> <section class="content"> <!-- Your Page Content Here --> @yield('content') </section><!-- /.content --></div><!-- /.content-wrapper --><!-- Footer -->@include('footer')<aside class="control-sidebar control-sidebar-dark"><!-- Create the tabs --><ul class="nav nav-tabs nav-justified control-sidebar-tabs"> <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li> <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li></ul><!-- Tab panes --><div class="tab-content"> <!-- Home tab content --> <div class="tab-pane active" id="control-sidebar-home-tab"> <h3 class="control-sidebar-heading">Recent Activity</h3> <ul class="control-sidebar-menu"> <li> <a href="javascript::;"> <i class="menu-icon fa fa-birthday-cake bg-red"></i> <div class="menu-info"> <h4 class="control-sidebar-subheading">Langdon's Birthday</h4> <p>Will be 23 on April 24th</p> </div> </a> </li> </ul> <!-- /.control-sidebar-menu --> <h3 class="control-sidebar-heading">Tasks Progress</h3> <ul class="control-sidebar-menu"> <li> <a href="javascript::;"> <h4 class="control-sidebar-subheading"> Custom Template Design <span class="label label-danger pull-right">70%</span> </h4> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-danger" style="width: 70%"></div> </div> </a> </li> </ul> <!-- /.control-sidebar-menu --> </div> <!-- /.tab-pane --> <!-- Stats tab content --> <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div> <!-- /.tab-pane --> <!-- Settings tab content --> <div class="tab-pane" id="control-sidebar-settings-tab"> <form method="post"> <h3 class="control-sidebar-heading">General Settings</h3> <div class="form-group"> <label class="control-sidebar-subheading"> Report panel usage <input type="checkbox" class="pull-right" checked> </label> <p> Some information about this general settings option </p> </div> <!-- /.form-group --> </form> </div> <!-- /.tab-pane --></div></aside><!-- /.control-sidebar --><!-- Add the sidebar's background. This div must be placed immediately after the control sidebar --><div class="control-sidebar-bg"></div></div><!-- ./wrapper --><!-- REQUIRED JS SCRIPTS --><!-- jQuery 2.1.3 --><script src="{{ asset ("/bower_components/AdminLTE/plugins/jQuery/jQuery-2.1.3.min.js") }}"></script><!-- Bootstrap 3.3.2 JS --><script src="{{ asset ("/bower_components/AdminLTE/bootstrap/js/bootstrap.min.js") }}" type="text/javascript"></script><!-- AdminLTE App --><script src="{{ asset ("/bower_components/AdminLTE/dist/js/app.min.js") }}" type="text/javascript"></script><!-- Optionally, you can add Slimscroll and FastClick plugins. Both of these plugins are recommended to enhance the user experience --></body></html>上記のコードでは、メイン コンテンツを含む contentn を追加し、さまざまなページのページ タイトルを追加し、ダッシュボード .blade.php という名前に変更しました。このテンプレートはこれで使用できるようになりました。
これまでに行ったことを確認するために、簡単なページを作成します
1. test.blade.php を作成します
@extends('dashboard')@section('content')<div class='row'> <div class='col-md-6'> <!-- Box --> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">Randomly Generated Tasks</h3> <div class="box-tools pull-right"> <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> </div> </div> <div class="box-body"> @foreach($tasks as $task) <h5> {{ $task['name'] }} <small class="label label-{{$task['color']}} pull-right">{{$task['progress']}}%</small> </h5> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-{{$task['color']}}" style="width: {{$task['progress']}}%"></div> </div> @endforeach </div><!-- /.box-body --> <div class="box-footer"> <form action='#'> <input type='text' placeholder='New task' class='form-control input-sm' /> </form> </div><!-- /.box-footer--> </div><!-- /.box --> </div><!-- /.col --> <div class='col-md-6'> <!-- Box --> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">Second Box</h3> <div class="box-tools pull-right"> <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> </div> </div> <div class="box-body"> A separate section to add any kind of widget. Feel free to explore all of AdminLTE widgets by visiting the demo page on <a href="https://almsaeedstudio.com">Almsaeed Studio</a>. </div><!-- /.box-body --> </div><!-- /.box --> </div><!-- /.col --></div><!-- /.row -->@endsection2. TestController.php を作成します
php artisan make:controller TestController --plain
以下はこのコントローラーのコード部分です:
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\Requests; use App\Http\Controllers\Controller; class TestController extends Controller { public function index() { $data['tasks'] = [ [ 'name' => 'Design New Dashboard', 'progress' => '87', 'color' => 'danger' ], [ 'name' => 'Create Home Page', 'progress' => '76', 'color' => 'warning' ], [ 'name' => 'Some Other Task', 'progress' => '32', 'color' => 'success' ], [ 'name' => 'Start Building Website', 'progress' => '56', 'color' => 'info' ], [ 'name' => 'Develop an Awesome Algorithm', 'progress' => '10', 'color' => 'success' ] ]; return view('test')->with($data); } } 3. 対応するルート
Route::get('test', 'TestController@index'); を作成します。 4. 対応するページを開きます。間違いがなければ、次のようになります。
もちろん、質問がある場合は、以下にメッセージを残してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
