README

灵感来自 bigecko/laravel-theme。主题存储在默认的 Laravel 资源文件夹中

介绍

此包提供了一种简单的方式来管理 Laravel 应用程序中的主题。

例如，您可以开发应用程序的多个主题，并轻松在不同目的之间切换主题。

要求

此版本需要 PHP 8.1 并支持 Laravel 10-11。

此包还提供对 Laravel Mix 和 Vite 配置的支持。

安装

要获取最新版本，只需使用 Composer 要求项目

composer require "yaap/theme:^5.0"

或将行手动添加到 composer.json

{
    "require": {
        "yaap/theme": "^5.0"
    }
}

可选，使用 artisan CLI 发布配置（如果您想覆盖默认配置）。

php artisan vendor:publish --provider="YAAP\Theme\ThemeServiceProvider"

配置

包配置

config/theme.php 文件中的配置。

return [

    /*
    |--------------------------------------------------------------------------
    | Path to directory with themes
    |--------------------------------------------------------------------------
    |
    | The directory with your themes.
    |
    */

    'path' => base_path('themes'),

    /*
    |--------------------------------------------------------------------------
    | Path to directory with assets build
    |--------------------------------------------------------------------------
    |
    | The directory with assets build in public directory.
    |
    */

    'assets_path' => 'themes',

    /*
    |--------------------------------------------------------------------------
    | A pieces of theme collections
    |--------------------------------------------------------------------------
    |
    | Inside a theme path we need to set up directories to
    | keep "layouts", "assets" and "partials".
    |
    */

    'containerDir' => [
        'assets' => 'assets',
        'lang' => 'lang',
        'layout' => 'views/layouts',
        'partial' => 'views/partials',
        'view' => 'views',
    ],
];

主题配置

主题文件夹中的配置。占位符 %theme_name% 在创建时将被主题名称替换。

return [

    /*
    |--------------------------------------------------------------------------
    | Theme name
    |--------------------------------------------------------------------------
    |
    | Use in assets publishing etc.
    |
    */

    'name' => '%theme_name%',

    /*
    |--------------------------------------------------------------------------
    | Inherit from another theme
    |--------------------------------------------------------------------------
    |
    | Set up inherit from another if the file is not exists.
    |
    */

    'inherit' => null,

];

使用方法

使用 artisan CLI 创建主题

创建命令

第一次必须使用 artisan 命令创建主题 default 结构

php artisan theme:create default

默认情况下，它将使用 vite 作为资产构建器。如果您想使用 laravel mix，则使用以下命令

或使用 Laravel Mix

php artisan theme:create default mix

销毁命令

要删除现有主题，请使用以下命令

php artisan theme:destroy default

结构

以下是具有主题的项目文件夹结构的示例

project-root
├── app/
<...>
├── public/
|   ├── index.php
|   └── themes/
|       └── default/
|           ├── js/
|           |   └── app.js
|           ├── css/
|           |   └── styles.css
|           └── images/
|               └── icon.png
├── resources/
<...>
├── themes/
|   ├── default/
|   |   ├── assets/        
|   |   ├── lang/        
|   |   ├── views/
|   |   |   ├── layouts/
|   |   |   ├── partials/
|   |   |   └── hello.blade.php
|   |   └── config.php
|   ├── admin/
|   ├── views/
|       ├── emails/
|       |   └── notify.blade.php
|       └── hello.blade.php

初始化主题

要初始化并在您的应用程序中使用主题，请将以下代码添加到应用程序服务提供者（例如 AppServiceProvider）中的任何 boot 方法中

use YAAP\Theme\Facades\ThemeLoader;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        ThemeLoader::init('default');
    }
}

这将添加到视图查找路径

themes/{$name}/views

还将添加语言文件

themes/{$name}/lang

制作视图

Laravel：创建 & 渲染视图

View::make('hello');
View::make('emails.notify');

// or

view('hello');
view('emails.notify');

资产

Vite

如果您使用 Vite，请确保 vite.config.js 已指定主题的输入路径

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'themes/default/assets/js/app.js', // for default theme
                // ...
            ],
            refresh: true,
        }),
    ],
});

因为 app.js 包含 app.scss，您可以使用以下代码在视图中包含资产

<head>
    <!--...-->
    @vite([
        'themes/default/assets/js/app.js',
    ])
</head>

Laravel Mix

如果您使用 Laravel Mix，请确保 webpack.mix.js 已指定主题的混合配置

const mix = require('laravel-mix');

mix.disableNotifications();
mix.browserSync({
    open: true,
    proxy: 'localhost:8000',
    files: [
        'app/**/*',
        'routes/**/*', 
        'themes/**/*', // manually add this line
    ]
});

// other configutraions...

// mix for default theme
mix.copyDirectory('themes/default/assets/img', 'public/themes/default/img');
mix.copyDirectory('themes/default/assets/fonts', 'public/themes/default/fonts');
// js
mix.js(['themes/default/assets/js/app.js'], 'public/themes/default/js/app.min.js')
// sass
mix.sass('themes/default/assets/sass/app.scss', 'public/themes/default/css/app.min.css')

然后您可以使用以下代码在视图中包含资产

在 <head> 标签中

<head>
    <!--...-->
    <link rel="stylesheet" href="{{ mix('/themes/default/css/app.min.css') }}"/>
</head>

在 </body> 标签之前

<body>
    <!--...-->
    <script type="text/javascript" src="{{ mix('/themes/default/js/app.min.js') }}"></script>
</body>

要使用图像，您可以使用以下代码

<img src="{{ mix('themes/default/img/icon.png') }}" alt="icon">

构建布局

使用组件的布局

Laravel：Blade 组件

使用模板继承的布局

要构建布局，我们使用模板继承。您可以使用 @extends 指令指定父布局。

@extends('layouts.master')

@include('partials.header')

@section('content')
    <section id="main">
        <h1>HOME</h1>
    </section>
@stop

@include('partials.footer')

回退功能

您仍然可以使用默认的 View::make('emails.notify')，该文件存储在 themes 目录之外。

我可以雇佣你们吗？

是的！打招呼：hello@hexide-digital.com

我们很乐意与您合作！查看我们完成的其他工作

关注我们

关注最新动态！在LinkedIn或Facebook上关注我们

许可证

MIT许可证。

yaap / theme

维护者

详细信息