如何使用 Laravel、Sail 和 Tailwind CSS 创建响应式 "关于我 "页面

介绍

Laravel Sail是一个Docker开发环境,从Laravel版本8开始就默认包含在Laravel中,它允许您快速获得一个PHP开发环境,适合运行Laravel应用程序,内置支持NPM / Node。

在本指南中,您将使用 Laravel Sail 启动一个 新的 Laravel 应用程序并使用 Tailwind CSS创建一个有风格的关于我定位页面,这是一个用于快速构建自定义用户界面的实用性CSS框架。

Laravel Tailwind Responsive About Me Page

如果您宁愿从现有代码库中跟进,而不是从头开始创建该项目,您可以在GitHub上访问完成的演示应用程序代码(do-community/laravel-tailwind-starter)。

前提条件

虽然本指南中分享的代码应该在多个环境和系统中无缝工作,但在这里解释的说明是在 Ubuntu 20.04 运行 Docker 和 Docker Compose 的本地系统中测试的。

第1步:使用Laravel Builder脚本创建新的Laravel应用程序

要开始,您将下载并执行官方的Laravel Builder脚本,该脚本将引入必要的Docker容器图像来构建您的开发环境,然后在当前文件夹中启动一个新的应用程序。

最后,脚本请求您的sudo密码,以确保应用程序文件夹对您的系统用户有正确的权限。您可以从浏览器访问 script URL以验证其内容,然后运行下一个命令。

1curl -s https://laravel.build/myapp | bash

 1[secondary_label Output]
 2Unable to find image 'laravelsail/php80-composer:latest' locally
 3latest: Pulling from laravelsail/php80-composer
 4852e50cd189d: Pull complete 
 50266fc315b01: Pull complete 
 6…
 7Application ready! Build something amazing.
 8Sail scaffolding installed successfully.
 9
10Please provide your password so we can make some final adjustments to your application's permissions.
11
12[sudo] password for sammy: 
13
14Thank you! We hope you build something incredible. Dive in with: cd myapp && ./vendor/bin/sail up

安装完成后,访问新的应用程序目录,并获取 Sail 环境:

1cd myapp
2./vendor/bin/sail up

这将使环境处于前沿模式,因此您可以跟踪所有正在运行的集装箱的日志,您将看到几个不同的服务开始使用不同的端口相互通信:

 1[secondary_label Output]
 2...
 3mailhog_1 | [HTTP] Binding to address: 0.0.0.0:8025
 4...
 5laravel.test_1 | Starting Laravel development server: http://0.0.0.0:80
 6...
 7meilisearch_1 | Server listening on: "http://0.0.0.0:7700"
 8...
 9mysql_1 | 2021-06-23T01:15:24.327234Z 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.
10...
11selenium_1 | 01:14:57.417 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444
12...
13redis_1 | 1:M 23 Jun 2021 01:14:54.243 * Running mode=standalone, port=6379.
14…

这些是默认配置的服务在帆船环境中. 有关各自的更多信息,请参阅 官方帆船文档。

接下来,从您的浏览器访问应用程序:

1http://localhost

If all steps were successful, you’ll see a page like this: Laravel welcome page

目前,该应用程序已被 bootstrapped。

您现在可以通过键入CTRL+C来阻止在您的终端上运行的帆船环境。

第2步:使用Laravel帆船

Laravel Sail 提供多种快捷方式来管理您的开发环境. 大多数命令和参数都是基于默认的 Docker Compose API。

控制环境

要将环境带到背景模式中,您可以运行:

1./vendor/bin/sail up -d

若要停止以前在背景模式中启动的帆船环境,请运行:

1./vendor/bin/sail stop

这不会删除附加的网络或卷。

若要恢复以前用航行停止命令中断的环境,您可以使用:

1./vendor/bin/sail start

要停止一个环境,并删除所有相关资源,例如卷和网络,您可以使用导航命令. 请注意,此命令将删除之前创建的任何数据,并且仅在容器中可用,例如存储在数据库中的记录。

1./vendor/bin/sail down

 1[secondary_label Output]
 2Stopping laravel-tailwind-starter_laravel.test_1 ... done
 3Stopping laravel-tailwind-starter_redis_1        ... done
 4Stopping laravel-tailwind-starter_selenium_1     ... done
 5Stopping laravel-tailwind-starter_mysql_1        ... done
 6Stopping laravel-tailwind-starter_mailhog_1      ... done
 7Stopping laravel-tailwind-starter_meilisearch_1  ... done
 8Removing laravel-tailwind-starter_laravel.test_1 ... done
 9Removing laravel-tailwind-starter_redis_1        ... done
10Removing laravel-tailwind-starter_selenium_1     ... done
11Removing laravel-tailwind-starter_mysql_1        ... done
12Removing laravel-tailwind-starter_mailhog_1      ... done
13Removing laravel-tailwind-starter_meilisearch_1  ... done
14Removing network laravel-tailwind-starter_sail

检查状态和日志

如果你的环境下降了,请带回它:

1./vendor/bin/sail up -d

当您的环境启动并运行时,您可以通过以下方式检查所有活跃容器的状态:

1./vendor/bin/sail ps

 1[secondary_label Output]
 2           Name Command State Ports                        
 3---------------------------------------------------------------------------------------------------------------------------------
 4myapp_laravel.test_1 start-container Up 0.0.0.0:80->80/tcp,:::80->80/tcp, 8000/tcp          
 5myapp_mailhog_1 MailHog Up 0.0.0.0:1025->1025/tcp,:::1025->1025/tcp,           
 6                                                                             0.0.0.0:8025->8025/tcp,:::8025->8025/tcp            
 7myapp_meilisearch_1 tini -- /bin/sh -c ./meili ... Up (healthy)   0.0.0.0:7700->7700/tcp,:::7700->7700/tcp            
 8myapp_mysql_1 docker-entrypoint.sh mysqld Up (healthy)   0.0.0.0:3306->3306/tcp,:::3306->3306/tcp, 33060/tcp 
 9myapp_redis_1 docker-entrypoint.sh redis ... Up (healthy)   0.0.0.0:6379->6379/tcp,:::6379->6379/tcp            
10myapp_selenium_1       /opt/bin/entry_point.sh Up 4444/tcp

从sail ps命令的输出将告诉您与该特定环境相关的哪些集装箱目前处于活跃状态,哪些端口正在被重定向,更重要的是,每个集装箱的状态。

要检查在您在背景模式下运行环境时的容器日志,您可以使用:

1./vendor/bin/sail logs

这将向您显示所有服务的最新日志。

 1Attaching 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
 2...
 3mysql_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.
 4...
 5meilisearch_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
 6...
 7laravel.test_1  | [Thu Jun 24 15:08:07 2021] PHP 8.0.7 Development Server (http://0.0.0.0:80) started
 8...
 9
10selenium_1      | 15:08:06.864 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444
11...
12redis_1         | 1:M 24 Jun 2021 15:08:05.280 * Ready to accept connections
13...
14mailhog_1       | 2021/06/24 15:08:05 Serving under http://0.0.0.0:8025/

您也可以通过向命令调用提供额外的参数来查看每个服务的日志:

1./vendor/bin/sail logs redis

1[secondary_label Output]
2Attaching to laravel-tailwind-starter_redis_1
3redis_1         | 1:C 24 Jun 2021 15:08:05.278 # oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
4redis_1         | 1:C 24 Jun 2021 15:08:05.278 # Redis version=6.2.4, bits=64, commit=00000000, modified=0, pid=1, just started
5...
6redis_1         | 1:M 24 Jun 2021 15:08:05.280 * RDB memory usage when created 0.77 Mb
7redis_1         | 1:M 24 Jun 2021 15:08:05.280 * DB loaded from disk: 0.000 seconds
8redis_1         | 1:M 24 Jun 2021 15:08:05.280 * Ready to accept connections

跑步艺术家和作曲家

当您在 Laravel 应用程序上工作时,您通常需要运行工匠命令来构建、测试和管理您的应用程序。您还需要运行作曲家命令来管理您的 PHP 依赖性。 除了默认的 Docker Compose API,Sail 还提供有用的快捷方式来执行这些命令在您的应用程序容器中(在示例输出中‘myapp_laravel.test_1’)。

1[label With Docker Compose Only]
2docker-compose exec app php artisan

在 Sail 中,等价呼叫缩短为:

1[label Running Artisan With Sail]
2./vendor/bin/sail artisan

您可以以类似的方式运行 Composer:

1[label Running Composer With Sail]
2./vendor/bin/sail composer

有关所有可用的功能和命令的更多信息,请访问官方 Laravel Sail Documentation。

现在您已经熟悉如何管理您的 Sail 开发环境,以及如何在应用程序容器上运行命令。

步骤 3 — 使用 Laravel 设置 Tailwind CSS

接下来,您将安装并设置Tailwind CSS来构建定位页面。

确保您的 Sail 环境已启动并运行,然后使用npm命令安装 Laravel 的前端依赖,用于下载和管理 JavaScript 包:

1./vendor/bin/sail npm install

1[secondary_label Output]
2...
3added 1327 packages, and audited 1328 packages in 20s
4
599 packages are looking for funding
6  run `npm fund` for details
7...

然后,安装 Tailwind 及其依赖性:

1./vendor/bin/sail npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

1[secondary_label Output]
2...
3added 9 packages, removed 22 packages, changed 7 packages, and audited 1315 packages in 5s
4
599 packages are looking for funding
6  run `npm fund` for details
7...

接下来,您需要为 Tailwind 创建配置文件。 要做到这一点,您将使用npx,即Node 包执行器,并允许您执行一个 Node 包。

1./vendor/bin/sail npx tailwindcss init

这将创建一个名为tailwind.config.js的新配置文件,在项目的根目录中包含以下内容:

 1[label tailwind.config.js]
 2module.exports = {
 3  purge: [],
 4  darkMode: false, // or 'media' or 'class'
 5  theme: {
 6    extend: {},
 7  },
 8  variants: {
 9    extend: {},
10  },
11  plugins: [],
12}

虽然在项目中设置 Tailwind 有不同的方法,但本指南将使用 Laravel Mix和 webpack配置 Tailwind。

使用您的代码编辑器打开webpack.mix.js文件,它将看起来像这样:

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

Laravel Mix 使用 PostCSS来编译 CSS 资源. 删除 // 字符,并包含以下突出的行,将 Tailwind CSS 添加到要处理的 CSS 资源列表中:

删除 // 字符,并包含以下突出的行,需要 Tailwind 作为 PostCSS 插件:

1[label webpack.mix.js]
2  mix.js("resources/js/app.js", "public/js")
3    .postCss("resources/css/app.css", "public/css", [
4     require("tailwindcss"),
5    ]);

完成此更改后保存文件。

接下来,在您的代码编辑器中打开资源/css/app.css,并在该文件中添加以下3行:

1[label resources/css/app.css]
2@tailwind base;
3@tailwind components;
4@tailwind utilities;

保存完后

接下来,您需要使用 NPM 构建前端资产:

1./vendor/bin/sail npm run dev

您将收到类似于以下的输出,一个行类似于突出的成功编译部分,表示您已将所有组件集成到您的帆船环境中:

 1[secondary_label Output]
 2                     	
 3   Laravel Mix v6.0.24   
 4                    	 
 5
 6✔ Compiled Successfully in 5515ms
 7┌───────────────────────────────────────────────────────────────────┬──────────┐
 8│                                                          	File │ Size 	│
 9├───────────────────────────────────────────────────────────────────┼──────────┤
10│                                                    	/js/app.js │ 597 KiB  │
11│                                                   	css/app.css │ 3.81 MiB │
12└───────────────────────────────────────────────────────────────────┴──────────┘
13webpack compiled successfully

Tailwind 现在已配置,您已经为您的网站建立了前端资产.. 在下一步,您将为您的应用程序创建一个新的定位页面。

步骤4:创建一个定位页

有了 Tailwind 的配置,您现在可以开始构建应用程序的前端视图。在 Laravel 中,模板通常存储在资源/视图目录中。在从浏览器中打开应用程序时您之前看到的页面(http://localhost)在该目录中被定义为一个单一的模板,名为welcome.blade.php。

在代码编辑器中,在资源/视图目录中打开名为index.blade.php的新文件。

下面的示例模板定义了一个关于我的HTML页面,其中包含一些不具有风格的元素,它使用了 示例外形图像,但您可以用自己的图像取代它。

在公共应用程序文件夹中创建一个新的img目录:

1mkdir public/img

將您喜愛的圖像儲存到這個新目錄中,名稱為「profile_image.png」。

在下面的示例中,请注意使用突出的{{资产... }}辅助行来定义 CSS 和图像文件的路径,该函数输出位于公共目录中的应用资源的正确公共路径。

将此内容复制到自己的index.blade.php:

 1[label resources/views/index.blade.php]
 2<!doctype html>
 3<html lang="en">
 4<head>
 5    <meta charset="utf-8">
 6    <title>Sammy the Shark - About Page</title>
 7    <meta name="description" content="My Application Description">
 8    <meta name="author" content="Sammy">
 9    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
11</head>
12<body>
13<div>
14    <img src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/{{ asset('img/profile_image.png') }}" width="200" alt="avatar"/>
15    <h1>Sammy the Shark</h1>
16    <p>Content Creator</p>
17    <p>Hello, I'm Sammy. I am a friendly shark interested in Linux, coding, and community.
18        You can find out more about me in the following links:</p>
19    <div>
20        <div><a href="https://twitter.com/digitalocean">Twitter</a></div>
21        <div><a href="https://www.linkedin.com/company/digitalocean">LinkedIn</a></div>
22        <div><a href="https://instagram.com/thedigitalocean">Instagram</a></div>
23    </div>
24</div>
25</body>
26</html>

保存文件,当你完成编辑其内容。

现在编辑routes/web.php文件以修改主路线,以便使用新创建的模板。 使用代码编辑器打开该文件,并用欢迎代替索引,以更改主应用终端所使用的视图。

1[label routes/web.php]
2Route::get('/', function () {
3    return view('index');
4});

Save the file. You can now reload the application page in your browser to see the new index page. You’ll see a page like this: Laravel about me page with tailwind - base template

默认情况下,Tailwind从元素中删除所有风格,这为您提供了通过组合和混合 Tailwind CSS 实用类来构建您的视图的自由。

步骤5 - 用 Tailwind CSS 来设计您的定位页

构建响应性页面是一个重要的前端开发要求,因为用户可以从许多不同的设备访问您的网站或应用程序,每个设备都有不同的屏幕大小。

Tailwind 提供可以每个屏幕大小应用样式的 [selectors] (https://tailwindcss.com/docs/responsive-design). 这样,您可以通过设置最小的宽度作为默认来创建响应容器,并附加更大的屏幕的额外响应大小. 例如,一个带有"class="w-3/4 lg:w-1/2"的元素集将设定母元素宽度的默认宽度为3/4,这对更小的屏幕有效,但对于更大的屏幕("lg:"选择器),它将使用母元素宽度的一半.

请注意,您可以将响应式选择器与任何实用类组合,而不仅仅是与元素大小相关的选择器。

您可以在 官方 Tailwind 文档找到所有可用的响应选择器及其等同的突破点。

下面的模板在页面的中心设置一个响应性内容区域,使用背景梯度和一个示例的外观图像. 对于按钮,它使用一个 网格流量系统,将容器分成三个列,从中间屏幕开始,但将使按钮在从更小的屏幕访问页面时占据整个容器大小。

在代码编辑器中打开您在上一步创建的 resources/views/index.blade.php 文件,并用以下模板替换内容:

 1[label resources/views/index.blade.php]
 2<!doctype html>
 3<html lang="en">
 4<head>
 5    <meta charset="utf-8">
 6    <title>Sammy the Shark - About Page</title>
 7    <meta name="description" content="My Application Description">
 8    <meta name="author" content="Sammy">
 9    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
11</head>
12<body class="bg-gradient-to-r from-blue-400 via-purple-600 to-blue-700">
13
14<div class="w-3/4 lg:w-1/2 mx-auto rounded-md bg-gray-200 shadow-lg m-20 p-10 text-center">
15    <img src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/{{ asset('img/profile_image.png') }}" class="w-32 lg:w-1/6 bg-blue-600 mx-auto rounded-lg mb-4" alt="avatar"/>
16    <h1 class="text-3xl">Sammy the Shark</h1>
17    <p class="text-gray-500 pb-4">Content Creator</p>
18    <p class="text-gray-700 mb-6">Hello, I'm Sammy. I am a friendly shark interested in Linux, coding, and community.
19        You can find out more about me in the following links:</p>
20
21    <div class="grid grid-cols-1 md:grid-cols-3 grid-flow-row gap-6">
22        <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>
23        <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>
24        <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>
25    </div>
26
27</div>
28</body>
29</html>

此模板将生成以下页面:

Final result - Laravel about me page with Tailwind

以下是页面如何适应不同的屏幕大小:

Laravel Tailwind Responsive About Me Page

在更新的模板中,每个 HTML 元素都有数个 Tailwind 类和选择器应用于这些类。Tailwind 使用其实用类的特定名称来创建响应式布局。

  • `bg-梯度--r':使用指定的颜色,从左到r ight创建一个梯度。
  • `w-1/3':将元素宽度设为母元素宽度的三分之一(1/3 )。 在Tailwind内部设置元素宽度有许多不同的方式.
  • `mx-auto': 中心元素。
  • 圆形-md':按大小创造[圆角](https://tailwindcss.com/docs/border-radius)、中`(md)。
  • Shadow-lg':产生[Shadow 效果(https://tailwindcss.com/docs/box-shadow),大小为大(lg)。 *mr-*'和其他m'变体:用来设置元素的[边 (https://tailwindcss.com/docs/margin)。 *pb-*'和其他`p ' 变体:用于设置元素的[铺 (https://tailwindcss.com/docs/padding)。
  • `hover:bg-blue-700':改变鼠标上所选元素的[背景色 (https://tailwindcss.com/docs/background-color)(https://tailwindcss.com/docs/hover-focus-and-other-states). .

查看 Tailwind的官方文档以获取所有可用的实用类的完整参考。

结论

在本教程中,您使用 Laravel Sail 和 Tailwind CSS 启动了新的 Laravel 应用程序,您还使用 Tailwind 强大的实用类创建了响应式的关于我定位页面。

如果您想构建一个更复杂的定位页面,并在此过程中了解更多关于 Tailwind 的信息,您可以在 如何使用 Tailwind CSS 构建有风格的定位页面上遵循我们的指南,以获取如何使用此框架创建完整的网站页面的详细说明。

如果您想在基于项目的指南中了解更多关于Laravel的信息,您可以参阅我们的 如何使用Laravel构建PHP的链接定位页系列。

Published At
Categories with 技术
Tagged with
comments powered by Disqus