2. Шаблон AdminLTE

Скачиваем AdminLTE .

Возьмем код из страницы AdminLTE-3.0.5\pages\examples\blank.html и перенесем его в наше представление resources/views/admin/index.blade.php .

Копируем в /resources/assets/ все нужные файлы для нашей страницы.

Объединение файлов в один с помощью webpack

Запишем в файл webpack.min.js:

mix.scripts([
'resources/assets/admin/plugins/jquery/jquery.min.js',
'resources/assets/admin/plugins/bootstrap/js/bootstrap.bundle.min.js',
'resources/assets/admin/plugins/bs-custom-file-input/bs-custom-file-input.js',
'resources/assets/admin/plugins/select2/js/select2.full.js',
'resources/assets/admin/js/adminlte.min.js',
'resources/assets/admin/js/demo.js',
'resources/assets/admin/js/my.js'
],
'public/assets/admin/admin.js');

mix.styles([
'resources/assets/admin/plugins/fontawesome-free/css/all.min.css',
'resources/assets/admin/plugins/select2/css/select2.css',
'resources/assets/admin/plugins/select2-bootstrap4-theme/select2-bootstrap4.css',
'resources/assets/admin/css/adminlte.min.css',
'resources/assets/admin/css/my.css'
],
'public/assets/admin/admin.css');


mix.copyDirectory('resources/assets/admin/plugins/fontawesome-free/webfonts', 'public/assets/admin/webfonts');
mix.copyDirectory('resources/assets/admin/img', 'public/assets/admin/img');

mix.copy('resources/assets/admin/css/adminlte.min.css.map', 'public/assets/admin/adminlte.min.css.map');
mix.copy('resources/assets/admin/js/adminlte.min.js.map', 'public/assets/admin/adminlte.min.js.map');

Порядок файлов лучше сохранить, как в исходной странице. В my.js и my.css можно писать свои стили и скрипты.

И запустим nodeJS в командной строке:

npm install

Чтобы обновлять наши изменения используем:

npm run dev

Поменяем ссылки в нашем шаблоне на новые. Для корректности используем хелпер asset. Пример:

<script src="{{ asset('assets/admin/admin.js') }}"></script>

Перезагружаем страницу и смотрим в консоли, какие файлы не могут подгрузится в наш шаблон:

Меняем пути на правильные и делаем:

npm run dev

 

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x