gatsby

When sharing web content across phone, tablet, or laptop, image previews of a website provide a valuable first impression. If you’re developing websites using static site generators in the React ecosystem, such as Gatsby or Next.js, it’s not immediately clear (or at least wasn’t to me) on how to integrate and customize preview images.

在手机，平板电脑或笔记本电脑上共享Web内容时，网站的图像预览会提供有价值的第一印象。如果您正在使用React生态系统中的静态站点生成器(例如Gatsby或Next.js)来开发网站，那么如何集成和自定义预览图像尚不清楚(或者至少对我而言不是这样)。

This article will show how to create preview images using the Open Graph protocol.

本文将展示如何使用Open Graph协议创建预览图像。

Maybe you’ve pasted a URL to share with a friend and it looks like this:

也许您粘贴了要与朋友共享的URL，如下所示：

Let’s get that preview image more exciting.

让我们使预览图像更加令人兴奋。

标准HTML开放图实现 (Standard HTML Open Graph implementation)

Using the Open Graph protocol, websites can display preview content of your choosing, including image, title, description and more.

使用开放图谱协议，网站可以显示您选择的预览内容，包括图像，标题，描述等。

If you’re building an HTML website from scratch and have access to the entire HTML files directly, implementing preview content using Open Graph is pretty straightforward by adding <meta /> HTML elements.

如果您是从头开始构建HTML网站并可以直接访问整个HTML文件，则通过添加<meta /> HTML元素，使用Open Graph实现预览内容非常简单。

<html prefix="og: https://www.furbaby.rocks">
<head>
<title>Furbaby Rocks</title>
<meta property="og:title" content="Furbaby is a garage rock band" />
<meta property="og:image" content="https://www.furbaby.rocks/images/og-image.jpg" />
...
</head>
...
</html>

There’s additional Open Graph metadata options including audio, description, locale, video and more, to further describe content. View optional Open Graph metadata properties.

还有其他Open Graph元数据选项，包括音频，描述，语言环境，视频等，以进一步描述内容。查看可选的“打开图”元数据属性。

Gatsby Open Graph实施 (Gatsby Open Graph implementation)

When using a JavaScript static site generator package (such as Gatsby, which we’ll use as an example), you can’t really update the <head /> markup of a Gatsby site’s HTML files directly. Static site generators build and compile HTML files for you, and it’s common to have the <head /> section abstracted away from component development.

当使用JavaScript静态网站生成器包(例如我们将以Gatsby为例)时，您不能真正直接更新Gatsby网站HTML文件的<head />标记。静态站点生成器会为您构建和编译HTML文件，通常将<head />部分从组件开发中抽离出来。

So, basically we want to say:

因此，基本上我们想说：

“Hey Gatsby, when you’re building my React components into static HTML files, include some Open Graph <meta /> tags, including a tag which shows a cool preview image when I’m sharing my website url.”

“嘿，盖茨比，当您将我的React组件构建到静态HTML文件中时，请包含一些Open Graph <meta />标签，其中包括一个当我共享网站URL时显示很酷的预览图像的标签。”

Take Chicago garage-rock band Furbaby’s Gatsby site as a code example. https://github.com/adamjarling/furbaby

以芝加哥车库摇滚乐队Furbaby的Gatsby网站为例。 https://github.com/adamjarling/furbaby

There’s a re-usable <SEO /> component which each Gatsby page component imports to add unique search engine optimization data on a page by page basis.

有一个可重复使用的<SEO />组件，每个Gatsby页面组件都会导入该组件，以逐页添加唯一的搜索引擎优化数据。

What is Helmet? We’re using the popular Helmet package to reach outside of our React component and “inject” code into the <head /> section of generated HTML.

什么是头盔？我们正在使用流行的Helmet包来到达React组件之外，并将代码“注入”到生成HTML的<head />部分。

The key lines of code from the above gist are:

以上要点的关键代码行是：

Line #6: Import the preview image you’d like to use. Recommended image size is 1200px x 630px, but you could make it square or experiment to taste.
第6行：导入要使用的预览图像。推荐的图片尺寸为1200px x 630px，但您可以将其设为正方形或尝试品尝。
Lines #22–25: This defines the Open Graph image property, and points to the local image file Open Graph will use when displaying a preview image. When you import an image in React, at build time Gatsby will render the proper path where the image ends up.
第22-25行：这定义了“打开图” 图像属性，并指向显示预览图像时将使用的“打开图”本地图像文件。在React中导入图像时，Gatsby将在构建时渲染图像最终到达的正确路径。

验证预览图像 (Verify Preview Image)

Ok, let’s see if our code additions worked.

好的，让我们看看添加代码是否有效。

In your local development environment, go back into your local terminal window and make a fresh build:

在本地开发环境中，返回本地终端窗口并重新构建：

// We're using Gatsby in this examplegatsby build

Push up your fresh build to your server. Then send a friend a new message with the site URL link, and it should have your custom image content.

将新的构建推入服务器。然后，通过网站URL链接向朋友发送一条新消息，该消息应包含您的自定义图像内容。

使用Facebook调试工具进行验证 (Verify using Facebook Debug Tools)

Facebook offers a convenient way to both view your existing Open Graph presence for a website, and also to test Open Graph property changes (so you don’t have to constantly bug friends with repeated test link sharing).

Facebook提供了一种方便的方法，既可以查看您网站上现有的Open Graph外观，也可以测试Open Graph属性的更改(因此，您不必通过重复测试链接共享来不断烦扰朋友)。

https://developers.facebook.com/tools/debug/

结论 (Conclusion)

This is just a simple example. Experiment with the Open Graph protocol to sample the possibilities of creating intrigue about your website’s often-timed first impression. Go rock out to Furbaby already.

这只是一个简单的例子。尝试使用“ 开放图谱”协议，以样本化对网站经常出现的第一印象产生兴趣的可能性。已经去了Furbaby 。

翻译自: https://medium.com/swlh/share-website-preview-images-in-gatsby-10cac58dd4d7

gatsby

http://www.niftyadmin.cn/n/1468852.html

小鱼易连电脑版_瞩目、腾讯会议、好视通、小鱼易连各有什么优势？怎么收费？...

视频会议并不是一个新鲜事物，存在已30多年，以传统厂商宝利通、思科、华为等大公司为代表，其时早就抢占了政府、金融、教育等领域以及各大公司。但在中小微公司，视频会议设备并不普及，要知道，动辄几十万的一…

matlab设置稀疏矩阵非零元素的个数,Matlab(12)——稀疏矩阵

Matlab(12)——稀疏矩阵文章目录Matlab(12)——稀疏矩阵一、矩阵的存储方式1.完全存储方式2.稀疏存储方式二、稀疏存储方式的产生1.矩阵的完全存储方式与稀疏存储方式的转换2.直接建立稀疏存储方式的矩阵①sparse函数②spconvert函数3.带状稀疏矩阵的稀疏存储方式①从带状稀疏矩…

_带你全面认识 Linux

如何在角度上创建无限滚动

If you’ve ever had to deal with large lists in your web app, then you’re probably familiar with infinite scrolling lists. Infinite scrolling is a common UX solution to the problem of presenting a large list to your users. Think about the Facebook feed or…