amp 优化_如何在没有AMP的情况下创建优化的Twitter轮播

amp 优化

在我的课程中，在没有AMP的情况下优化您的网站 ，我向您详细介绍了如何在不使用Google的AMP的情况下优化网站以实现闪电般的性能。

在本课程的这段视频中，您将学习如何使用轻量级的Siema脚本创建流行的组件-旋转推文的轮播。 您将学习的技术将帮助您在不使用AMP的情况下获得出色的性能。

如何创建优化的Twitter轮播

介绍Siema

该视频取材于本课程的先前课程，在该课程中，我们创建了一个网站，该网站的底部嵌入了三条推文。 您可以在GitHub上找到该项目的完整源代码。 在本课程中，我们将把这三条推文变成一个轮播。

在我们网站的AMP版本中，这是通过amp-carousel自定义元素完成的。 但是，相反，我们将使用一个很酷的小脚本Siema 。

Siema用我们的脚本在我们想要的所有方框中打勾：

• 很轻
• 文件很小。
• 这很简单。
• 我们可以异步加载它。
• 它没有任何依赖性。

设置文件时，我们早些时候已经将Siema添加到index.min.js脚本中，并且已经将其加载到我们的pagecontent.html文件中，因此可供我们使用。

创建基本轮播

我们需要做的就是在pagecontent.html中添加一些代码来激活脚本。

const mySiema = newSiema({
selector: '.slides'
});

下面的屏幕截图显示了将其插入到哪里：

我们在这里所做的是创建一个常量，并将其命名为mySiema 。 我们将常量设置为等于Siema的新实例，然后添加带有一些参数的对象。

在大括号内，我们添加了属性的选择器，并为选择器指定了Siema应该寻找的用于从其子级中制作轮播的选择器。 早些时候，我们添加了包含推文的.slides类，因此，如果我们以Siema为目标，则将采用我们的每条推文，并将其转换为转盘中的幻灯片。

如果现在检查站点，应该会看到第一个推文显示为幻灯片。

不过，它并未显示其他内容，因为我们需要添加一些额外的代码来使轮播自动播放。

使轮播自动播放

要使轮播自动播放，我们需要按以下方式修改代码：

const mySiema = newSiema({
selector: '.slides',
loop: true
});
setInterval(() => mySiema.next(), 4000)

我们在这里所做的就是告诉Siema我们希望它在每张幻灯片之间等待多长时间。 因此，在最后一行，我们使用setInterval设置间隔，然后该行的其余部分告诉Siema，我们希望每张幻灯片之间的间隔为4,000毫秒，即4秒。

在处理它时，我们还需要告诉Siema我们希望它循环。 因此，我们使用line loop: true做到这一点loop: true 。

现在，轮播会自动从一张幻灯片转到下一张幻灯片，在两秒钟之间等待，然后循环回到起点。

添加导航按钮

仍然缺少另一件事，那就是我们可以用来手动在转盘中前进或后退的一些小按钮。

因此，要设置按钮，我们要做的第一件事是在同一文件中添加一些额外HTML。 在twitter-carousel div内，但在slides div外，添加以下代码段，因为我们不希望Siema将这些按钮视为需要放入轮播中的幻灯片。

此代码仅添加了两个SVG形状：一个指向左侧的小三角形和一个指向右侧的小三角形。

因为我们不必加载图像，所以可以使加载时间更快，而用于设置SVG形状的这一小段代码的文件大小也非常小。

你可以看到，我们已经得到了类名prev第一我们的按钮，然后next的第二个。 这些是我们要与Siema一起定位的类，告诉它将这些按钮视为轮播的前进和后退按钮。

我们将使用一些JavaScript在代码中查找那些元素。 这是您可能曾经使用过jQuery的地方，但是我们当然要避免在我们的站点中使用jQuery，这样我们就无需加载其他代码了。相反，我们将通过以下方式修改我们的代码添加两行，使其看起来像这样：

在这段代码中，我们要添加一个文档查询选择器，然后指定要查找的选择器，即prev类。 然后，我们添加一个事件侦听器，我们要侦听的事件是click 。

因此，现在当有人单击左侧的按钮时，我们将触发一个动作，其余部分将设置左侧按钮的行为。

然后，在下一行中，我们使用右侧的按钮执行相同的操作，只是这次我们将prev替换为next 。

现在，如果我们检查我们的站点，就可以看到上一个和下一个按钮，如果单击它们，则可以随意进行轮播。

创建一个JavaScript后备版本

现在只需要添加一点点额外的代码。在此过程中，我们一直在为那些在浏览器中关闭JavaScript的人创建该网站的版本。 但是，现在，如果我们关闭JavaScript，我们会以小的块引号作为后备，但是现在这里有这些无用的导航按钮。

因此，我们可以通过转到noscript.css样式表并添加以下内容来解决此问题：

.carousel-button {
    display: none;
}

现在，当我们在关闭JavaScript的情况下刷新站点时，我们可以看到已经摆脱了这些按钮。

观看完整课程

在整个课程中，“在没有AMP的情况下优化您的网站”中 ，您将学习如何获取现有的基于AMP的网站并将其转换为使用非AMP等效网站。 该课程将为您提供有用的方法，使您的网站快速运行，并提供您自己决定的优化技术。

您可以通过订阅Envato Elements立即学习本课程。 只需一个低廉的月费，您不仅可以访问此课程，还可以访问我们不断发展的图书馆，其中包含1,000多个视频课程和Envato Tuts +上行业领先的电子书。

另外，您现在可以从庞大的Envato Elements库（包含40万多种创意资产）中进行无限下载。 使用独特的字体，照片，图形和模板进行创建，并更快地交付更好的项目。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-create-an-optimized-twitter-carousel--cms-30145

amp 优化