README

Open Graphy 是一个为您的 Laravel 应用程序生成优秀开放图图像（社交 / Twitter / 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 (Apple Silicon) 的 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 saasykit/laravel-open-graphy

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

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

这是已发布配置文件的内容

<?php

// config for SaaSykit/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：要添加到开放图图像的图像的路径（相对于公共目录）或 URL。
fallback_open_graph_image：如果无法生成开放图图像，则用作回退的图像的路径（相对于公共目录）或 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应用程序，请通过查看SaaSykit来支持我们。这是一个包含运行现代SaaS软件所需所有组件的SaaS启动套件（模板）。

贡献

有关详细信息，请参阅贡献指南。

安全漏洞

请参阅我们的安全策略了解如何报告安全漏洞。

鸣谢

阿哈迈德·马斯
https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/ 提供的图案。

许可

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

saasykit / laravel-open-graphy

维护者

详细信息