README

"带有别名的标题" 输入 - Filament 表单的简单固定链接别名（PHP / Laravel / Livewire）

此包为 FilamentPHP 添加了表单组件 TitleWithSlugInput，允许轻松编辑标题和别名。

它受到经典 WordPress 标题 & 别名 实现的启发。

插件完全可配置。您可以更改所有标签，使用自己的别名生成器，使用 route() 生成“查看”链接，隐藏主机名等。请参阅完整文档

TitleWithSlugInput::make(
    fieldTitle: 'title', // The name of the field in your model that stores the title.
    fieldSlug: 'slug', // The name of the field in your model that will store the slug.
),

输出如下：（观看 » 演示视频 «）

功能

别名编辑表单。
“访问”链接以查看生成的 URL。
自动从标题生成别名，如果尚未手动更新。
撤销编辑的别名。
所有文本可自定义和可翻译。
支持暗黑模式。
完全可配置，请参阅所有可用参数。

视频

您可以在下面的包中观看简短的演示视频。

支持我们

您可以通过捐款支持我的工作。

关注我 Twitter 以获取 DEV 更新。

支持此包：如果您觉得它对您有帮助，请在其 GitHub 和 Filament 官方插件页面上给它一个 ⭐ 星星。

访问插件的 Composer Packagist 页面（PHP 包仓库）以获取当前的安装次数和其他信息。

安装

您可以通过 composer 安装此包

composer require motivo/filament-title-with-slug

如果需要，您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="filament-title-with-slug-config"

翻译

如果需要，您可以使用以下命令发布翻译文件

php artisan vendor:publish --tag="filament-title-with-slug-translations"

您将在以下位置找到发布的翻译：trans/vendor/filament-title-with-slug

此包翻译为

你也翻译了吗？在我们的 GitHub 讨论页上分享你的翻译。

使用 & 示例

基本使用 - 将 TitleWithSlugInput 添加到 Filament 表单

本软件包为 Filament 表单构建器 提供自定义输入字段 TitleWithSlugInput。

在此处阅读 Filament 的安装详情。

以下是一个示例，说明如何在您的 Filament 资源中放置新字段。

fieldTitle：存储标题的字段在您的模型中的名称。
fieldSlug：将存储 slug 的字段在您的模型中的名称。

use Camya\Filament\Forms\Components\TitleWithSlugInput;

class PostResource extends Resource
{
    public static function form(Form $form): Form
    {
        return $form->schema([
        
            TitleWithSlugInput::make(
                fieldTitle: 'title',
                fieldSlug: 'slug',
            )
            
        ]);
    }
}

提示：为了占据全部宽度，请使用 TitleWithSlugInput::make()->columnSpan('full')。

输出看起来像这样

更改模型字段名称

该软件包假设您的模型字段名为 title 和 slug。

您可以根据需要轻松更改它们。

在下面的示例中，该软件包现在使用数据库字段 name 作为标题和 identifier 作为 slug。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    fieldTitle: 'name',
    fieldSlug: 'identifier',
)

更改标签、标题、占位符

您可以在运行时更改所有标签。

在此示例中，我们还添加了基本路径 /books/。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    urlPath: '/book/',
    urlVisitLinkLabel: 'Visit Book',
    titleLabel: 'Title',
    titlePlaceholder: 'Insert the title...',
    slugLabel: 'Link:',
)

完全翻译软件包的提示。

输出看起来像这样

固定链接预览：隐藏主机

您可以选择隐藏永久链接预览中的主机部分。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    urlHostVisible: false,
)

输出看起来像这样

固定链接预览：更改主机和路径

您可以为预览设置路径和主机。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    urlPath: '/category/',
    urlHost: 'https://project.local',
)

输出看起来像这样

"访问" 链接 - 使用路由器通过 route() 生成 URL

您可以使用命名路由，例如 route('product.show', ['slug' => $record->slug]) 来生成“访问”链接。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    urlPath: '/product/',
    urlHost: 'camya.com',
    urlVisitLinkRoute: fn(?Model $record) => $record?->slug 
        ? route('product.show', ['slug' => $record->slug])
        : null,
)

Laravel 文档：[生成命名路由的 URL](https://laravel.net.cn/docs/9.x/routing#generating-urls-to-named-routes)

默认情况下，该软件包将字符串 host + path + slug 连接起来以生成“访问”链接。

因为“访问”链接现在是由路由生成的，所以您可以使用部分主机如 urlHost: 'camya.com' 来缩短永久链接预览。

输出看起来像这样

隐藏 "访问" 链接

您也可以完全移除“访问”链接。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    urlVisitLinkVisible: false,
)

样式 "标题" 输入字段

为了对“标题”输入字段进行样式设计，您可以通过 titleExtraInputAttributes 参数传递 class 属性。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    titleExtraInputAttributes: ['class' => 'italic'],
)

输出看起来像这样

为标题或别名添加额外的验证规则

您可以通过传递变量 titleRules 或 slugRules 来添加额外的验证规则。

此外，自动对 slug 字段应用唯一验证规则。要修改唯一规则，请阅读标题（和 slug）的自定义唯一验证规则。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    titleRules: [
        'required',
        'string',
        'min:3',
        'max:12',
    ],
)

您还可以自定义错误消息。

自定义错误消息

您可以通过添加 $messages 成员变量来在您的 EditModel 和 CreateModel Filament 资源中自定义错误消息。

protected $messages = [
  'data.slug.regex' => 'Invalid Slug. Use only chars (a-z), numbers (0-9), and the dash (-).',
];

自定义标题（和别名）的唯一验证规则

唯一验证规则只能通过使用参数 titleRuleUniqueParameters 和其对应的 slugRuleUniqueParameters 来修改。

这是为了正确设置 Filament 的“可忽略”参数。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    titleRuleUniqueParameters: [
        'modifyRuleUsing' => fn(Unique $rule) => $rule->where('is_published', 1),
        'ignorable' => fn(?Model $record) => $record,
    ],
)

此数组被插入到输入字段的 ->unique(...[$slugRuleUniqueParameters]) 方法中。

请阅读 Filament 的文档，了解唯一方法。

可用数组键

'ignorable' (Model | Closure)
'modifyRuleUsing' (?Closure)
'ignoreRecord' (bool)
'table' (string | Closure | null)  
'column' (string | Closure | null)

自定义别名生成器

本软件包使用 Laravel 的缩略语生成器 Str::slug()，但您也可以替换为您自己的。

以下示例生成一个仅包含字符 a-z 的缩略语，并用正则表达式进行验证。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    slugSlugifier: fn($string) => preg_replace( '/[^a-z]/', '', $string),
    slugRuleRegex: '/^[a-z]*$/',
)

注意：您可以根据需要自定义验证错误，请参阅自定义错误消息。

暗黑模式

该软件包支持 Filament 暗色模式。暗色模式的输出如下所示

如何设置空的主页别名

要设置一个空的 slug，您必须首先移除 slug 的 required 规则。您可以通过覆盖 slugRules 数组来完成此操作。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    slugRules: [],
),

在组件 slug 表单的输入字段中，使用 / 字符设置主页。

/ 字符是必要的，以绕过如果 slug 字段是空字符串时将触发的 自动缩略语重新生成。

输入看起来像这样

在关系重复器中使用

您可以在具有数据库关系的循环中使用 TitleWithSlugInput。

此示例使用 Eloquent 关系 "Post hasMany FAQEntries"。

请阅读有关Laravel Eloquent Relationship和Filament Repeater的详细文档。

\Filament\Forms\Components\Repeater::make('FAQEntries')
    ->relationship()
    ->collapsible()
    ->schema([

        \Camya\Filament\Forms\Components\TitleWithSlugInput::make(
            fieldTitle: 'title',
            fieldSlug: 'slug',
            urlPath: '/faq/',
            urlHostVisible: false,
            titleLabel: 'Title',
            titlePlaceholder: 'Insert FAQ title...'
        )

    ]),

输出看起来像这样

制作一个 URL 别名三明治。（路径/别名/路径）

在路径中间使用 slug 创建 URL 是可能的。

示例: "/books/ slug /detail/"

添加一个urlVisitLinkRoute闭包以创建正确的访问链接非常重要。请参阅"urlVisitLinkRoute with named route"文档。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    urlPath: '/books/',
    urlVisitLinkRoute: fn (?Model $record) => $record?->slug
        ? '/books/'.$record->slug.'/detail'
        : null,
    slugLabelPostfix: '/detail/',
    urlVisitLinkLabel: 'Visit Book Details'
),

输出看起来像这样

将别名用作子域名

您可以使用以下设置创建 URL 的子域部分。

示例: "https:// my-subdomain .camya.com"

添加一个urlVisitLinkRoute闭包以创建正确的访问链接非常重要。您还需要使用slugField设置 Eloquent 模型字段的子域名称。

请参阅"urlVisitLinkRoute with named route"文档。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    fieldSlug: 'subdomain',
    urlPath: '',
    urlHostVisible: false,
    urlVisitLinkLabel: 'Visit Domain',
    urlVisitLinkRoute: fn (?Model $record) => $record?->slug
        ? 'https://'.$record->slug.'.camya.com'
        : null,
    slugLabel: 'Domain:',
    slugLabelPostfix: '.camya.com',
),

输出看起来像这样

包配置文件 - 设置默认值

此包包含一些默认值，这些值可以轻松通过程序覆盖。

如果您有其他默认值，可以发布配置文件并全局更改它们。

php artisan vendor:publish --tag="filament-title-with-slug-config"

您可以在以下位置找到已发布的配置：config/filament-title-with-slug-config.php

可以通过以下方式以编程方式覆盖值：TitleWithSlugInput::make(fieldTitle: 'title')

[
    'field_title' => 'title', // Overwrite with (fieldTitle: 'title')
    'field_slug' => 'slug', // Overwrite with (fieldSlug: 'title')
    'url_host' => env('APP_URL'), // Overwrite with (urlHost: 'https://www.camya.com/')
];

所有可用参数

您可以不带参数调用 TitleWithSlugInput，它将正常工作并使用其默认值。

为了设置参数，您使用PHP8的命名参数语法。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(
    fieldTitle: 'title',
    fieldSlug: 'slug',
);

以下是一个覆盖一些默认值的示例。

\Camya\Filament\Forms\Components\TitleWithSlugInput::make(

    // Model fields
    fieldTitle: 'title',
    fieldSlug: 'slug',

    // Url
    urlPath: '/blog/',
    urlHost: 'https://www.camya.com',
    urlHostVisible: true,
    urlVisitLinkLabel: 'View',
    urlVisitLinkRoute: fn(?Model $record) => $record?->slug 
        ? route('post.show', ['slug' => $record->slug])
        : null,
    urlVisitLinkVisible: true,

    // Title
    titleLabel: 'The Title',
    titlePlaceholder: 'Post Title',
    titleExtraInputAttributes: ['class' => 'italic'],
    titleRules: [
        'required',
        'string',
    ],
    titleRuleUniqueParameters: [
        'callback' => fn(Unique $rule) => $rule->where('is_published', 1),
        'ignorable' => fn(?Model $record) => $record,
    ],
    titleIsReadonly: fn($context) => $context !== 'create',
    titleAutofocus: true,
    titleAfterStateUpdated: function ($state) {},
    
    // Slug
    slugLabel: 'The Slug: ',
    slugRules: [
        'required',
        'string',
    ],
    slugRuleUniqueParameters: [
        'callback' => fn(Unique $rule) => $rule->where('is_published', 1),
        'ignorable' => fn(?Model $record) => $record,
    ],
    slugIsReadonly: fn($context) => $context !== 'create',
    slugSlugifier: fn($string) => Str::slug($string),
    slugRuleRegex: '/^[a-z0-9\-\_]*$/',
    slugAfterStateUpdated: function ($state) {},
    slugLabelPostfix: null,

)->columnSpan('full'),

变更日志

有关最近更改的更多信息，请参阅发行说明。

贡献

想实现一个功能，修复一个错误，或翻译此包？请参阅贡献指南的详细信息。

安全漏洞

请审查我们关于如何报告安全漏洞的安全策略。

鸣谢

Andreas Scheibel (camya)（camya.com 的开发者 / epicbundle.com）

FilamentPHP基于Laravel、Livewire、AlpineJS和TailwindCSS。（即 Tall Stack）

此包受到awcodes的包和spatie的工作的启发。还要感谢ralphjsmit，我使用他的蓝图实现了 Filament 组件Pest 测试。

许可

MIT 许可证（MIT）。有关更多信息，请参阅许可文件。

工具 - 我使用的开发工具

PHPStorm IDE（+ Laravel Idea 插件）
Laravel 配合 Valet 和 Lambo
GitHub Desktop
使用 DeepL 和 LanguageTool 进行翻译
Markdown TOC 生成器
SVG 图标由 Heroicons 提供
iTerm2 终端
Regex101 - 构建文本、调试正则表达式。
Affinity Photo & Designer
VSCode

在 Twitter 上关注我

motivo / filament-title-with-slug

维护者

详细信息

README

"带有别名的标题" 输入 - Filament 表单的简单固定链接别名（PHP / Laravel / Livewire）

功能

视频

支持我们

目录

安装

翻译

使用 & 示例

基本使用 - 将 TitleWithSlugInput 添加到 Filament 表单

更改模型字段名称

更改标签、标题、占位符

固定链接预览：隐藏主机

固定链接预览：更改主机和路径

"访问" 链接 - 使用路由器通过 route() 生成 URL

隐藏 "访问" 链接

样式 "标题" 输入字段

为标题或别名添加额外的验证规则

自定义错误消息

自定义标题（和别名）的唯一验证规则

自定义别名生成器

暗黑模式

如何设置空的主页别名

在关系重复器中使用

制作一个 URL 别名三明治。（路径/别名/路径）

将别名用作子域名

包配置文件 - 设置默认值

所有可用参数

变更日志

贡献

安全漏洞

鸣谢

许可

工具 - 我使用的开发工具