think.studio/nova-flexible-content-field-shortcode

专为添加现有内容的短代码功能而设计。

3.0.1 2023-08-12 07:55 UTC

This package is auto-updated.

Last update: 2024-09-12 10:37:09 UTC


README

Packagist License Packagist Version Total Downloads Build Status Code Coverage Scrutinizer Code Quality

这是一个非常精确的包。专为添加现有内容的短代码功能而设计。如果您刚开始开发应用程序,则只需使用 think.studio/nova-flexible-content 或不带此包的替代方案。如果您已经有大量内容,并且客户端需要添加新功能,则需要此包。

安装

您可以通过 composer 安装此包。

  1. 安装 "flexible content" 包。
composer require think.studio/nova-flexible-content
  1. 安装 "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
        );
    }
}

致谢

  • Think Studio