网站主题功能

作者：: truesnow
发布于：: 7年前
收录于：: 个人网站开发
: 1119 0

摘要：[TOC] # 1. 目标为了使网站能够应用多套主题样式，以满足迭代变换网站风格的要求。（看到别人的博客，觉得设计的很好，就想自己的网站也实现一遍，顺便练手前端。） # 2. 思路通过 url get 或 post 请...

[TOC]

# 1. 目标

为了使网站能够应用多套主题样式，以满足迭代变换网站风格的要求。（看到别人的博客，觉得设计的很好，就想自己的网站也实现一遍，顺便练手前端。）

# 2. 思路

- 通过 url  get 或 post 请求中的 `theme` 参数的值来控制使用的主题。

- 默认主题在 `.env` 和 `config/app.php` 中配置。

- 主题在 `resources/views/theme` 目录下，如果找不到对应的 `theme` 参数的主题目录，则使用默认主题，默认主题页面在 `resources/views/` 目录下。

- 第一次访问之后便把 theme 存入到 session 中，便于后续访问都使用此主题，如果后续有用户定制主题的需求，则可以存储到数据库中，保持主题状态。

# 3. 代码

## 3.1 *.env* 配置

主题名和 `resources/views/theme` 视图主题目录名一致。

*.env*：

```
# theme
THEME=default
```

如 *.env* 中配置 `THEME=diana`，则对应 `resources/views/theme/diana` 目录有一套视图，如果不存在该主题视图，则使用默认的 `resources/views/` 下的视图。

## 3.2 配置文件配置

*config/app.php*

```
'theme' => env('THEME', 'diana'),
```

## 3.3 基础控制器改造视图方法

基础控制器中增加 `view()` 方法来代替 Laravel 的 `view()` 帮助函数，以实现主题功能。

*app/Http/Contollers/Controller.php*：

```
<?php
namespace App\Http\Controllers;
use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Routing\Controller as BaseController;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Support\Facades\View;
use Illuminate\Http\Request;
class Controller extends BaseController
{
    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
    public function __construct()
    {
    }
    // 实现主题功能，检测主题下是否存在指定页面，没有则使用默认主题页面
    public function view($view = null, $data = [], $mergeData = [])
    {
        // 获取 theme 顺序：get 参数 > session > 默认配置
        $theme = request()->input('theme', session('theme', config('app.theme', '')));
        session(['theme' => $theme]);
        $theme_view = 'themes.' . $theme . '.' . $view;
        if (View::exists($theme_view)) {
            return view($theme_view, $data, $mergeData);
        } else {
            return view($view, $data, $mergeData);
        }
    }
}

```

## 3.4 控制器使用示例

*routes/web.php*

```
Route::get('/', 'PagesController@index')->name('home');
```

*app/Http/Controllers/PagesController.php*

```
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PagesController extends Controller
{
    public function index()
    {
        return $this->view('pages.index');
    }
}

```

# 4. 效果

实现了两个主题的首页，*themes* 下的一级目录即为主题名。

视图目录结构示例如下：

![](http://pb8quxvbv.bkt.clouddn.com/images/201807/hak4uEf9je8GYya.png)

访问链接效果：

http://blog.test/ ：加载的是 *resources/views/pages/index.blade.php*

![](http://pb8quxvbv.bkt.clouddn.com/images/201807/mNqp4ERjEeKOkMI.png)

http://blog.test/?theme=sspai ：加载的是 *resources/views/themes/sspai/pages/index.blade.php*

![](http://pb8quxvbv.bkt.clouddn.com/images/201807/bgOyw0mUscPsPEy.png)

如果访问：http://blog.test/?theme= ，或访问的主题不存在时，如：http://blog.test/?theme=foobar ，则加载的是  *resources/views/pages/index.blade.php* 视图文件。

![](http://pb8quxvbv.bkt.clouddn.com/images/201807/mpqmG0Aaz2S4Vod.png)

> https://sleepeatcode.com 当前配置的主题是 `zui`，你可以尝试访问 https://sleepeatcode.com/?theme=diana 查看 diana 主题，访问 https://sleepeatcode.com/?theme=default 查看默认主题，再次访问 https://sleepeatcode.com/?theme=zui 切回 zui 主题。目前 `default` 主题和 `zui` 主题是完整的，`default` 主要是开发时使用，完成的功能，想开放的功能会开发 `zui` 主题。

文章目录

网站主题功能

所有评论（0）