Ten pakiet Laravel Themer dodaje obsługę wielu motywów do Twojej aplikacji Laravel. Zapewnia również proste rusztowanie uwierzytelniania i ustawienia wstępne dla Bootstrap, Tailwind, Vue i React jako punkt wyjścia do budowania aplikacji Laravel.
Moim zdaniem ten Laravel Pakiet Themer jest lepszą alternatywą dla oficjalnego laravel/ui & Pakiety laravel/breeze ze względu na następujące funkcje:
- Any number of themes
- Fallback theme support (WordPress style); It allows creating a child theme to extend any theme
- Provides authentication scaffolding similar to
laravel/ui&laravel/breeze - Exports all auth controllers, tests, and other files similar to
laravel/breeze - Provides frontend presets for Bootstrap, Tailwind, Vue 2, Vue 3, and React
Jeśli nie chcesz używać rusztowania uwierzytelniania tego pakietu, zamiast tego chcesz używać Laravel Fortify, nie ma z tym problemu. Możesz także użyć Laravel Themer z Fortify.Laravel Fortify jest niezależnym od frontendu backendem uwierzytelniania dla Laravela i nie zapewnia widoków ani ustawień frontendu. Dlatego użyj Fortify do uwierzytelniania zaplecza i Laravel Themer do swoich widoków, ustawień wstępnych i obsługi wielu motywów.
Samouczek wideo
Instalacja
Zainstaluj przez kompozytora
composer require qirolab/laravel-themerOpublikuj plik konfiguracyjny:
php artisan vendor:publish --provider="Qirolab\Theme\ThemeServiceProvider" --tag="config"Tworzenie motywu
Użyj następującego polecenia, aby utworzyć motyw:
php artisan make:theme
Oprogramowanie pośrednie, aby ustawić motyw
Zarejestruj MotywMiddleware< /code> w app\Http\Kernel.php:
protected $routeMiddleware = [
// ...
'theme' => \Qirolab\Theme\Middleware\ThemeMiddleware::class,
];Przykłady użycia oprogramowania pośredniego:
Metody motywów:
Route::get('/dashboard', 'DashboardController@index')
->middleware('theme:dashboard-theme');webpack.mix.js Konfiguracja
// 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'
// ]Po utworzeniu nowego motywu tworzy osobny plik webpack.mix.js dla tego motywu. Tak więc, aby skompilować plik webpack.mix.js motywu, należy go dołączyć do pliku webpack.mix.js aplikacji, który znajduje się w ścieżce głównej.
W przypadku wielu motywów, jeśli dodasz wiele webpack.mix.js różnych motywów. Następnie webpackmoże nie skompilować ich poprawnie. Powinieneś więc zmodyfikować główny webpack.mix.js następującym kodem:
// add this in the root `webpack.mix.js`
require(`${__dirname}/themes/theme-name/webpack.mix.js`);Teraz możesz użyć następującego polecenia do skompilowania zasoby dla konkretnego motywu:
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
