README

这是什么

此包可以基于HTML标记生成块，用于在Twill 3中快速构建站点。

您可以将模板文件标注后，将其输入到包中，它会负责转换。

目前blade文件尚未格式化，因此您需要使用您选择的编辑器重新格式化它们。

这是一个开发/原型包。请随意提交更多功能！此包不是我的优先事项，所以我很可能不会积极处理您的功能请求。

安装

$ composer require haringsrob/twill-generator --dev

用法

输入

虽然此示例只包含“一个块”，您也可以使用完整的HTML文件。它将删除不需要的内容。

<div class="max-w-5xl mx-auto flex items-center mt-16 mb-16 md:mt-24 md:mb-24 px-8 md:px-0" twill-block="hero">
  <div class="max-w-4xl flex-col">
    <h1 class="text-5xl font-black" twill-wysiwyg="title">
      The next generation page builder
    </h1>
    <div class="prose prose-lg py-8 max-w-3xl" twill-wysiwyg="text">
      <p>The generator that simply takes your markup and converts it into building blocks</p>
    </div>
    <div>
      <!-- Links todo -->
      <a twill-href="link_url" href="https://webisolv.com/nl/contact-us"
         class="inline px-6 py-4 border border-brown-900 text-brown-900 transition-colors hover:bg-brown-900 hover:text-white font-bold">
        <span twill-text="link_text">Contact us</span>
      </a>
    </div>
  </div>
</div>

请参阅（./tests/example.html）[此示例]以获取更完整的文件。

然后我们可以运行twill-generator:generate-blocks-for-file {file}，它将提取块到类中。

您需要确认解析器找到的内容

The following block components will be created:
+---------------+---------------+---------------+------------+-------------------------------------------------------+----------------------------------------------------+
| block name    | label         | field name    | field type | dir                                                   | class                                              |
+---------------+---------------+---------------+------------+-------------------------------------------------------+----------------------------------------------------+
| hero          |               |               |            | views/components/twill/blocks/hero.blade.php          | /app/View/Components/Twill/Blocks/Hero.php         |
|               | Link Text     | link_text     | text       |                                                       |                                                    |
|               | Title         | title         | wysiwyg    |                                                       |                                                    |
|               | Text          | text          | wysiwyg    |                                                       |                                                    |
|               | Link Url      | link_url      | href       |                                                       |                                                    |
+---------------+---------------+---------------+------------+-------------------------------------------------------+----------------------------------------------------+

输出

resources/components/twill/blocks/quote.blade.php

<div class="w-full mt-12 md:mt-24 bg-darkblue-500 text-brown-500 p-8 md:p-8 max-w-5xl mx-auto">
  <div class="grid grid-cols-1 md:grid-cols-2 items-center gap-12">
    <div><h3 class="text-3xl font-bold">{{ $input('title') }}</h3></div>
    <div class="text-xl">{{ $input('quote') }}</div>
  </div>
  <img twill-image-ratio="16/9" src='{{ $image('content_image', 'default') }}'/></div>

app/View/Components/Twill/Blocks/Quote.php

<?php

namespace App\View\Components\Twill\Blocks;

use A17\Twill\Services\Forms\Fields\Input;
use A17\Twill\Services\Forms\Fields\Medias;
use A17\Twill\Services\Forms\Fields\Wysiwyg;
use A17\Twill\Services\Forms\Form;
use A17\Twill\View\Components\Blocks\TwillBlockComponent;
use Illuminate\Contracts\View\View;

class Quote extends TwillBlockComponent
{
    public function render(): View
    {
        return view('components.twill.blocks.quote');
    }

    public function getForm(): Form
    {
        return Form::make([
            Input::make()->name('title'),
            Wysiwyg::make()->name('quote'),
            Medias::make()->name('content_image')->max(1)
        ]);
    }

    public static function getCrops(): array
    {
        return ['content_image' => ['default' => [['name' => 'default', 'ratio' => 16/9]]]];
    }
}

如您所见，我们只是向其提供了一些标注的HTML，然后它会负责提取和替换占位符内容以制作块。

支持的字段

它目前支持

• 文本
• 所见即所得
• 数字
• 图片
• 链接
• 重复器

重复器

此包还可以生成内联（json）重复器

<div twill-block="with-repeater">
  <div twill-repeater="items" class="repeater-item">
    <div twill-items-text="title">
      Hello world
    </div>
  </div>
  <div class="repeater-item">
    <div>
      Hello world 1
    </div>
  </div>
</div>

<div> @foreach($repeater('items') as $items)
    <div class="repeater-item">
      <div>{{ $items->block()->input('title') }}</div>
    </div>
  @endforeach </div>

<?php

namespace App\View\Components\Twill\Blocks;

use A17\Twill\Services\Forms\Fields\Input;
use A17\Twill\Services\Forms\Form;
use A17\Twill\Services\Forms\InlineRepeater;
use A17\Twill\View\Components\Blocks\TwillBlockComponent;
use Illuminate\Contracts\View\View;

class WithRepeater extends TwillBlockComponent
{
    public function render(): View
    {
        return view('components.twill.blocks.with-repeater');
    }

    public function getForm(): Form
    {
        return Form::make([
            InlineRepeater::make()
            ->name('items')
            ->fields([
                Input::make()->name('title')
            ])
        ]);
    }
}