README

该软件包扩展了原始的Voyager管理面板，增加了新的优点和功能。

功能

• 集成Spatie的v10 laravel-medialibrary
• 添加-编辑模式中的基本操作按钮（保存）现在可以固定并自动隐藏。
• 自定义浏览列顺序。可以以两种方式定义。
• 添加-编辑面包模式的标签布局。
• 对于具有parent_id字段的模型，有树形视图模式。
• 新的扩展浏览面包外观和选项。
• 新的扩展BREAD Builder外观和选项。
• 添加-编辑模式的新基本操作：保存并继续 & 保存并创建。

新的自定义字段

• VE图片。支持标题和Alt字段。
• VE媒体文件（包括图片），支持排序和无限附加自定义字段，类型不同。
• VE选择下拉树。下拉选择用于树形结构（具有parent_id）。
• VE字段组。一个模型字段内的字段JSON类型分组。
• VE可排序JSON多字段。多字段（多行）的JSON类型分组存储在模型字段中。
• VE相关模型。相关模型列表。
• VE内联字段集。复杂的组合字段。每个字段可以存储多行（或只有一行），每行可以存储多个类型的自定义字段。
• VE页面布局。允许组织页面上块、表单、小工具和内容的布局。依赖于Voyager Site软件包。

软件包安装

要求

Laravel：v8+ 或 v9+
Voyager：v1.6+
在安装此软件包之前，应完全安装Voyager。

通过Composer

composer require lamtin222/voyager-extension

然后运行迁移

php artisan migrate

如果需要，发布配置

php artisan vendor:publish --provider="Lamtin222\VoyagerExtension\VoyagerExtensionServiceProvider" --tag="config"

要使用图片字段，您需要发布和迁移laravel-medialibrary资源

php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="migrations"
php artisan migrate

可选，您可能还想发布laravel-medialibrary的配置

php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="config"

配置

配置文件

/*
|
| Use original browse.blade.php or use extended one
|
*/
'legacy_browse_bread' => false,

/*
| Use original edit-add.blade.php or use extended one
*/
'legacy_edit_add_bread' => false,

/*
| Use original tools/bread/edit-add.blade.php or use extended one
*/
'legacy_bread_list' => false,

/*
| Use sticky action panel (if 'enabled' = true) instead the original action buttons.
| If 'autohide' = true will show and hide automatically on mouse over/leave events.
| Uses in edit-add.blade.php and tools/bread/edit-add.blade.php
*/
'sticky_action_panel' => [
    'enabled' => true,
    'autohide' => false,
],

/*
| CLone Record parameters
| @params: enabled - if action is available
|          reset_types - A value of these bread type fields will be cleared
|          suffix_fields - The suffix '(clone)' will be added to these fields content
*/
'clone_record' => [
    'enabled' => true,
    'reset_types' => ['image', 'multiple_images','file'],
    'suffix_fields' => ['title','name','slug'],
],

/*
| You can enable or disable the custom path and urls generator for medialibrary images
| at Lamtin222\VoyagerExtension\Generators\MediaLibraryPathGenerator
| and at Lamtin222\VoyagerExtension\Generators\MediaLibraryUrlGenerator
*/
'use_media_path_generator' => true,
'use_media_url_generator' => true,

/*
|
| Use Str::slug function on media file names before saving
|
*/
'slug_filenames' => true,

使用坐标字段

一些旧版voyager字段，如'coordinates'，在'legacy_edit_add_bread' => false模式下无法正常工作
为了使其按预期工作，您需要将旧模板文件复制到自己的模板文件夹中：/resources/views/vendor/voyager/formfields/coordinates.blade.php
然后您应该替换字符串

var gMapVm = new Vue({ el: '#coordinates-formfield' });

为

if (typeof gMapVm === 'undefined') {
    var gMapVm = new Vue({ el: '#coordinates-formfield' });
}

模型

要使用额外的图片字段，您应该像这样配置您的模型

namespace App;

use Illuminate\Database\Eloquent\Model;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;

class Article extends Model implements HasMedia
{
   use InteractsWithMedia;
}

您还可以使用laravel-medialibrary软件包提供的任何其他优点。

描述和用法

BREAD Builder的设计已更改，使其更加紧凑和方便（可以通过配置禁用）

现在所有JSON字段都可以折叠，并且默认为折叠状态。要展开JSON编辑器，只需单击即可。

BREAD Builder页面上的常见额外细节

对于添加-编辑模式，在粘性面板上添加了新的基本操作按钮（可以通过配置禁用）

该软件包还提供了一些新的字段类型。

字段：VE图片

该字段使用 laravel-medialibrary 包来存储单个图片。此外，该字段可以存储文本属性标题和ALT。

字段：VE 媒体文件

该字段表示 laravel-medialibrary 收藏，包含额外的自定义字段子集。用于存储任何媒体文件。您可以通过拖放对收藏进行排序。实现了选择和分组删除。

默认情况下，它保留两个字段 - 标题 和 ALT。允许在收藏元素内部更改文件。您可以将该字段用作小部件集合或仅用作可排序的图片集合。媒体收藏的元素可以使用 BREAD Json Options 存储附加内容字段。

实现的字段类型

{
    "extra_fields": {
        "content": {
            "type": "textarea",
            "title": "Description"
        },
        "code": {
            "type": "codemirror",
            "title": "HTML Widget"
        },
        "link": {
            "type": "text",
            "title": "URL"
        }
    }
}

接受的文件类型模板

{
  "input_accept": "image/*,.pdf,.zip,.js,.html,.doc,.xsxl"
}

默认使用 "image/*" 模板。

在前端获取字段数据。

您可以使用 laravel-medialibrary 包提供的任何方法。字段名称表示媒体相册名称。

$image = $post->getFirstMedia('field_name');
$imageUrl = $image->getFullUrl();
$imageTitle = $image->getCustomProperty('title');
$imageAlt = $image->getCustomProperty('alt');

更多详情请参阅原始的 laravel-medialibrary 文档。

字段：VE 字段组

是一个简单的类似JSON的字段集。支持三个字段子类型：文本、数字和文本区域。当您需要在不同的模型中实现相同的字段组时很有用。

BREAD Json Options

{
    "fields": {
        "seo_title": {
            "label": "SEO Title",
            "type": "text"
        },
        "meta_description": {
            "label": "META Description",
            "type": "text"
        },
        "meta_keywords": {
            "label": "META Keywords",
            "type": "text"
        }
    }
}

检索数据

@if($seo = json_decode($Post->seo->fields))
  <title>{{ $seo->seo_title->value }}</title>
@endif

字段：VE JSON 字段

可排序的多行和多字段JSON存储。

BREAD Json 多字段配置

{
    "json_fields": {
        "group": "Param Group",
        "name": "Param Name",
        "value": "Param Value"
    }
}

存储的数据结构（2行）

{
  "fields": {
    "group": "Field Group",
    "name": "Field Name",
    "value": "Field value"    
  },
  "rows": [
      {
        "group":"Main",
        "name":"Services",
        "value":"12"
      },  
      {
        "group":"Second",
        "name":"Packages",
        "value": "100"
      }
  ]
}

字段：VE 选择下拉树

表示与特定模型相关的树形下拉控件。BREAD Json Options（帖子模型，category_id字段）

{
    "browse_filter": true,
    "relationship": {
        "model": "\\App\\Models\\Category",
        "key": "id",
        "label": "title",
        "field": "category",
        "ref_field": "category_id",
        "filter_label": "Product category"
    }
}

位置
browse_filter - 如果在浏览模式下使用此字段的筛选器
model - 源模型类
key - 关键字段以进行引用
label - 显示名称字段
ref_field - 当前模型字段引用相关模型
filter_label - 上面的筛选器的显示标签（如果存在）。

在帖子模型中添加

public function category()
{
    return $this->belongsTo(Category::class);
}

字段：VE 相关模型

表示可排序的模型记录列表。使用自动完成字段添加新的指定条目。
该模型详细描述了 Bread 字段。

{
    "related_model": {
        "source": "pages",
        "search_field": "title",
        "display_field": "title",
        "fields": [
            "title",
            "slug",
            "price"
        ]
    }
}

位置
source：模型的 slug
search_field：搜索字段
display_field：显示为标签/标题的字段
fields：要存储的字段集

预定义字段是：id 和显示字段选项中提到的字段

存储的JSON格式

[
    {
        "display_field":"title",
        "fields": {
            "id":1,
            "title":"Proin volutpat, eros sed semper hendrerit",
            "slug":"proin-volutpat-eros-sed-semper-hendrerit",
            "price": 500
        }
    },
    ...
]

字段：VE 行内字段集

复杂组合字段。代表内置内部自定义字段的组合。支持10种内部字段类型。字段数据可以存储在您的当前模型字段中，也可以存储在指定的表中。

字段的行详细数据

{
    "inline_set": {
        "source": "App\\Models\\Meta",
        "many": true,
        "columns": 2,
        "fields": {
            "date": {
                "label": "Date",
                "type": "date"
            },
            "select": {
                "label": "Select",
                "type": "select",
                "options": {
                    "val1": "Option One",
                    "val2": "Option Two",
                    "val3": "Option Three"
                },
                "default": "val3"
            },
            "number": {
                "label": "Number",
                "type": "number",
                "attrs": {
                    "required": true
                }                
            },
            "checkbox": {
                "label": "Checkbox",
                "type": "checkbox",
                "on": "Enabled",
                "off": "Disabled",
                "default": "on"
            },
            "radio": {
                "label": "Radio",
                "type": "radio",
                "options": {
                    "center": "Center",
                    "left": "Left",
                    "right": "Right"
                },
                "default": "left"
            },
            "image": {
                "label": "Image",
                "type": "media",
                "remove_delay": 5000
            },
            "rich_text": {
                "label": "Rich Text Box",
                "type": "richtext",
                "min_height": 150
            },
            "code": {
                "label": "Ace Editor",
                "type": "code",
                "mode": "html",
                "theme": "monokai",
                "minlines": 3,
                "maxlines": 20
            },
            "seo_title": {
                "label": "Title",
                "type": "text",
                "class": "col-md-12",
                "attrs": {
                    "required": true     
                }
            },
            "meta_description": {
                "label": "Description",
                "type": "textarea",
                "class": "col-md-6"
            },
            "meta_keywords": {
                "label": "Keywords",
                "type": "textarea",
                "class": "col-md-6"
            }
        }
    }
}

位置
many：如果为 true，则允许多个行。columns：字段集分隔的列数（一行中的多个集）。值是：1 - 6。
source：数据存储的模型名称（类）。如果不存在，则使用本地模型字段。
存储模型应具有以下字段
row_id：保持本地行内字段集行 ID。model：主模型名称。
model_id：主模型 ID。
model_field：主模型相关字段。
order：排序字段，保持行顺序。

此外，所有所需的自定义行内字段，具有特定的类型。

允许的字段
number：数据库存储类型：数字
text：数据库存储类型：varchar
textarea - 数据库存储类型：文本
richtext - 数据库存储类型：文本，支持选项：min_height
code - 数据库存储类型：文本，支持选项：mode、theme、minlines 和 maxlines
media - 数据库存储类型：文本（媒体库处理），可以存储多个媒体文件并排序。支持选项：remove_delay - 在媒体文件被删除前暂停的时间（点击删除按钮后）。
date - 数据库存储类型：日期
checkbox - 数据库存储类型：tinyint，支持选项：参见上面的示例
radio - 数据库存储类型：文本，支持选项：参见上面的示例
select - 数据库存储类型：文本，支持选项：参见上面的示例

每个字段还可以有其他常见选项
class - 一个包装类，用于组织集合内部的布局。attrs - 为字段需要设置的HTML属性列表。

从字段检索存储的数据

准备您的模型并添加 InlineSetTrait 特性

...
use Lamtin222\VoyagerExtension\Traits\InlineSetTrait;
...
class Page extends Model
{
    use InlineSetTrait;
    ...
}

然后只需使用特性方法

$data = $post->getInlineSet('news_sections');

其中 news_sections 是保持内联字段集的字段名称。

此外，此特性在模型删除期间在相应的表中删除相关来源数据是必需的。

字段：VE页面布局

特殊的内嵌内容字段类型。仅在安装了Voyager Site包时可用。提供子系统来组织页面上的内容字段、块和表单的布局。

此字段的BREAD Json选项

{
    "layout_fields": {
        "content": "Content"
    },
    "block_model": "Lamtin222\\VoyagerSite\\Models\\Block",
    "form_model": "Lamtin222\\VoyagerSite\\Models\\Form",
    "style_classes": "col-md-3"
}

layout_fields - 可用于选择的模型（bread）字段列表。

block_model - 用于检索块内容记录的块模型类。如果参数不存在，则块模型选择输入不会在编辑/添加视图中显示。

form_model - 用于检索表单内容记录的表单模型类。如果参数不存在，则表单模型选择输入不会在编辑/添加视图中显示；

style_classes - 在编辑/添加视图中应用于选择输入字段的额外样式类。默认值：col-md-4。

渲染字段

{!! render_layout($page->layout_field, $page) !!}

新的BREAD浏览模式和选项

下拉浏览过滤器

用于在浏览模式中过滤数据。仅用于“从属于”关系字段类型。

{
    "browse_filter": true
}

树模式

实现了新的TREE浏览模式。如果您有 parent_id 字段，可以为它添加 browse_tree 选项，然后启用TREE浏览模式。

{
    "browse_tree": true
}

树模式看起来类似于菜单树视图。

您可以使用 browse_tree_push_right 选项将浏览字段推到视图行的右侧。

{
    "browse_tree_push_right": true
}

在此字段之后的所有浏览字段都将被推到右侧。

替代浏览标题

仅用提供的选项标题替换默认bread字段标题

{
    "browse_title": "Short title"
}

内联复选框切换器

使用 browse_inline_editor，您可以在浏览视图模式中启用内联切换器。之后，您可以直接从浏览模式更改字段值（通过点击它），而无需进入编辑模式。

{
    "browse_inline_editor": true,
    "on": "Active",
    "off": "Disabled",
    "checked": true
}

内联文本、数字编辑器

使用 browse_inline_editor，您还可以在浏览视图模式中为文本和数字类型启用内联编辑器。之后，您可以直接从浏览模式更改字段值，而无需进入编辑模式。

{
    "browse_inline_editor": true
}

点击字段时的操作

如果您添加此选项 url，您将能够通过单击记录来调用相应的操作。例如，假设它是字段 标题

{
    "url": "edit"
}

列宽、对齐和字体大小

在浏览模式中设置列的宽度、对齐和字体大小

{
    "browse_width": "15px",
    "browse_align": "right",
    "browse_font_size": "0.8em"
}

列顺序

在BREAD构建器的额外选项中设置所需的浏览顺序。

{
    "browse_order": [
        "status",
        "id",
        "title",
        "block_belongsto_block_region_relationship",
        "urls",
        "created_at"
    ]
}

注意：Voyager关系字段应使用自己的命名约定，如 block_belongsto_block_region_relationship。

您还可以使用此选项在浏览模式中更改列顺序

{
    "browse_order": 1
}

一行中图片的最大高度

设置缩略图图片的最大高度

{
    "browse_image_max_height": "30px"
}

节分隔符

此选项创建一个视觉上的节分隔线。

{
    "section": "Media files"
}

添加-编辑模式的标签布局

在添加-编辑 BREAD 模式下，您可以使用标签布局。只需将选项 tab_title 放置在您想要开始新标签的地方。

{
    "tab_title": "Media"
}

您不需要创建第一个标签，它将自动创建。

本地化

新类型的字段不提供 Voyager 中使用的本地化服务。但是，您可以使用内置的本地化助手，并从字段内容中检索翻译后的子字符串

$field_data = '{{en}}English title {{ru}}Russian title';
// or 
$field_data = '[[en]]English title [[ru]]Russian title';
...
$field_title_en = str_trans($field_data);
$field_title_ru = str_trans($field_data,'ru');

安全

如果您发现任何与安全相关的问题，请通过作者邮箱而不是使用问题跟踪器来联系。