随着社交网络越来越普遍，我们需要更好地呈现我们的网站内容。其中之一是使用开放图像（Open Graph Image）。这个图像是在社交网络上共享你的网站内容时显示的图像。在本篇文章中，我们将讨论如何使用 "metalsmith-ogimage" NPM 包轻松地生成开放图像。
简介
Metalsmith 是一款静态站点生成器，你可以根据你的需求使用不同的 metalsmith 插件来创建你的网站。 "Metalsmith-ogimage" 是其中一个可以创建 open graph images 的 metalsmith 插件。
在生成静态网站时，通常我们需要一定数量的图片（例如网站标题、分类目录等），这些图片还需要经过裁剪、加文字等处理，然后它们才能成为我们网站的一部分。
在引流和营销方面，好的开放图像对于分享在社交网络上的信息至关重要。它们可以是吸引用户进一步访问您的网站或内容的关键。
安装
首先，我们需要安装 "metalsmith-ogimage" NPM 包。在终端中使用以下命令来安装：
npm install --save metalsmith-ogimage
使用
我们首先需要创建 open graph image 模板。这个模板会根据你的文章内容，动态地生成 open graph image。
-- -------------------- ---- ------- --------- ----- ----- ------------------------------ ------ ----- ---------------- ------------------------ ----- ------------------ -------------------------- ----- ------------------- -------------------- ----- ------------------------ -------------------- ----- ------------------------- --------------- ----- -------------------------- -------------- ----- ------------------- -------------------- ----- ------------------------- -------------------------- ------- ------ ------------------ ---------------------- ---- --------------- --------------- ------------ ------------- ------- -------
在这个模板中，我们使用了 Mustache 模板引擎来插入动态数据，如文章标题、概述和图像的 URL。
接下来，我们需要设置 metalsmith-ogimage 插件的配置项。在 metalsmith 的配置信息中，我们只需要添加一个 "metalsmith-ogimage" 插件即可，配置中包括三个设置项：
- pattern - 匹配需要生成 open graph image 的文件
- defaults - 默认的数据，用于在我们的页面中引用中的标签。
- template - open graph image 模板的位置
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------- - ------------------------------
---------------------
-----------
------ --- ---------
------------ ----- -- -- -------- ----- -- -----
--
----------------
-----------------------
--------------
-------- ------------
--------- -
----- ----------------------------------
--
--------- --------------------------
---
------------ -- -
-- ----- -
-----------------
-
---Metalsmith 会对 src 中所有的 *.html 文件进行 ogimage 处理，处理后的文件会输出到 build 目录。在模板中，{{logo}} 将会被替换成指定的 logo.
Metalsmith 会根据每个 HTML 文件中的 title 和 description 信息生成每个页的 og:image，这个插件的优美之处在于，他会自动使用每个 HTML 文件页面中的内容，来进行图片的生成，同时它可以接受一个默认数据参数，这样可以在没有 title 和 description 属性的 HTML 文件中运作。
例如，如果在该Web站点的Google寻址标记中，我们可能会包含额外的页面信息，如作者和发布日期，则可以使用以下默认数据，当 og:image 生成时，它们也会包含在内：
-- -------------------- ---- -------
--------------
-------- ------------
--------- -
----- -----------------------------------
------- --------
----- --- -------------------
----------- ---------
--
--------- --------------------------
---最终生成的文件会嵌入生成的 open graph image 的 URL：
-- -------------------- ---- ------- --------- ----- ----- ------------------------------ ------ ----- ---------------- ------------ ------------- ----- ------------------ ------------- -- -- ----- ------- ----- ------------------- -------------------------------------------- ----- ------------------------ -------------------- ----- ------------------------- --------------- ----- -------------------------- -------------- ----- ------------------- -------------- ------- ----- ------------------------- ------------- -- -- ----- ------- ------- ------ --------- ---------- ------- -- -- ----- --------- ---- ---------------------------------------- ---------- ------ ------------ ------------- ------- -------
总结
"Metalsmith-ogimage" NPM 包可以帮助你轻松生成开放图像，以便你的网站可以在社交网络上得到更好的展示。它易于使用，具有许多的配置项，可以满足你对 open graph image 的各种需求。如果你正在建立一个静态网站，那么 "metalsmith-ogimage" 是一项强大的工具，可用于提高你的网站的性能和视觉效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f401d8e776d08040ca4