# 创建前台布局模板
## 1。目标
创建前台页面的基础布局模板，提供统一的 HTML 框架、SEO 元数据和基础样式。
## 2。修改文件清单
| 文件 | 操作 | 说明 |
|------|------|------|
| `resources/views/frontend/layouts/app.blade.php` | 新建 | 前台布局模板 |
---
## 3。修改详情
### 3.1 创建目录
**执行命令**：
```bash
mkdir resources\views\frontend
mkdir resources\views\frontend\layouts
```
### 3.2 创建布局文件
**文件路径**：`resources\views\frontend\layouts\app.blade.php`
**完整代码**：
```blade
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title }} - {{ $siteName }}</title>
<meta name="keywords" content="{{ $siteKeywords }}">
<meta name="description" content="{{ $siteDescription }}">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
/* 横幅样式 */
.banner {
background-size: cover;
background-position: center;
min-height: 400px;
display: flex;
align-items: center;
text-align: center;
color: #fff;
background-color: #1a1a2e;
}
.banner-content { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.banner h1 { font-size: 48px; margin-bottom: 20px; }
.banner p { font-size: 20px; margin-bottom: 30px; }
.banner-btn {
display: inline-block;
padding: 12px 30px;
background: #1890ff;
color: #fff;
text-decoration: none;
border-radius: 6px;
transition: all 0.3s;
}
.banner-btn:hover { background: #0c6bcf; }
/* 文本块样式 */
.text-block { padding: 60px 0; text-align: center; max-width: 800px; margin: 0 auto; }
.text-block h2 { font-size: 32px; margin-bottom: 20px; color: #333; }
.text-block p { font-size: 16px; line-height: 1.8; color: #666; }
/* 图片块样式 */
.image-block { text-align: center; padding: 40px 0; }
.image-block img { max-width: 100%; border-radius: 8px; }
/* 响应式 */
@media (max-width: 768px) {
.banner h1 { font-size: 32px; }
.banner p { font-size: 16px; }
.text-block { padding: 40px 20px; }
.text-block h2 { font-size: 24px; }
}
</style>
</head>
<body>
{!! $content !!}
</body>
</html>
```
**修改原因**：
| 代码 | 作用 | 原因 |
|------|------|------|
| `{{ $title }} - {{ $siteName }}` | 页面标题 | SEO 优化，显示当前页面标题和网站名称 |
| `{{ $siteKeywords }}` | SEO 关键词 | 从站点配置读取，提升搜索引擎排名 |
| `{{ $siteDescription }}` | SEO 描述 | 从站点配置读取，影响搜索结果显示 |
| `.banner` 样式 | 横幅组件样式 | 背景图、居中显示、自适应高度 |
| `.text-block` 样式 | 文本块样式 | 居中、最大宽度 800px、行高 1.8 |
| `.image-block` 样式 | 图片块样式 | 居中、圆角、响应式宽度 |
| `@media` 查询 | 响应式布局 | 移动端字体和间距适配 |
| `{!! $content !!}` | 组件内容插槽 | 渲染页面组件生成的 HTML |
---
## 4。验证结果
**访问测试**：浏览器打开 `http://engine-api.test/`
| 验证项 | 预期结果 | 实际结果 |
|--------|---------|---------|
| 页面访问 | 正常显示 | ✅ |
| HTML 结构 | 包含 DOCTYPE、head、body | ✅ |
| SEO 元数据 | title、keywords、description 存在 | ✅ |
| 样式加载 | 基础样式生效 | ✅ |