akitikkx/frontend

用于所有AECMS前端客户端的前端接口

dev-main 2021-03-17 17:47 UTC

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 表中要显示的页面区域的 slugtitle 的CSS类由 title_class 定义,content 的主体CSS类由 content_class 定义。