本文共 9820 字,大约阅读时间需要 32 分钟。
gatsby
After blogging for more than a decade, I have realized that a blog post is kinda incomplete without some visual treat. The process of adding images is more or less the same. However, videos and GIFs are one level up which is rendered/embedded differently in various web applications, and the embedding process may vary from one framework to another.
写了十多年的博客后,我已经意识到,没有视觉效果的博客文章是不完整的。 添加图像的过程大致相同。 但是,视频和GIF只是一个层次,在各种Web应用程序中呈现/嵌入的方式有所不同,并且嵌入过程可能因一个框架而异。
JAMstack (JavaScript APIs Markup) is pretty much the hot topic, and that's why we've seen stupendous growth in Gatsby powered websites. Considering the growing popularity of JAMstack sites, I've decided to write about how you can embed videos in markdown with Gatsby.js.
JAMstack (JavaScript API标记)几乎是一个热门话题,这就是为什么我们在盖茨比支持的网站上看到了惊人的增长的原因。 考虑到JAMstack网站的日益普及,我决定撰写有关如何使用Gatsby.js将视频嵌入markdown的文章。
Coding in markdown brings so much ease and when I tried looking for ways to embed videos in Gatsby.js through markdown pages, I couldn't find a reasonable solution other than coding the functionality from the scratch.
标记降价编码带来了极大的便利,当我尝试通过标记降价页面寻找在Gatsby.js中嵌入视频的方法时,除了从头开始编写功能之外,我找不到合理的解决方案。
One big plus of using Gatsby is that you find a growing collection of plugins which implement Gatsby API through simple NPM packages. If you visit the and type the keywords around embed videos, you'll find multiple results.
使用Gatsby的一大好处是,您会发现越来越多的插件可以通过简单的NPM软件包实现Gatsby API。 如果您访问并在嵌入视频周围输入关键字,则会发现多个结果。
Instead, I ask you to try some of these and find a suitable match I've decided to make your job easy. So, after trying a couple of awesome video embedding plugins I've managed to find the best solution for you. The plugin is called the gatsby-remark-embed-video
, and it is one of the most intuitive plugins which you find in this particular niche. And I am so glad to tell that the plugin met my development needs to the fullest.
相反,我要求您尝试其中的一些方法,并找到合适的匹配项,我决定简化您的工作。 因此,在尝试了几个很棒的视频嵌入插件之后,我设法找到了最适合您的解决方案。 该插件称为gatsby-remark-embed-video
,它是在此特定gatsby-remark-embed-video
市场中找到的最直观的插件之一。 我很高兴地告诉您,该插件完全满足了我的开发需求。
So, let's not waste time and jump straight away to the procedure of how this plugin works!
因此,让我们不要浪费时间直接进入此插件的工作过程!
The first step is that you must have a demo Gatsby site up and running. If you are an absolute beginner, I'd recommend you to begin with the gatsby-starter-blog
. It showcases the most basic representation of a Gatsby site which is the perfect requirement for any beginner to get started.
第一步是您必须启动一个Gatsby演示站点并运行它。 如果您是绝对的初学者,建议您先使用gatsby-starter-blog
。 它展示了盖茨比(Gatsby)网站的最基本代表,这是任何初学者入门的完美要求。
To install the plugin, type the following command in the root folder of your site and hit Enter.
要安装插件,请在您网站的根文件夹中键入以下命令,然后按Enter。
npm
use: 对于npm
使用: npm i gatsby-remark-embed-video
yarn
use: 对于yarn
用途: yarn add gatsby-remark-embed-video
I am going to install via npm
so, I am uploading a GIF of this process.
我将通过npm
安装,因此,我将上传此过程的GIF。
Next, add gatsby-remark-embed-video
plugin to the gatsby-config.js
file to make it work. In this file, you'll find all the site configuration options which are placed in the root folder.
接下来,将gatsby-remark-embed-video
插件添加到gatsby-config.js
文件中以使其工作。 在此文件中,您将找到放置在根文件夹中的所有站点配置选项。
One of these configuration options is for plugins. Here, you find a plugins array which implements Gatsby APIs. Like most of the Gatsby plugins, gatsby-remark-embed-video
also supports advanced options which I am going to explain now.
这些配置选项之一是用于插件的。 在这里,您可以找到实现Gatsby API的插件数组。 像大多数Gatsby插件一样, gatsby-remark-embed-video
也支持高级选项,我现在将对其进行解释。
module.exports = { siteMetadata: { title: 'Your Site Title', siteUrl: 'https://yoursite.com', }, plugins: [ { resolve: "gatsby-remark-embed-video", options: { width: 800, ratio: 1.77, height: 400, related: false, noIframeBorder: true }, }, ],}
width
: Defines the width of your video. width
:定义视频的宽度。 ratio
: (Optional) It is the all-famous 16:9 factor which when divided makes '1.77' as a default setting. ratio
:(可选)这是众所周知的16:9因子,当进行除法运算时会将默认值设置为“ 1.77”。 height
: (Optional) It is defined if you want to override the default ratio option explained above. height
:(可选)定义是否要覆盖上述默认比率选项。 related
: (Optional) If used, then it will remove all the related videos from the end of an embedded YouTube video. related
:(可选)如果使用,它将从嵌入式YouTube视频的末尾删除所有相关视频。 noIframeBorder
: (Optional) Sets the border style to 0. noIframeBorder
:(可选)将边框样式设置为0。 Moreover, the plugin is designed to embed videos in markdown which means it requires some pre-requisite plugins as well i.e.,
此外,该插件旨在将视频嵌入markdown中,这意味着它也需要一些必备插件,例如,
gatsby-remark-responsive-iframe
: Make iframes in markdown which is processed by remark
responsive. gatsby-remark-responsive-iframe
:使markdown中的iframe由remark
响应处理。 gatsby-transformer-remark
: Parses markdown files using remark
. gatsby-transformer-remark
:使用remark
解析markdown文件。 gatsby-remark-images
: Processes images in markdown so they can be used in the production build
. gatsby-remark-images
:以markdown处理图像,以便可以在生产build
使用它们。 All the aforementioned plugins will support gatsby-remark-embed-video
to render videos in markdown. Also, there are some important conditions which you have to ensure while using this plugin, i.e.
所有上述插件将支持gatsby-remark-embed-video
以markdown呈现视频。 另外,使用此插件时必须确保一些重要条件,即
If your site is using the gatsby-remark-responsive-iframe plugin, you have to ensure that the gatsby-remark-embed-video is defined first like this:
如果您的网站使用的是gatsby-remark-response-iframe插件,则必须确保首先定义gatsby-remark-embed-video,如下所示:
The gatsby-remark-embed-video
plugin is used to embed videos from multiple video streaming platforms like YouTube, Vimeo, Twitch, etc. In each case of these cases, you can embed the video by typing the following in your markdown file.
gatsby-remark-embed-video
插件用于从多个视频流平台(例如YouTube , Vimeo , Twitch等)嵌入视频。在每种情况下,您都可以通过在markdown文件中键入以下内容来嵌入视频。
video: https://www.youtube.com/embed/2Xc9gXyf2G4 youtube: https://www.youtube.com/watch?v=2Xc9gXyf2G4 youtube: 2Xc9gXyf2G4vimeo: https://vimeo.com/5299404 vimeo: 5299404videoPress: https://videopress.com/v/kUJmAcSf videoPress: kUJmAcSftwitch: https://player.twitch.tv/?channel=dakotaz twitch: https://player.twitch.tv/?autoplay=false&video=v273436948 twitch: 273436948 twitchLive: dakotaz
The above code snippet tells that the process is pretty simple. Either of these two formats can embed the videos:
上面的代码片段说明该过程非常简单。 这两种格式都可以嵌入视频:
And each video source is prepended by the name of the video host i.e., YouTube, Vimeo, etc. For example, the video URL "" will be defined in the following two ways:
并且每个视频源都以视频主机的名称开头,例如YouTube,Vimeo等。例如,视频URL“ ”将在以下定义两种方式:
`youtube:https://www.youtube.com/watch?v=nG5TXyyaeDs` `youtube:nG5TXyyaeDs`
Note that in each case, the type of video host is quite evident, i.e. YouTube. So, by following this format, you can embed as many videos from multiple video hosts.
请注意,在每种情况下,视频主机的类型都很明显,例如YouTube。 因此,通过遵循这种格式,您可以嵌入来自多个视频主机的尽可能多的视频。
Let's quickly jump on to a practical example where I am going to show you how to use this plugin. Like I have mentioned before I am using the gatsby-starter-blog
theme for this article so, I'll be working in its gatsby-config.js
file.
让我们快速转到一个实际示例,在该示例中,我将向您展示如何使用此插件。 就像我之前在本文中使用gatsby-starter-blog
主题所提到的那样,我将在其gatsby-config.js
文件中进行工作。
Here's the code where I've used the gatsby-remark-embed-video
plugin.
这是我使用gatsby-remark-embed-video
插件的代码。
plugins: [{ resolve: `gatsby-transformer-remark`, options: { plugins: [ { // Using gatsby-remark-embed-video before gatsby-remark-images & gatsby-remark-responsive-iframe plugins. resolve: `gatsby-remark-embed-video`, options: { maxWidth: 800, ratio: 1.77, height: 400, related: false, noIframerder: true, }, }, { resolve: `gatsby-remark-images`, options: { maxWidth: 590, }, }, { resolve: `gatsby-remark-responsive-iframe`, options: { wrapperStyle: `margin-bottom: 1.0725rem`, }, }, ], },},]
See how I have used gatsby-remark-embed-video
plugin before gatsby-remark-images
& gatsby-remark-responsive-iframe
plugins since it is the requirement.
请参阅我如何在使用gatsby-remark-embed-video
gatsby-remark-images
和gatsby-remark-responsive-iframe
插件之前使用gatsby-remark-embed-video
插件,因为这是gatsby-remark-responsive-iframe
。
Let's also see how to embed in a markdown file.
让我们还看看如何嵌入markdown文件中。
Save this file and preview the result on the front-end like this:
保存此文件,并像这样在前端预览结果:
Woot! Woot! Only three steps and embed as many videos as you want in your Gatsby sites. I even tried coding this functionality myself. But the easiest method of embedding video in a Gatsby site is to source it from sites like YouTube, Vimeo, or Twitch. It not only prevents you from writing lengthy code blocks but also saves time.
! ! 仅需三个步骤,即可在Gatsby网站中嵌入任意数量的视频。 我什至尝试自己编写此功能的代码。 但是,将视频嵌入Gatsby网站的最简单方法是从YouTube,Vimeo或Twitch等网站获取视频。 它不仅可以防止编写冗长的代码块,而且可以节省时间。
Like I mentioned at the start of this article that there are several other Gatsby plugins which work great with Markdown posts and pages. But I'd definitely recommend you trying out the gatsby-remark-embed-video
plugin. Finally, don't forget to post your feedback in the comments section below.
就像我在本文开头提到的那样,还有其他几个Gatsby插件可以很好地与Markdown帖子和页面配合使用。 但我绝对建议您尝试使用gatsby-remark-embed-video
插件。 最后,不要忘记在下面的评论部分中发表您的反馈。
翻译自:
gatsby
转载地址:http://oiuwd.baihongyu.com/