akitikkx / frontend
用于所有AECMS前端客户端的前端接口
dev-main
2021-03-17 17:47 UTC
Requires
- laravel/jetstream: ^2.2
- livewire/livewire: ^2.0
This package is auto-updated.
Last update: 2024-09-18 01:58:39 UTC
README
从您的项目根目录运行以下命令
composer require akitikkx/frontend
然后运行
php artisan vendor:publish
然后选择以下选项
Provider: Akitikkx\Frontend\FrontendServiceProvider
这将自动生成以下视图文件,这些文件是组件运行所必需的
- resources/views/layouts/livewire/frontend.blade.php
- resources/views/layouts/livewire/frontend-section.blade.php
- resources/views/layouts/app.blade.php
- resources/views/layouts/frontend.blade.php
以及以下类
- app/Http/Livewire/Frontend
- app/Http/Livewire/FrontendSection
- app/Models/Page
- app/Models/PageSection
注意:注意命名空间需要更改为与项目命名空间匹配,例如 App\Http\Frontend
,并且需要在 App\Http\Livewire\PageSection
中添加 use App\Models\PageSection;
运行迁移
php artisan migrate
迁移完成后,应该会创建名为 'pages' 的表。
安装Livewire
php artisan jetstream:install livewire
输出应该是以下内容
Livewire scaffolding installed successfully.
Please execute 'npm install && npm run dev' to build your assets.
然后运行
npm install && npm run dev
输出应该类似于以下内容
✔ Compiled Successfully in 6130ms
┌─────────────────────────────────┬──────────┐
│ File │ Size │
├─────────────────────────────────┼──────────┤
│ /js/app.js │ 673 KiB │
│ css/app.css │ 3.88 MiB │
└─────────────────────────────────┴──────────┘
webpack compiled successfully
并且以下视图文件应该已经自动创建
resources/views/layouts/guest.blade.php
resources/views/policy.blade.php
resources/views/terms.blade.php
使用FrontendSection组件
FrontendSection组件的目的是能够将一段内容添加到指定区域。此组件旨在利用Livewire实现内容区域或块。
要调用组件并将其添加到HTML的某个部分,只需添加以下内容
@livewire('frontend-section', ['urlslug' => 'this-is-the-fancy-title', 'title_class' => 'my-4 text-5xl
font-bold leading-tight', 'content_class' => 'leading-normal text-2xl mb-8'])
其中 this-is-the-fancy-title
是从 page_sections
表中要显示的页面区域的 slug
,title
的CSS类由 title_class
定义,content
的主体CSS类由 content_class
定义。