搜索

📄 文章 📚 合集
热门搜索
🐘 PHP ⚡ Laravel 🎨 Vue.js ⚛️ React 📦 Yii 📘 JavaScript 🗄️ MySQL 🐳 Docker
返回合集

[板块x:修复bug] - 12- 修复一键发布时页面缺失导航、样式错乱及编码问题

代码示例
# 修复一键发布时页面缺失导航、样式错乱及编码问题

## 1。问题描述

后台点击「一键发布」后,生成的静态页面(`index.html`、`about.html` 等)存在以下问题:

1. **导航栏缺失**:页面只显示组件内容,没有网站导航菜单
2. **样式错乱**:CSS 样式未正确加载
3. **中文乱码**:中文字符显示为乱码(如 `妯箙 Banner`)

## 2。原因分析

| 问题 | 原因 |
|------|------|
| 导航栏缺失、样式错乱 | `GenerateStaticPages` 命令直接调用 `PageRenderService::render()`,该方法之前为了修复导航重复问题,被改为只返回组件 HTML(不含 layout) |
| 中文乱码 | 生成的 HTML 文件缺少 `<meta charset="UTF-8">`,浏览器未按 UTF-8 解析 |

## 3。解决方案

### 3.1 修改静态页面生成命令

**文件**:`app/Console/Commands/GenerateStaticPages.php`

**修改前**:

```php
$html = $this->renderService->render($page);
```

**修改后**:在生成静态文件时,手动使用 `frontend.layouts.app` 布局包裹组件内容。

```php
$content = $this->renderService->render($page);

$html = view('frontend.layouts.app', [
    'title' => $page->title,
    'siteName' => $site->site_name ?? '好站站',
    'siteKeywords' => $site->site_keywords ?? '',
    'siteDescription' => $site->site_description ?? '',
    'pages' => $allPages,
    'content' => $content,
])->render();
```

### 3.2 确保布局模板包含 UTF-8 声明

**文件**:`resources/views/frontend/layouts/app.blade.php`

在 `<head>` 中添加:

```html
<meta charset="UTF-8">
```

## 4。修改文件清单

| 文件 | 操作 | 说明 |
|------|------|------|
| `app/Console/Commands/GenerateStaticPages.php` | 修改 | 生成静态文件时包裹完整布局 |
| `resources/views/frontend/layouts/app.blade.php` | 修改 | 添加 UTF-8 编码声明(已存在,确认即可) |

## 5。验证结果

| 验证项 | 预期结果 | 实际结果 |
|--------|---------|---------|
| 导航栏 | 正常显示首页、关于我等菜单 | ✅ |
| 样式 | 页面样式正常 | ✅ |
| 中文编码 | 无乱码 | ✅ |

🧸 adorable code

专注 PHP、JavaScript、Laravel、Vue.js、React、Yii 全栈开发。记录技术探索过程中的灵感与经验,分享工程实践洞见。

hello@adorablecode.com