Перейти к содержимому
Главная страница » Как создать адаптивную страницу «О себе» с помощью Laravel, Sail и Tailwind CSS

Как создать адаптивную страницу «О себе» с помощью Laravel, Sail и Tailwind CSS

How To Build a Responsive About Me Page with Laravel, Sail, and Tailwind CSS

Введение

Laravel Sail — это среда разработки Docker, включенная по умолчанию в Laravel, начиная с версии 8. Она позволяет быстро настроить и запустить среду разработки PHP, адаптированную для запуска приложений Laravel со встроенной поддержкой NPM/Node.

В этом руководстве вы загрузите новое приложение Laravel с помощью Laravel Sail и создадите стилизованную целевую страницу «обо мне» с помощью Tailwind CSS, CSS-фреймворка, ориентированного на утилиты, предназначенного для быстрого создания пользовательских пользовательских интерфейсов. В конце у вас будет база, которую вы сможете использовать для дальнейшей разработки приложения Laravel с использованием Tailwind CSS для внешнего интерфейса и Sail для среды разработки.

Laravel Tailwind Адаптивная страница обо мне

Если вы предпочитаете использовать существующую кодовую базу, а не создавать проект с нуля, вы можете получить доступ к готовому коду демонстрационного приложения по адресу do-community/laravel-tailwind-starter на GitHub.

Предварительные условия

Хотя код, представленный в этом руководстве, должен бесперебойно работать в различных средах и системах, описанные здесь инструкции были протестированы в локальной системе Ubuntu 20.04, на которой работают Docker и Docker Compose. Независимо от вашей базовой операционной системы, вот что вам нужно настроить, чтобы начать работу:

  • Docker установлен на вашем локальном компьютере. Если вы используете Ubuntu 20.04, вы можете выполнить Steps 1 и 2 статьи «Как установить и использовать Docker в Ubuntu 20.04», чтобы настроить его. Пользователям Windows и MacOS необходимо вместо этого установить Docker Desktop.
  • Docker Compose установлен на вашем локальном компьютере. Docker Compose по умолчанию включен в Docker Desktop как для систем Windows, так и для MacOS, но пользователям Linux необходимо установить исполняемый файл Compose, следуя Step 1 инструкции по установке и использованию Docker Compose в Ubuntu 20.04.
  • Редактор кода для PHP (необязательно). Редактор кода помогает упростить чтение и форматирование кода, а также может повысить вашу производительность, указывая на проблемы перед выполнением кода. Вы можете следовать нашему руководству «Как настроить код Visual Studio для проектов PHP», чтобы настроить VSCode, бесплатный редактор кода, в вашей локальной среде разработки.

Шаг 1. Создание нового приложения Laravel с использованием сценария Laravel Builder

Для начала вы загрузите и выполните официальный сценарий сборки Laravel, который извлечет необходимые образы контейнеров Docker для создания среды разработки, а затем загрузит новое приложение в вашу текущую папку. Этот метод установки не требует установки PHP в вашей системе, требуется только загрузить и выполнить сценарий компоновщика, который настроит среду Docker, в которой вы сможете запустить настоящий установщик Laravel.

В конце сценарий запрашивает ваш пароль sudo , чтобы убедиться, что папка приложения имеет правильные разрешения для вашего системного пользователя. Вы можете получить доступ к URL-адресу сценария из своего браузера, чтобы проверить его содержимое перед запуском следующей команды. В этом примере мы используем имя мое приложение , но вы можете заменить его на другое имя:

 curl -s https://laravel.build/ | бить
 Выход
 Невозможно найти локально последнее изображение 'laravelsail/php80-composer:latest': Извлечение из laravelsail/php80-composer 852e50cd189d: Извлечение завершено 0266fc315b01: Извлечение завершено… Приложение готово! Создайте что-то удивительное. Парусные леса успешно установлены. Укажите свой пароль, чтобы мы могли внести окончательные изменения в разрешения вашего приложения. [sudo] пароль для Сэмми: Спасибо! Мы надеемся, что вы создадите что-то невероятное. Погрузитесь в игру с помощью: cd myapp && ./vendor/bin/sail up.

Когда установка будет завершена, получите доступ к новому каталогу приложения и запустите среду Sail с помощью:

  1.  CD мое приложение
  2.  ./vendor/bin/парус вверх

Это переведет среду в приоритетный режим, и вы сможете отслеживать журналы всех работающих контейнеров. Вы увидите, как запускаются несколько разных служб, использующих разные порты для связи друг с другом:

 Выход
 ... mailhog_1 | [HTTP] Привязка к адресу: 0.0.0.0:8025 ... laravel.test_1 | Запуск сервера разработки Laravel: http://0.0.0.0:80 ... meilisearch_1 | Сервер прослушивает: "http://0.0.0.0:7700" ... mysql_1 | 2021-06-23T01:15:24.327234Z 0 [Система] [MY-010931] [Сервер] /usr/sbin/mysqld: готов к подключениям. Версия: '8.0.25' сокет: '/var/run/mysqld/mysqld.sock' порт: 3306 MySQL Community Server – GPL. ... селен_1 | 01:14:57.417 ИНФОРМАЦИЯ [SeleniumServer.boot] — сервер Selenium запущен и работает на порту 4444 ... redis_1 | 1:M, 23 июня 2021 г., 01:14:54.243 * Режим работы = автономный, порт = 6379. …

Это службы, настроенные по умолчанию в средах Sail. Более подробную информацию о каждом из них можно найти в официальной документации Sail.

Затем откройте приложение из браузера по адресу:

 http://localhost

Если все шаги прошли успешно, вы увидите такую страницу: Приветственная страница Laravel

Приложение теперь загружено.

Теперь вы можете остановить среду Sail, работающую на вашем терминале, набрав CTRL+C .

Шаг 2 — Использование Laravel Sail

Laravel Sail предлагает несколько ярлыков для управления средой разработки. Большинство команд и аргументов основаны на стандартном API Docker Compose.

Контроль окружающей среды

Чтобы перевести среду в фоновый режим, вы можете запустить:

  1.  ./vendor/bin/sail up -d

Чтобы остановить среду Sail, которая ранее была запущена в фоновом режиме, запустите:

  1.  ./vendor/bin/sail stop

Это не приведет к удалению подключенных сетей или томов.

Чтобы вернуть среду, которая ранее была остановлена с помощью команды sail stop , вы можете использовать:

  1.  ./vendor/bin/sail start

Чтобы остановить среду, а также delete all associated resources такие как тома и сети, вы можете использовать команду sail down . Обратите внимание, что эта команда удалит любые данные, которые были созданы ранее и доступны только внутри контейнеров, например записи, хранящиеся в базе данных.

  1.  ./vendor/bin/плывите вниз
 Выход
 Остановка laravel-tailwind-starter_laravel.test_1 ... готово Остановка laravel-tailwind-starter_redis_1 ... готово Остановка laravel-tailwind-starter_selenium_1 ... готово Остановка laravel-tailwind-starter_mysql_1 ... готово Остановка laravel-tailwind-starter_mailhog_1 .. . сделано Остановка laravel-tailwind-starter_meilisearch_1 ... готово Удаление laravel-tailwind-starter_laravel.test_1 ... готово Удаление laravel-tailwind-starter_redis_1 ... готово Удаление laravel-tailwind-starter_selenium_1 ... готово Удаление laravel-tailwind-starter_mysql_1 ... сделано Удаление laravel-tailwind-starter_mailhog_1 ... сделано Удаление laravel-tailwind-starter_meilisearch_1 ... сделано Удаление сети laravel-tailwind-starter_sail

Проверка статуса и журналов

Если ваша среда не работает, восстановите ее с помощью:

  1.  ./vendor/bin/sail up -d

Когда ваша среда запущена и работает, вы можете проверить состояние всех активных контейнеров с помощью:

  1.  ./vendor/bin/sail ps
 Выход
 Имя Состояние команды Порты ---------------------------------------------- -------------------------------------------------- --------------------------------- myapp_laravel.test_1 start-container Up 0.0.0.0:80->80/tcp ,:::80->80/tcp, 8000/tcp myapp_mailhog_1 MailHog Up 0.0.0.0:1025->1025/tcp,:::1025->1025/tcp, 0.0.0.0:8025->8025/tcp,: ::8025->8025/tcp myapp_meilisearch_1 tini -- /bin/sh -c ./meili ... Up (работоспособно) 0.0.0.0:7700->7700/tcp,:::7700->7700/tcp myapp_mysql_1 докер -entrypoint.sh mysqld Работает (работоспособно) 0.0.0.0:3306->3306/tcp,:::3306->3306/tcp, 33060/tcp myapp_redis_1 docker-entrypoint.sh redis ... Работает (работоспособно) 0.0.0.0 :6379->6379/tcp,:::6379->6379/tcp myapp_selenium_1 /opt/bin/entry_point.sh Up 4444/tcp

Вывод команды sail ps сообщит вам, какие контейнеры, относящиеся к этой конкретной среде, в данный момент активны, какие порты перенаправляются и, что более важно, в каком состоянии находится каждый контейнер. В выводе предыдущего примера все службы работают.

Чтобы проверить журналы контейнеров, когда вы запускаете свою среду в фоновом режиме, вы можете использовать:

  1.  ./vendor/bin/sail журналы

Это покажет вам последние журналы всех служб.

 Attaching to laravel-tailwind-starter_laravel.test_1, laravel-tailwind-starter_mailhog_1, laravel-tailwind-starter_mysql_1, laravel-tailwind-starter_redis_1, laravel-tailwind-starter_selenium_1, laravel-tailwind-starter_meilisearch_1 ... mysql_1 | 2021-06-24T15:08:06.435530Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.25' socket: '/var/run/mysqld/mysqld.sock' port: 3306 MySQL Community Server - GPL. ... meilisearch_1 | [2021-06-24T15:16:38Z INFO actix_web::middleware::logger] 127.0.0.1:60874 "GET /health HTTP/1.1" 200 22 "-" "Wget" 0.000056 ... laravel.test_1 | [Thu Jun 24 15:08:07 2021] PHP 8.0.7 Development Server (http://0.0.0.0:80) started ... selenium_1 | 15:08:06.864 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444 ... redis_1 | 1:M 24 Jun 2021 15:08:05.280 * Ready to accept connections ... mailhog_1 | 2021/06/24 15:08:05 Serving under http://0.0.0.0:8025/

Вы также можете просмотреть журналы каждой службы, указав дополнительный аргумент при вызове команды:

  1.  ./vendor/bin/sail журналы redis
 Выход
 Прикрепление к laravel-tailwind-starter_redis_1 redis_1 | 1:C 24 июня 2021 15:08:05.278 # oO0OoO0OoO0Oo Redis запускается oO0OoO0OoO0Oo redis_1 | 1:C 24 июня 2021 г. 15:08:05.278 # Redis версия = 6.2.4, биты = 64, коммит = 00000000, изменено = 0, pid = 1, только что началось ... redis_1 | 1:M 24 июня 2021 15:08:05.280 * Использование памяти RDB при создании 0,77 Мб redis_1 | 1:M 24 июня 2021 г. 15:08:05.280 * БД загружена с диска: 0,000 секунды redis_1 | 1:M 24 июня 2021 15:08:05.280 * Готов принимать подключения

Бегущий Артизан и Композитор

Во время работы над приложением Laravel вам часто потребуется запускать artisan команды для создания, тестирования и управления вашим приложением. Вам также потребуется запускать команды composer для управления зависимостями PHP. В дополнение к API-интерфейсу Docker Compose по умолчанию, Sail предлагает полезные сочетания клавиш для выполнения этих команд в контейнере вашего приложения ( myapp_laravel.test_1 в примере выходных данных). При обычной настройке Docker Compose запуск Artisan будет выглядеть так:

Только с Docker Compose
 docker-compose exec app php artisan

В Sail эквивалентный вызов сокращается до:

Бегущий ремесленник с парусом
  1.  ./vendor/bin/sail artisan

Вы можете запустить Composer аналогичным образом:

Бегущий композитор с парусом
  1.  ./vendor/bin/sail композитор

Для получения дополнительной информации обо всех доступных функциях и командах посетите официальную документацию Laravel Sail.

Теперь вы знакомы с тем, как управлять средой разработки Sail и как запускать команды в контейнере приложения. На следующем этапе вы настроите Tailwind CSS для дизайна и оформления целевой страницы.

Шаг 3 — Настройка CSS Tailwind с помощью Laravel

Далее вы установите и настроите Tailwind CSS для создания целевой страницы.

Убедитесь, что ваша среда Sail запущена и работает, затем установите зависимости внешнего интерфейса Laravel с помощью команды npm , которая используется для загрузки пакетов JavaScript и управления ими:

  1.  ./vendor/bin/sail установка npm
 Выход
 ... добавлено 1327 пакетов и проверено 1328 пакетов за 20 с. 99 пакетов ищут финансирование, запустите `npmfund` для получения подробной информации...

Затем установите Tailwind и его зависимости с помощью:

  1.  ./vendor/bin/sail npm install -D Tailwindcss@latest postcss@latest autoprefixer@latest
 Выход
 ... добавлено 9 пакетов, удалено 22 пакета, изменено 7 пакетов и проверено 1315 пакетов за 5с. 99 пакетов ищут финансирование, запустите `npmfund` для получения подробной информации...

Далее вам нужно будет создать файл конфигурации для Tailwind. Для этого вы будете использовать npx , что означает «исполнитель пакетов Node» и позволяет выполнять пакет Node. Следующая команда npx создаст новую конфигурацию Tailwind по умолчанию для вашего приложения:

  1.  ./vendor/bin/sail npx Tailwindcss инициализация

Это создаст новый файл конфигурации с именем tailwind.config.js в корневом каталоге вашего проекта со следующим содержимым:

хвостовой ветер.config.js
 module . exports = { purge : [ ] , darkMode : false , // or 'media' or 'class' theme : { extend : { } , } , variants : { extend : { } , } , plugins : [ ] , }

Хотя существуют разные способы настройки Tailwind внутри проекта, в этом руководстве мы настроим Tailwind с помощью Laravel Mix и веб-пакета. Обе библиотеки используются для компиляции и вывода ресурсов внешнего интерфейса.

Откройте файл webpack.mix.js с помощью редактора кода. Это будет выглядеть так:

 mix . js ( 'resources/js/app.js' , 'public/js' ) . postCss ( 'resources/css/app.css' , 'public/css' , [ // ] ) ;

Laravel Mix использует PostCSS для компиляции ресурсов CSS. Удалите символы // и добавьте следующую выделенную строку, которая добавит CSS Tailwind в список ресурсов CSS для обработки:

Удалите символы // и включите следующую выделенную строку, которая требует наличия Tailwind в качестве плагина PostCSS:

вебпак.mix.js
 mix . js ( "resources/js/app.js" , "public/js" ) . postCss ( "resources/css/app.css" , "public/css" , [ require ( "tailwindcss" ) , ] ) ;

Сохраните файл после внесения этого изменения.

Затем включите Tailwind в основной CSS-файл приложения. Откройте resources/css/app.css в редакторе кода и добавьте в этот файл следующие 3 строки:

ресурсы/css/app.css
 @tailwind base; @tailwind components; @tailwind utilities;

Сохраните, когда закончите.

Далее вам нужно будет создать внешние ресурсы с помощью NPM:

  1.  ./vendor/bin/sail npm run dev

Вы получите вывод, аналогичный следующему, со строкой, похожей на выделенную часть Compiled Successfully , которая указывает, что вы интегрировали все компоненты в свою среду Sail:

 Выход
 Ларавел Микс v6.0.24 ✔ Скомпилировано успешно через 5515 мс ────────────────────┬───────────┐ │ Файл │ Размер │ ├──────────── ────────────────────────────────────────────────── ─────┼─────────┤ │ /js/app.js │ 597 КиБ │ │ css/app.css │ 3,81 МиБ │ └────────── ────────────────────────────────────────────────── ──────┴──────────┘ веб-пакет успешно скомпилирован

Теперь Tailwind настроен, и вы создали внешние ресурсы для своего сайта… На следующем шаге вы создадите новую целевую страницу для своего приложения.

Шаг 4 — Создание целевой страницы

Имея конфигурацию Tailwind, вы можете приступить к созданию интерфейсных представлений вашего приложения. В Laravel шаблоны обычно хранятся в каталоге resources/views . Страница, которую вы видели раньше при открытии приложения из браузера ( http://localhost ), определяется в одном шаблоне с именем welcome.blade.php в этом каталоге.

В редакторе кода откройте новый файл index.blade.php в каталоге resources/views .

В следующем примере шаблона определяется HTML-страница «обо мне» с несколькими нестилизованными элементами. Здесь используется пример изображения аватара, но вы можете заменить его собственным изображением.

Создайте новый каталог img в общедоступной папке приложения:

  1.  mkdir общедоступный/img

Сохраните предпочитаемое изображение в этом новом каталоге под именем profile_image.png .

В следующем примере обратите внимание на использование выделенных вспомогательных строк {{ asset… }} для определения путей как для CSS, так и для файлов изображений. Эта функция выводит правильный общедоступный путь для ресурсов приложения, расположенных в public каталоге.

Скопируйте это содержимое в свой index.blade.php :

ресурсы/представления/index.blade.php
  doctype html > < html lang = " en " > < head > < meta charset = " utf-8 " > < title > Sammy the Shark - About Page  title > < meta name = " description " content = " My Application Description " > < meta name = " author " content = " Sammy " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " /> < link href = " {{ актив('css/app.css') }} " rel = " таблица стилей " >  head > < body > < div > < img src = " {{ актив('img/profile_image.png') }} " width = " 200 " alt = " avatar " /> < h1 > Акула Сэмми  h1 > < p > Создатель контента  p > < p > Здравствуйте, я Сэмми. Я дружелюбный акула, интересующийся Linux , программирование и сообщество. Вы можете узнать больше обо мне по следующим ссылкам:  p > < div > < div > < a href = " https://twitter.com/digitalocean " > Twitter  a > < / div > < div > < a href = " https://www.linkedin.com/company/digitalocean " > LinkedIn  a >  div > < div > < a href = " https://instagram.com /thedigitalocean " > Instagram < / a >  div >
> < / div > body > html >

Сохраните файл, когда закончите редактировать его содержимое.

Теперь отредактируйте файл routes/web.php , чтобы изменить основной маршрут, чтобы он использовал вновь созданный шаблон. Откройте этот файл с помощью редактора кода и замените welcome index , чтобы изменить представление, используемое основной конечной точкой приложения. Вот как будет выглядеть обновленное объявление маршрута, когда вы закончите:

маршруты/web.php
 Route :: get ( '/' , function ( ) { return view ( ' index ' ) ; } ) ;

Сохраните файл. Теперь вы можете перезагрузить страницу приложения в браузере, чтобы увидеть новую индексную страницу. Вы увидите такую страницу: Страница обо мне в Laravel с попутным ветром — базовый шаблон

По умолчанию Tailwind удаляет все стили из элементов, что дает вам свободу создавать свои представления путем комбинирования и смешивания служебных классов CSS Tailwind. В следующем разделе вы узнаете, как объединить некоторые из этих служебных классов, чтобы создать адаптивную страницу «обо мне».

Шаг 5. Стилизация целевой страницы с помощью Tailwind CSS

Создание адаптивных страниц — важное требование к разработке внешнего интерфейса, поскольку пользователи могут получать доступ к вашему веб-сайту или приложению с множества разных устройств, каждое из которых имеет разные размеры экрана.

Tailwind предлагает селекторы, которые могут применять стили в зависимости от размера экрана. Таким образом, вы можете создавать адаптивные контейнеры, устанавливая наименьшую ширину по умолчанию и добавляя дополнительные адаптивные размеры для больших экранов. Например, элемент, установленный с class="w-3/4 lg:w-1/2" установит ширину по умолчанию, равную 3 четверти ширины родительского элемента, что будет справедливо для экранов меньшего размера, но для экранов большего размера. ( lg: selector), он будет использовать половину ширины родительского элемента.

Обратите внимание, что вы можете комбинировать адаптивные селекторы с любым служебным классом, а не только с теми, которые связаны с размером элемента. Например, вы можете скрыть элемент в определенной точке останова, изменить его цвета или даже превратить его в сетку с переменным количеством столбцов.

Вы можете найти все доступные адаптивные селекторы и их эквиваленты в официальной документации Tailwind.

Следующий шаблон устанавливает адаптивную область контента в центре страницы с использованием фоновых градиентов и примера изображения аватара. Для кнопок используется система сетки, которая разбивает контейнер на три столбца, начиная со средних экранов, но заставляет кнопки занимать весь размер контейнера при доступе к странице с меньших экранов.

Откройте файл resources/views/index.blade.php , который вы создали на предыдущем шаге, в редакторе кода и замените его содержимое следующим шаблоном:

ресурсы/представления/index.blade.php
  doctype html > < html lang = " en " > < head > < meta charset = " utf-8 " > < title > Sammy the Shark - About Page  title > < meta name = " description " content = " My Application Description " > < meta name = " author " content = " Sammy " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " /> < link href = " {{ asset('css/app.css') }} " rel = " stylesheet " >  head > < body class = " bg-gradient-to-r from-blue-400 via-purple-600 to-blue-700 " > < div class = " w-3/4 lg:w-1/2 mx-auto rounded-md bg-gray-200 shadow-lg m-20 p-10 text-center " > < img src = " {{ asset('img/profile_image.png') }} " class = " w-32 lg:w-1/6 bg-blue-600 mx-auto rounded-lg mb-4 " alt = " avatar " /> < h1 class = " text-3xl " > Sammy the Shark  h1 > < p class = " text-gray-500 pb-4 " > Content Creator  p > < p class = " text-gray-700 mb-6 " > Hello, I'm Sammy. I am a friendly shark interested in Linux, coding, and community. You can find out more about me in the following links:  p > < div class = " grid grid-cols-1 md:grid-cols-3 grid-flow-row gap-6 " > < div class = " px-4 py-2 bg-blue-600 text-gray-100 rounded-md mr-4 hover:bg-blue-700 " > < a href = " https://twitter.com/digitalocean " > Twitter  a >  div > < div class = " px-4 py-2 bg-blue-600 text-gray-100 rounded-md mr-4 hover:bg-blue-700 " > < a href = " https://www.linkedin.com/company/digitalocean " > LinkedIn  a >  div > < div class = " px-4 py-2 bg-blue-600 text-gray-100 rounded-md mr-4 hover:bg-blue-700 " > < a href = " https://instagram.com/thedigitalocean " > Instagram  a >  div >  div >  div >  body >  html >

Этот шаблон создаст следующую страницу:

Конечный результат — страница обо мне в Laravel с Tailwind

А вот как страница адаптируется к разным размерам экрана:

Laravel Tailwind Адаптивная страница обо мне

В обновленном шаблоне к каждому элементу HTML применено несколько классов Tailwind и селекторов. Tailwind использует специальную номенклатуру своих служебных классов для создания адаптивных макетов. В примере шаблона используется каждое из следующих действий для создания конечного результата:

  • bg-gradient-to-r : создает градиент слева r , используя указанные цвета.
  • w-1/3 : устанавливает ширину элемента в одну треть ( 1/3 ) ширины родительского элемента. В Tailwind существует множество различных способов настройки ширины элемента.
  • mx-auto : центрирует элемент.
  • rounded-md : создает закругленные углы «среднего» (md) размера.
  • shadow-lg : создает эффект тени «большого» (lg) размера.
  • mr-* и другие варианты m : используются для настройки полей элемента.
  • pb-* и другие варианты p : используются для настройки заполнения элемента.
  • hover:bg-blue-700 : меняет цвет фона выбранного элемента при наведении курсора мыши.

Проверьте официальную документацию Tailwind для получения полной информации обо всех доступных служебных классах.

Заключение

В этом уроке вы загрузили новое приложение Laravel, используя Laravel Sail и Tailwind CSS. Вы также создали адаптивную целевую страницу «обо мне», используя мощные служебные классы Tailwind.

Если вы хотите создать более сложную целевую страницу и в процессе узнать больше о Tailwind, вы можете воспользоваться нашим руководством «Как создать стилизованную целевую страницу с помощью Tailwind CSS», чтобы получить подробные инструкции о том, как создать полноценную страницу веб-сайта с ее помощью. рамки.

Если вы хотите узнать больше о Laravel в руководстве для проектов, вы можете обратиться к нашей серии статей «Как создать целевую страницу со ссылками на PHP с помощью Laravel». Дополнительную информацию о PHP можно найти в нашем теге PHP.



Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *