README

此包与 Laravel Nova 兼容，因此在继续之前请确保已安装。有关 Laravel Nova 的文档和安装说明，请访问其官方页面

还建议使用 jolimardi CSS 来确保其良好运行。请访问jolimardi-css GitHub

安装

执行以下命令以将 laravel-mysections 添加到项目中：

composer require jolimardi/laravel-sections

使用以下命令发布包资源：

php artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider"

php artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider" --tag="nova" - 也发布模型
php artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider" --tag="migrations"
php artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider" --tag="assets"
php artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider" --tag="views"

运行迁移以向数据库添加必要的表

php artisan migrate`

配置

仅在必要时将 JoliMardi\MySections\MySectionsServiceProvider::class 添加到您的 config/app.php 文件中。此步骤可能需要，如果包不遵守 PSR-4 规范或如果它在 composer.json 中的自动加载中实现不当。
在 app.css 中导入包的 CSS 文件，添加以下行（建议与 Vite.js 一起使用）：

@import "../../public/vendor/mysections/sections.css";

在开发过程中，建议使用 @import "../../vendor/jolimardi/laravel-mysections/dist/sections.css"; 以避免每次保存都要发布资源。

Nova 补充

为了确保在 Nova 上创建分区时一切运行良好，还需要安装 Nova CKEditor

https://jolimardi.github.io/documentation/docs/laravel/Features/add-ckeditor

使用

在视图中使用 mySection($data, $key) 函数插入分区。传递特定于分区的数据和其对应键。

组件

您可以在视图中使用 <x-section> 组件来定义分区的预定义 CSS 规则。以下是一个示例

<x-layout>
    @mySection($sections, 'home.about')

    <x-section maxWidth="large" bg="gray">
        <x-list-icon />
    </x-section>
</x-layout>

自定义分区

执行以下命令后

php artisan vendor:publish --provider="JoliMardi\MySections\MySectionsServiceProvider" --tag="views"

在 resources/views/vendor/laravel-sections 中找到不同分区的视图，这些视图用于分别渲染每个默认分区。

创建新分区

以下是创建新分区的步骤

打开 Nova 并转到仪表板。
在菜单中，单击“分区”以打开分区列表。
单击“添加新分区”。

如果您已将新分区添加到包中，请先转到 Nova 的“分区模板”以给它命名，以便在模板选择时使用。

选择分区设置。已预定义了三个分区，但您可以添加更多。
要添加新分区，请转到 Nova 的“分区模板”。
为您的分区命名并选择一个视图。

注意：这些说明假设您已经熟悉 Nova 和 Laravel 的使用。如果这不是情况，我建议您查阅官方文档以获取更多信息。

更改包内容

您可以随意更新包。

安装依赖项

composer install
npm install

每次保存时修改一个CSS文件 dist/sections.css

npx mix watch

或者使用以下方法一次性更新

npx mix

注意：如果您修改了/dist目录的内容并且已经发布了资产，您需要删除public/vendor/mysections中的section.css文件，然后重新运行命令以发布新文件。（请参阅安装 -> 标签）

向包中添加新章节

添加新视图：在src/views目录中创建并添加一个新视图。
添加CSS文件：在src/css目录中创建并添加相应的CSS文件。
更新webpack.mix.js文件：将CSS文件添加到webpack.mix.js的配置中。
编译资产：执行npx mix命令重新编译资产并更新dist目录。
更新子模块：如果您将此包用作其他项目的子模块，请确保更新子模块。
参考：然后，请参阅“创建新章节”部分以获取创建新章节的更多详细信息。

注意：如果添加CSS文件，则需要将其添加到webpack.mix.js中，并重新运行命令npx mix watch。

然后更新存储库，并使用新更改更新您的项目。

@TODO

添加CSS类型max-width变量，以便能够在不使用jolimardi-css的情况下使用<x-section></x-section>组件。
构建webpack.mix.js来自动获取相对目录中的所有CSS文件。我尝试使用glob，但始终存在不符合预期的行为。

jolimardi / laravel-sections

维护者

详情