Laravel Themer 包：为 Laravel 应用程序添加多主题支持

这个 Laravel Themer 包为你的 Laravel 应用程序添加了多主题支持。它还提供了一个简单的身份验证脚手架和 Bootstrap、Tailwind、Vue 和 React 的预设，作为构建 Laravel 应用程序的起点。

在我看来，这个 Laravel Themer 包是官方 laravel/ui & laravel/breeze 包的更好替代品，因为它具有以下功能：

• 任意数量的主题
• 回退主题支持（WordPress 风格）；它允许创建子主题以扩展任何主题
• 提供类似于 laravel/ui & laravel/breeze 的身份验证脚手架
• 导出所有身份验证控制器、测试和其他文件，类似于 laravel/breeze
• 为 Bootstrap、Tailwind、Vue 2、Vue 3 和 React 提供前端预设

如果你不想使用这个包的身份验证脚手架，而是想使用 Laravel Fortify，没问题。你也可以将 Laravel Themer 与 Fortify 一起使用。Laravel Fortify 是 Laravel 的前端无关身份验证后端，它不提供视图或前端预设。因此，使用 Fortify 进行后端身份验证，使用 Laravel Themer 进行你的视图、预设和多主题支持。

#视频教程

#安装

通过 composer 安装

composer require qirolab/laravel-themer

发布配置文件

php artisan vendor:publish --provider="Qirolab\Theme\ThemeServiceProvider" --tag="config"

#创建主题

使用以下命令创建主题

php artisan make:theme

#中间件以设置主题

在 app\Http\Kernel.php 中注册 ThemeMiddleware

protected $routeMiddleware = [
    // ...
    'theme' => \Qirolab\Theme\Middleware\ThemeMiddleware::class,
];

中间件用法示例

Route::get('/dashboard', 'DashboardController@index')
    ->middleware('theme:dashboard-theme');

#主题方法

// Set active theme
Theme::set('theme-name');
 
// Get current active theme
Theme::active();
 
// Get current parent theme
Theme::parent();
 
// Clear theme. So, no theme will be active
Theme::clear();
 
// Get theme path
Theme::path($path = 'views');
// output:
// /app-root-path/themes/active-theme/views
 
Theme::path($path = 'views', $themeName = 'admin');
// output:
// /app-root-path/themes/admin/views
 
Theme::getViewPaths();
// Output:
// [
//     '/app-root-path/themes/admin/views',
//     '/app-root-path/resources/views'
// ]

#webpack.mix.js 配置

创建新主题后，它会为该主题创建一个单独的 webpack.mix.js 文件。因此，要编译主题的 webpack.mix.js 文件，它应该包含在应用程序的 webpack.mix.js 中，该文件位于根路径。

// add this in the root `webpack.mix.js`
require(`${__dirname}/themes/theme-name/webpack.mix.js`);

在多个主题的情况下，如果你添加了多个不同主题的 webpack.mix.js。那么 webpack 可能无法正确编译它们。因此，你应该使用以下代码修改根 webpack.mix.js

let theme = process.env.npm_config_theme;
 
if(theme) {
   require(`${__dirname}/themes/${theme}/webpack.mix.js`);
} else {
    // default theme to compile if theme is not specified
  require(`${__dirname}/themes/theme-name/webpack.mix.js`);
}

现在，你可以使用以下命令编译特定主题的资源

npm run dev --theme=theme-name