README

Open Graphy 是一个为Laravel应用程序提供的出色的开放图图像（社交/推特/X卡片）生成包。

使用Open Graphy，您可以动态地为您的网站生成社交卡片。您可以使用默认模板或创建自己的模板。

特性

轻松为您的网站生成开放图图像。
向开放图图像添加标题、图像和您的徽标。
向开放图图像内添加页面截图以显示页面预览。
5种不同的模板可供选择。
自定义模板的颜色和样式。
缓存生成的图像。
如果您想的话，可以创建自己的模板。

示例：👇

要求

PHP 8.1+

安装

您需要在服务器上安装 chromium 或 chrome 浏览器，因为Open Graphy正在使用它来渲染图像。

Ubuntu/Debian:

sudo apt-get install -y chromium-browser

关于Ubuntu ARM系统的说明

有时基于ARM的Ubuntu系统可能存在与snap包（如chromium）的问题，因此chromium可能无法通过Web服务器工作。在这种情况下，您可以在配置文件中将 generate_with_command 选项设置为 true。这将使用命令而不是从控制器生成开放图图像。

MacOS:

brew install --cask google-chrome

使用MacOS的Laravel Sail：我在我的M1 Macbook Pro上找到了以下步骤是有效的

apt-get install software-properties-common
add-apt-repository ppa:xtradeb/apps -y
apt update
apt install chromium

完成以上步骤后，您可以通过composer安装该包

composer require edeoliv/laravel-open-graphy

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="open-graphy-config"

这是发布配置文件的内容

<?php

// config for edeoliv/OpenGraphy
return [
    'chrome_binary' => null, // leave empty for autodiscovery, or set it to 'chrome' or 'chromium' depending on the binary you want to use. You can also provide full path to the binary
    'generate_with_command' => false, // set to true to generate the open graph image with a command instead from the controller (useful in some cases where chromium is not reachable from the web server)
    'open_graph_image' => [  // final generated open graph image settings
        'width' => 1200,
        'height' => 630,
        'type' => 'png',  // png or jpg
    ],

    'image' => null,  // path (relative to public directory) or url to the image to be added to the open graph image
    
    'fallback_open_graph_image' => null,  // path (relative to public directory) or url to the image to be used as a fallback if the open graph image cannot be generated

    'logo' => [
        'enabled' => false, // set to false to disable the logo
        'location' => '', // path (relative to public directory) or url to the logo to be added to the open graph image
    ],

    'render_timeout' => 10000, // maximum time to wait for the screenshot to render before failing

    'screenshot' => [
        'enabled' => false,  // set to true to add a screenshot of the page into the open graph image
        'render_width' => 1100,
        'render_height' => 1000,
    ],

    // The cache location to use to store the generated images.
    'storage' => [
        'disk' => 'public',
        'path' => 'open-graphy',
    ],

    'template' => 'verticals',

    'template_settings' => [
        'strings' => [
            'background' => '#5e009e',
            'stroke_color' => '#9f6eee',
            'stroke_width' => '2',
            'text_color' => '#ffffff',
        ],
        'stripes' => [
            'start_color' => '#5e009e',
            'end_color' => '#9f6eee',
            'text_color' => '#ffffff',
        ],
        'sunny' => [
            'start_color' => '#5e009e',
            'end_color' => '#9f6eee',
            'text_color' => '#ffffff',
        ],
        'verticals' => [
            'start_color' => '#FFFFFF',
            'mid_color' => '#F5F5F5',
            'end_color' => '#CCCCCC',
            'text_color' => '#5B4242',
        ],
        'nodes' => [
            'background' => '#330033',
            'node_color' => '#550055',
            'edge_color' => '#440044',
            'text_color' => '#ffffff',
        ],
    ],
];

配置选项

chrome_binary：根据您安装的浏览器，可以将 chrome_binary 设置为 chrome 或 chromium。您还可以将其设置为null以允许自动发现二进制文件。您还可以提供二进制的完整路径。
open_graph_image：最终生成的开放图图像的设置。
image：要添加到开放图图像中的图像的路径（相对于public目录）或URL。
fallback_open_graph_image：如果无法生成开放图图像，则用作后备的图像的路径（相对于public目录）或URL。
logo：要添加到开放图图像中的徽标的设置。
render_timeout：在失败之前等待截图渲染的最大时间。
screenshot：要添加到开放图图像中的截图的设置。
storage：用于存储生成的图像的缓存位置。
template：用于开放图图像的模板。
template_settings：包含在包中的模板的设置。

上述配置允许您编辑提供的模板的颜色和样式，但如果您更喜欢进入“上帝模式”并编辑样式或引入新模板，可以使用以下命令发布视图

php artisan vendor:publish --tag="open-graphy-views"

有关创建自定义模板的更多详细信息，请参阅以下内容。

用法

您需要做的所有事情是在您的blade文件中的 <head> 标签中调用以下组件

<x-open-graphy::links title="This is an awesome title"/>

此组件接受以下参数

title：要在开放图图像上显示的标题。（必填）
image：要在开放图图像上显示的图像（公共目录的路径或URL）（可选）
template：用于开放图图像的模板。您可以从以下选项中选择：background、stripes、sunny、verticals、nodes（可选）。
screenshot：设置为true，将向开放图图像添加网页截图，将覆盖配置文件中的screenshot.enabled设置。（可选）有关更多信息，请参阅网站截图。
logo：设置为true，将向开放图图像添加徽标，将覆盖配置文件中的logo.enabled设置。（可选）

调用x-open-graphy::links组件将在您的HTML中生成以下元标签

<meta property="og:image" content="{URL}">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{URL}">

确定最佳设计

Open Graphy附带了一个测试路由（仅适用于本地环境），您可以使用它来测试不同的模板和设置。您可以通过在浏览器中访问/open-graphy/test来访问此路由。

它接受以下查询参数

title：要在开放图图像上显示的标题。
image：要在开放图图像上显示的图像（可选）。
template：用于开放图图像的模板。您可以从以下选项中选择：background、stripes、sunny、verticals、nodes（可选）。

通常，您需要编辑配置文件中的设置以更改模板的颜色和样式，并持续测试，直到找到您网站的最佳设计。

网站截图

您还可以将网页截图添加到开放图图像中。如果您想在开放图图像中显示网页预览，这将非常有用。要启用此功能，请在配置文件中将screenshot.enabled设置为true。

示例

重要提示1：此功能仅在页面可通过安装包的互联网访问时才有效。发生的情况是，包将在无头浏览器中打开页面，截取页面截图并将其添加到开放图图像。此功能在Laravel sail安装上不会工作，除非您进行一些魔术操作。

重要提示2：大多数情况下截图工作良好，但有时较长的页面或具有更多重效果的页面可能会超时。您可以在配置文件中增加render_timeout以允许更多时间进行截图渲染，但如果无法截取截图，Open Graphy将优雅地失败，并且仍然会生成没有截图的开放图图像。

清除缓存

您可以使用以下命令清除生成的图像的缓存

php artisan open-graphy:clear

创建自定义模板

要创建自定义模板，您需要使用以下命令发布视图（如果尚未发布）

php artisan vendor:publish --tag="open-graphy-views"

现在您可以在resources/views/vendor/open-graphy/templates目录中创建一个新的blade文件。该文件应包含模板的HTML和CSS。您可以从包中现有的模板中获取一些灵感。

创建模板后，您可以将配置文件中的template键设置为模板文件的名称（不带.blade.php扩展名）。例如，如果您创建了一个名为custom.blade.php的文件，则将template键设置为custom。

如果您在寻找酷炫的图案库，可以使用以下链接：https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/

想快速构建Laravel SaaS应用吗？

如果您想快速构建SaaS应用，请通过查看edeoliv来支持我们。它是一个SaaS启动包（样板），其中包含运行现代SaaS软件所需的所有组件。

贡献

有关详细信息，请参阅CONTRIBUTING。

安全漏洞

请查看我们如何报告安全漏洞的安全策略：安全策略

致谢

Ahmad Mas
图案来源：https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/

许可证

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

edeoliv / laravel-open-graphy

维护者

详细信息