think.studio / nova-flexible-content-field-shortcode
专为添加现有内容的短代码功能而设计。
3.0.1
2023-08-12 07:55 UTC
Requires
- php: ^8.1
- illuminate/support: ^9.0|^10.0
- laravel/nova: ^4.0
Requires (Dev)
- friendsofphp/php-cs-fixer: ^3.20
- orchestra/testbench: ^8.6
- phpunit/phpunit: ^10.3
- psalm/plugin-laravel: ^2.8
- think.studio/nova-flexible-content: ^4.0
- vimeo/psalm: ^5.14
README
这是一个非常精确的包。专为添加现有内容的短代码功能而设计。如果您刚开始开发应用程序,则只需使用 think.studio/nova-flexible-content
或不带此包的替代方案。如果您已经有大量内容,并且客户端需要添加新功能,则需要此包。
安装
您可以通过 composer 安装此包。
- 安装 "flexible content" 包。
composer require think.studio/nova-flexible-content
- 安装 "shortcode" 包
composer require think.studio/nova-flexible-content-field-shortcode # optional publish configs php artisan vendor:publish --provider="ThinkOne\NovaFlexibleContentFieldShortcode\ServiceProvider" --tag="config"
使用方法
管理员
\ThinkOne\NovaFlexibleContentFieldShortcode\ShortcodeText
字段。您需要将其添加到您的灵活内容中的 顶级 布局
class ImageLayout extends \NovaFlexibleContent\Layouts\Layout { public function fields(): array { return [ \ThinkOne\NovaFlexibleContentFieldShortcode\ShortcodeText::make('Shortcode') ->help('All parameters you can find <a href="//some-link">here</a>'), NLFMImage::make('Image', 'image'), Text::make('Caption', 'caption'), ]; } } class ImageLayout extends \NovaFlexibleContent\Layouts\Layout { public function fields(): array { return [ \ThinkOne\NovaFlexibleContentFieldShortcode\ShortcodeText::make('Shortcode'), NLFMImage::make('Image', 'image'), Text::make('Caption', 'caption'), ]; } } class ImagesSliderLayout extends \NovaFlexibleContent\Layouts\Layout { public function fields(): array { return [ \ThinkOne\NovaFlexibleContentFieldShortcode\ShortcodeText::make('Shortcode'), \NovaFlexibleContent\Flexible::make('Slider', 'slider') ->useLayout(ImageSlideLayout::class) ->layoutsMenuButton('Add slide'), ]; } } \NovaFlexibleContent\Flexible::make('Shortcodes', 'shortcodes') ->useLayout(ImageLayout::class) ->useLayout(ImagesSliderLayout::class) ->layoutsMenuButton('Add shortcode') ->hideWhenCreating(),
Html 展示器
您需要创建 "展示器" 来显示您的短代码。任何展示器都应该实现接口 ThinkOne\NovaFlexibleContentFieldShortcode\ShortcodePresenter
示例
use ThinkOne\NovaFlexibleContentFieldShortcode\ViewPresenter; class ImageWithCaption extends ViewPresenter { protected string $viewPath = 'my-folder.shortcodes.image-with-caption'; }
# my-folder/shortcodes/image-with-caption.blade.php @if(!empty($shortcodeData) && !empty($shortcodeData['image'])) <div class="..."> <div class="..."> <img class="..." src="{{$shortcodeData['image']}}" alt=""/> @if(!empty($shortcodeData['caption'])) <div class="..."> {{$shortcodeData['caption']}} </div> @endif </div> </div> @endif
使用特性和渲染示例
class Article extends Model { use \ThinkOne\NovaFlexibleContentFieldShortcode\Eloquent\HasShortcodes; public function shortcodesMap(): array { return [ 'image' => ImageWithCaption::class, ]; } public function getFullContentAttribute(): string { return $this->getDataWithShortcodes( WysiwygHelper::filter( (string) $this->content ) ); } public function getFullContentOtherAttribute(): string { return $this->getDataWithShortcodes( WysiwygHelper::filter( (string) $this->content_other ) ); } }
然后调用它
{!! $article->full_content !!} {!! $article->full_content_other !!}
原始渲染示例
class Post extends Model { public function presentersMap(): array { return [ 'image' => ImageWithCaption::class, 'EYsCY62xKnkHrvIo' => AdHocImageWithCaption::class, 'slider' => ImagesSlider::class, ]; } public function shortcodesData(): array { $data = null; if ($this->shortcodes && is_string($this->shortcodes)) { $data = json_decode($this->shortcodes, true); } return is_array($data) ? $data : []; } public function postContent(): ?string { return \ThinkOne\NovaFlexibleContentFieldShortcode\ShortcodeCompiler::make( $this->shortcodesData(), // array represent "nova-flexible-content" field $this->presentersMap() // array represent presenters map (key => class), see above )->renderShortcodes( $this->content // text containing shortcode, maybe you need to filter it to prevent xss ); } }