README

Dynamic meta images 是一个 Craft CMS 插件，让您可以从您网站的内容生成动态元图像。

要求

此插件需要 Craft CMS 4.0 或 5.0 或更高版本，以及 PHP 8.0 或更高版本。其他要求包括 node、npm 和 puppeteers。

安装

您可以从插件商店或使用 Composer 安装此插件。

从插件商店

转到项目控制面板中的插件商店，搜索“Dynamic meta images”，然后点击“安装”。

使用 Composer

打开您的终端并运行以下命令

# go to the project directory
cd /path/to/project

# tell Composer to load the plugin
composer require wayborne/dynamic-meta-images

# tell Craft to install the plugin
./craft plugin/install dynamic-meta-images

附加步骤

Puppeteer

此插件要求您安装 Puppeteer

npm i puppeteer

Node 和 NPM 二进制文件

在您的 .env 文件中创建以下环境变量，以指向 Node 和 NPM 二进制文件

NODE_BINARY="/usr/bin/node"
NPM_BINARY="/usr/bin/npm"

模板文件夹

在您的模板文件夹中创建一个新的文件夹（例如 _dynamic-meta-images）。在插件 ('src/templates/examples') 中，您可以找到一些示例模板，展示了某些技术。

用法

每次条目保存时，都会从 twig/html 模板创建动态元图像。模板在无头浏览器中渲染，然后创建图像并将其保存到 Craft 资产源。

选项

• 为每个部分选择一个模板：如果您留空模板部分，则此部分（每个站点）将禁用图像生成

文件命名

默认情况下，将使用条目 ID 作为文件名。您可以通过在模板中传递一个 title 标签来自定义（每个模板）

<title>{{ entry.title }}</title>

创建一个新文件：@ 条目标题.png

样式模板

您可以随意设计您的模板，但重要的是，所有样式资源（css/字体/...）都必须有公共 URL。这意味着对于本地开发，使用现有的 CDN 比较容易

TailwindCSS

将以下脚本包含在您的标题中

<script src="https://cdn.tailwindcss.com"></script>

您甚至可以传递本地主题以覆盖默认主题

字体

任何公共 CDN，例如 Google 字体

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poetsen+One&display=swap" rel="stylesheet">
<style>
.poetsen {
    font-family: "Poetsen One", sans-serif;
    font-weight: 400;
    font-style: normal;
}
</style>

示例模板

您可以在插件目录中找到一些示例： src/templates/examples/

与现有 SEO 插件一起使用

SEOmatic

使用 SEOmatic 的现有 API 设置元图像

{#-- Get the title --#}
{% set image_name  = entry.id %}
{#-- Check if the asset exists --#}
{% set dynamic_meta_image =  craft.assets().fileName(image_name).one() ?? null  %}
{#-- Test for a public url --#}
{% if  dynamic_meta_image.url %}
    {#-- Set the meta image --#}
    {% do seomatic.meta.seoImage(dynamic_meta_image.url) %}
{% else %}
... fallback
{% endif %}

来源

SEO 字段

使用 SEO 字段可以手动设置 Facebook 和 Twitter 图像

{#-- Get the title --#}
{% set image_name  = entry.id %}
{#-- Check if the asset exists --#}
{% set dynamic_meta_image =  craft.assets().fileName(image_name).one() ?? null  %}
{#-- Set the meta image --#}
{% if dynamic_meta_image %}
    {% do entry.setFacebookImage(dynamic_meta_image) %}
    {% do entry.setTwitterImage(dynamic_meta_image) %}
{% else %}
    ... fallback
{% endif %}

来源

故障排除

我不确定 Puppeteer 是否已安装

运行 npm list puppeteer 以查看它是否列在那里。您还可以检查您的 package.json 文件，查看 puppeteer 是否列在依赖项下，并确保 npm install 没有问题运行。

我在 Linux 上安装 Puppeteer 时遇到麻烦

遵循官方 Puppeteer 文档，以下是 Puppeteer 在 Linux 上运行所需的所有依赖项：https://pptr.cn/troubleshooting#chrome-doesnt-launch-on-linux

我找不到 Node 或 NPM 二进制文件的路径

对于 Node.js：输入 node (macOS/Linux) 或 where node (Windows) 并按 Enter。这将显示 Node.js 二进制的路径。对于 npm：输入 which npm (macOS/Linux) 或 where npm (Windows) 并按 Enter。这将显示 npm 二进制的路径。

图片没有被生成

所有图片创建都在队列日志中进行，因此如果您遇到任何问题，那是检查的好地方。请确保

• Puppeteer 已安装
• NODE_BINARY 和 NPM_BINARY 已设置

要启用 Puppeteer 无头 Chrome 支持，将以下行添加到您的 /.ddev/config.yaml 文件中

webimage_extra_packages: [ gconf-service, libasound2, libatk1.0-0, libcairo2, libgconf-2-4, libgdk-pixbuf2.0-0, libgtk-3-0, libnspr4, libpango-1.0-0, libpangocairo-1.0-0, libx11-xcb1, libxcomposite1, libxcursor1, libxdamage1, libxfixes3, libxi6, libxrandr2, libxrender1, libxss1, libxtst6, fonts-liberation, libappindicator1, libnss3, xdg-utils ].

对于 Apple Silicon 支持，您需要通过在您的 ddev 文件夹中添加一个 config.m1.yaml 文件来覆盖该配置，与 config.yaml 文件一起，内容如下

webimage_extra_packages : [chromium]
web_environment:
- CPPFLAGS=-DPNG_ARM_NEON_OPT=0
- PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
- PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true

由 Wayborne 提供