cwsdigital / twill-metadata

为您的Twill.io模型添加SEO元数据。

v1.4.1 2024-05-01 14:11 UTC

README

Latest Version on Packagist MIT Licensed Total Downloads

功能

此包提供了一种简单的方法,通过提供内嵌字段集将所有必需字段添加到您的模型编辑表单中,来为您的Twill模型添加SEO元数据。通过合理的默认值、可配置的回退以及全局设置屏幕;此包应满足网站内优化元标签的大部分需求。

default and expanded views of twill metadata fieldset

要求

此包需要Laravel 8或更高版本、PHP 8或更高版本以及Twill 3.0或更高版本。

如果您正在寻找对Twill 2的支持,请确保您使用v1.3.0

升级说明

v1.0.0
此版本引入了对翻译元数据的支持。这意味着如果您是从现有网站的内容中升级到pre-v1.x版本,则需要将内容从metadata表中的列迁移到metadata_translations表。

v1.1.0
此版本从metadata表中删除了翻译列。

警告!不要从现有网站的内容的pre-1.0安装升级到v1.1.x。您将丢失数据。如果您希望升级到此版本,请首先升级到v1.0.0,然后执行任何必要的内容迁移。只有当您已将所有可翻译数据从metadata表迁移到metadata_translations表后,才能升级到v1.1.x。

v1.4.0
此版本删除了对Twill 2的支持,因为包现在使用新的Twill 3.x设置,而不是旧的Twill 2.x。

注意:在从1.3.0迁移到1.4.0时,任何保存在metadata-settings中的设置都需要在新设置部分中重新输入CMS。

安装

首先,您想使用composer安装此依赖项,您可以通过运行以下命令来完成此操作

$ composer require cwsdigital/twill-metadata

接下来,我们需要迁移所需的数据库表,您可以通过运行Laravel迁移命令来完成此操作

$ php artisan migrate

配置

向模块添加元数据

如果您的模块需要SEO元数据(例如页面),则您需要更新以下文件

  1. ModuleModel
  2. ModuleController
  3. ModuleRepository

1 – 更新模块模型

将您的模型设置为使用HasMetadata特质,并添加公共属性$metadataFallbacks

注意:您的模型还必须包含HasMedias特质。此特质用于生成OpenGraph图像。

// App/Models/Page.php
class Page extends Model {

    use HasMetadata;
    use HasMedias;

    public \Illuminate\Contracts\Foundation\Application|array|\Illuminate\Config\Repository|\Illuminate\Foundation\Application $metadataFallbacks = [];           
...
}

2 – 更新模块控制器

在模块的Twill管理控制器中,您需要调用元数据的字段集。我们通过使用BladePartial来实现这一点。

// App/Http/Controllers/Admin/PageController.php
public function getForm(TwillModelContract $model): Form
{
    $form = parent::getForm($model);
    
    // add your fields here...
    
    // copy the below to include metadata fieldset
    $form->addFieldset(
        \A17\Twill\Services\Forms\Fieldset::make()
        ->title(trans('twill-metadata::form.titles.fieldset'))
        ->id('metadata')
        ->fields([
            \A17\Twill\Services\Forms\BladePartial::make()->view('twill-metadata::includes.metadata-fields')
            ->withAdditionalParams([
                'metadata_card_type_options' => config('metadata.card_type_options'),
                'metadata_og_type_options' => config('metadata.opengraph_type_options'),
            ]),
        ])
    );
    
    return $form;
}

3 – 更新模块仓库

在页面仓库上添加use HandleMetadata

// App/Repositories/PageRepository.php
class PageRepository extends ModuleRepository
{
    use HandleBlocks, HandleSlugs, HandleMedias, HandleFiles, HandleRevisions, HandleMetadata;

    public function __construct(Page $model)
    {
        $this->model = $model;
    }
}

全局设置

元数据全局设置允许您为以下内容设置默认值

  1. 元标题 – 这将在页面元标题之后附加。
  2. 社交图图像 - 这将作为回退共享图像呈现
  3. 社交媒体卡片的Twitter(X)处理。

1 – 确保默认社交媒体图像裁剪在您的twill.php配置中

{{-- config/twill.php --}
return [
    'settings' => [
        'crops' => [
            'default_social_image' => [
                'default' => [
                    [
                        'name' => 'default',
                        'ratio' => 1.91 / 1,
                        'minValues' => [
                            'width' => 1200,
                            'height' => 627,
                        ],
                    ],
                ],
            ],
        ],
    ]
];

2 – 创建新设置文件

{{-- views/twill/settings/seo/metadata.blade.php --}}
@twillBlockTitle(twillTrans('twill-metadata::form.titles.fieldset'))
@twillBlockIcon('text')
@twillBlockGroup('app')

@metadataSettings

3 – 将其添加到Twill设置菜单

{{-- app/Providers/AppServiceProvider.php --}}
public function boot(): void
{
    // Register Twill Settings
    TwillAppSettings::registerSettingsGroups(
        SettingsGroup::make()->name('seo')->label(trans('twill-metadata::form.titles.fieldset')),
    );

}

如何在您的前端代码中使用元标签。

首先,我们需要设置元数据。

假设您有一个名为Pages的模块,它链接了元数据。

在您的前端路由中,您将会有类似的内容

Route::get('{slug}', \App\Http\Controllers\Frontend\PageController::class)
    ->name('frontend.page')->where('slug', '.*');

在您的前端应用程序控制器中,您可以添加SetsMetadata特性,然后使用setMetadata()函数来设置元数据。

<?php
// App/Http/Controllers/PageController.php
class PageController extends Controller
{
    use SetsMetadata;

    public function __invoke(string $slug, \App\Repositories\PageRepository $pageRepository): \Illuminate\View\View
    {
        $page = $pageRepository->forSlug($slug);
        
        abort_if(! $page, 404);
        
        // Set the page metadata
        $this->setMetadata($page);
        
        // return your view
        return view('site.pages.page', ['page' => $page]);
    }
}

底层使用的是artesaos/seotools包来设置和显示元数据。因此,您可以自由选择不使用上述辅助工具,而是手动设置所需的元标签。或者,您可以使用辅助工具,然后使用该包提供的函数来修改标签。

在前端输出元标签

有关更细粒度的选项,请参阅artesaos/seotools的文档,但最简单的方法如下所示

{{-- resources/views/layouts/site.blade.php --}}
<html lang="en">
<head>

    {!! SEO::generate() !!}

</head>

自定义

您可以使用以下命令发布包的配置

  php artisan vendor:publish --provider="CwsDigital\TwillMetadata\TwillMetadataServiceProvider" --tag=config

配置文件中有一个回退数组,可以根据您的需求进行自定义。这是一个全局配置,将适用于所有使用HasMetadata特性的模型。即,在下面的配置中,如果元数据描述字段中没有输入描述,则模型的内容字段将用作元数据描述(所有标签都将被删除)。

// Key is the metadata attribute,
// Value is the model attribute it will fall back to if metadata value is empty
'fallbacks' => [
    'title' => 'title',
    'description' => 'content',
    'og_type' => 'metadataDefaultOgType',
    'card_type' => 'metadataDefaultCardType',
],

要为具有HasMetadata特性的不同模型提供不同的回退配置,您可以在模型的公共$metadataFallBacks属性中使用相同的数组。

// App/Models/Page.php
class Page extends Model {

    use HasMetadata;

    public $metadataFallbacks = [
        'title' => 'name',
        'description' => 'bio',
    ];             
...
}

两个数组将被合并,因此您只需包含要覆盖全局配置的键即可。

如果您想提供一个默认的OpenGraph类型和Twitter卡类型,则可以添加以下两个公共属性到您的模型中

    public $metadataDefaultOgType = 'website';
    public $metadataDefaultCardType = 'summary_large_image';

您可以使用以下命令发布包的视图

  php artisan vendor:publish --provider="CwsDigital\TwillMetadata\TwillMetadataServiceProvider" --tag=views

您可以使用以下命令发布包的语言文件

  php artisan vendor:publish --provider="CwsDigital\TwillMetadata\TwillMetadataServiceProvider" --tag=lang