README

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

功能

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

新的自定义字段

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

包安装

要求

Laravel: v8+ 或 v9+
Voyager: v1.6+
在安装此包之前，您应该完全安装 Voyager 包。

通过 Composer

$ composer require monstrex/voyager-extension

然后运行迁移

$ php artisan migrate

如果需要，发布配置

$ php artisan vendor:publish --provider="MonstreX\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 MonstreX\VoyagerExtension\Generators\MediaLibraryPathGenerator
| and at MonstreX\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 构建器的设计已更改，使其更加紧凑和方便（可以通过配置禁用）

现在所有 JSON 字段都是可折叠的，并且默认情况下是折叠的。要展开 JSON 编辑器，只需点击即可。

BREAD 构建器页面上的常见额外细节

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

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

字段：VE 图像

该字段利用 laravel-medialibrary 包来存储单个图像。此外，此字段还可以持有文本属性 TITLE 和 ALT。

字段：VE 媒体文件

此字段表示包含额外自定义字段子集的 laravel-medialibrary 收集。用于存储任何媒体文件。您可以使用拖放功能按需排序收集。实现了选择和分组删除。

默认情况下，它包含两个字段 - 标题 和 Alt。允许在集合元素内部更改文件。您可以将该字段用作小部件集合或仅用作可排序的图像集合。媒体收集的元素可以使用 BREAD Json 选项 持有额外的内容字段。

实现字段类型

{
    "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 选项

{
    "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 选项（Post 模型，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 - 上文提到的筛选器的显示标签（如果存在）。

在 Post 模型中添加

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 和在 display_field 选项中提到的字段。

存储 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：数据库存储类型：text
richtext：数据库存储类型：text，支持选项：min_height
code：数据库存储类型：text，支持选项：mode、theme、minlines 和 maxlines
媒体 - 数据库存储类型：文本（媒体库处理），可以存储多个媒体文件并排序。支持选项：remove_delay - 在删除媒体文件前暂停的时间（毫秒，点击删除按钮后）。
日期 - 数据库存储类型：日期
复选框 - 数据库存储类型：tinyint，支持选项：参见上面的示例
单选按钮 - 数据库存储类型：文本，支持选项：参见上面的示例
下拉框 - 数据库存储类型：文本，支持选项：参见上面的示例

每个字段还可以有额外的常用选项
class - 包裹类，用于组织集合内的布局。attrs - 字段所需的任何HTML属性的列表。

从字段中检索存储的数据

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

...
use MonstreX\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": "MonstreX\\VoyagerSite\\Models\\Block",
    "form_model": "MonstreX\\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');

安全

如果您发现任何与安全相关的问题，请通过电子邮件发送给作者，而不是使用问题跟踪器。