gumroad
In my last quick tip, How to Build Customizable HTML Widgets in Jekyll, you learned how to make your own dynamic widgets for Jekyll websites. Today, I’m going to show you how you can use that knowledge to integrate your Jekyll-based website with Gumroad’s services to add really powerful e-commerce functionality in just a few seconds.
在我的最后一个快速技巧“ 如何在Jekyll中构建可定制HTML窗口小部件”中 ，您学习了如何为Jekyll网站制作自己的动态窗口小部件。 今天，我将向您展示如何利用这些知识将基于Jekyll的网站与Gumroad的服务集成在一起，从而在几秒钟内添加真正强大的电子商务功能。
什么是Gumroad (What is Gumroad)For those of you who don’t know, Gumroad is a San Francisco-based e-commerce startup launched in 2012. Their service is geared towards making e-commerce easy for content creators.
对于不认识的人， Gumroad是一家旧金山的电子商务初创公司，成立于2012年。他们的服务旨在使内容创建者更轻松地进行电子商务。
In addition, Gumroad also offers useful tools that enable you to track sales and market your products to potential customers. You can read more about all that on Gumroad’s website.
此外，Gumroad还提供有用的工具，使您能够跟踪销售并将产品推销给潜在客户。 您可以在Gumroad的网站上了解更多信息。
For web designers, Gumroad makes available some exciting features, in particular their widgets, webhooks, and API (Application Programming Interface).
对于Web设计人员而言，Gumroad提供了一些令人兴奋的功能，特别是其小部件， webhooks和API( 应用程序编程接口 )。
在您的网站上嵌入产品 (Embedding Products on Your Website)To start powering up your Jekyll website with Gumroad, follow the steps below.
要使用Gumroad开始为Jekyll网站供电，请执行以下步骤。
从Gumroad的小部件页面中获取代码 (Grab the Code from the Gumroad’s Widgets Page)The first step is to head over to Gumroad’s Widgets page, where you can get the code you’re going to use to create your widget.
第一步是转到Gumroad的“ 小部件”页面，您可以在其中获取用于创建小部件的代码。
Depending on how you want your Gumroad products to be displayed on your website, select Overlay or Embed (or why not make one widget for each option?). For the purpose of this tutorial, pick Embed with the Redirect to Gumroad option enabled.
根据您希望Gumroad产品在网站上显示的方式，选择“ 覆盖”或“ 嵌入” (或者为什么不为每个选项制作一个小部件？)。 就本教程而言，选择启用“ 重定向到Gumroad”选项的“ 嵌入 ”。
Next, scroll down to the bottom of the page where you’ll find the Gumroad’s auto-generated code snippet. This code has two parts: a <script> element, and a <div> element wrapping an anchor tag (if you chose Overlay instead, the second part would be the anchor tag).
接下来，向下滚动到页面底部，您将在其中找到Gumroad的自动生成的代码段。 该代码分为两部分：一个<script>元素和一个包裹锚标记的<div>元素(如果选择了Overlay ，则第二部分将是锚标记)。
将Gumroad脚本添加到您的网站 (Add the Gumroad Script to Your Website)Start by copy-pasting the script element into your Jekyll site’s /_includes/head.html file. Now, you could just leave it like that, but unless you’re going to display Gumroad products on every page of your website, there’s no need to always load in the script file. To optimize load time, just wrap a conditional statement around the <script> tag using the Liquid language, which automatically detects when you’re actually using the Gumroad widget and only then loads the script:
首先将script元素复制粘贴到Jekyll站点的/_includes/head.html文件中。 现在，您可以像这样保留它，但是除非您要在网站的每个页面上显示Gumroad产品，否则都不必始终加载脚本文件。 要优化加载时间，只需使用Liquid语言在<script>标记周围包裹一条条件语句，该语言会自动检测您何时实际使用Gumroad小部件，然后才加载脚本：
{% if page.content contains "gumroad" %} <script src="https://gumroad.com/js/gumroad-embed.js"></script>{% endif %} 创建小部件 (Create the Widget)Now that the first part is done, all you have to do is build the actual HTML widget. To do this, create a new file in your /_includes/ folder called gumroad-embed.html, which is where you will copy-paste the second part of the auto-generated code:
既然第一部分已经完成，那么您要做的就是构建实际HTML小部件。 为此，请在/_includes/文件夹中创建一个名为gumroad-embed.html的新文件，在该文件中您将复制粘贴自动生成的代码的第二部分：
<div class="gumroad-product-embed" data-gumroad-product-id="demo" data-outbound-embed="true"> <a rel="external nofollow" href="https://gumroad.com/l/demo">Loading... </a></div> 动态化 (Make It Dynamic)However, you’re not done building the widget quite yet. As you can see, it’s still linking to the default demo product. Instead, you want it to display whatever products you choose!
但是，您尚未完成构建窗口小部件的操作。 如您所见，它仍然链接到默认的演示产品。 相反，您希望它显示您选择的任何产品！
The solution is to replace the demo id value and the value of the link’s href attribute with a Liquid tag. In this tutorial, you’re going to set the variable inline, which makes it possible to use the widget several times on the same page (refer to my previous article, to learn more about other ways of setting variables in Jekyll).
解决方案是用Liquid标签替换demo id值和链接的href属性值。 在本教程中，您将设置内联变量，这样就可以在同一页面上多次使用该小部件(请参阅我的上一篇文章 ，以了解有关在Jekyll中设置变量的其他方式的更多信息)。
<div class="gumroad-product-embed" data-gumroad-product-id="{{ include.id }}" data-outbound-embed="true"> <a rel="external nofollow" href="https://gumroad.com/l/{{ include.id }}">Loading...</a></div>Note: if you’re using the Overlay widget, you might want to apply the same technique to make the element dynamic. Here’s how:
注意：如果使用的是“ 覆盖”小部件，则可能要应用相同的技术使元素动态化。 这是如何做：
<a class="gumroad-button" rel="external nofollow" href="https://gum.co/{{ include.id }}" target="_blank">{{ include.button }}</a> 做完了！ (Done!)And that is it! Congratulations, you can now easily embed products anywhere on your website with just one line of Liquid markup:
就是这样！ 恭喜，您现在只需一行液体标记即可轻松将产品嵌入网站上的任何位置：
{% include gumroad-embed.html id="PRODUCT ID HERE" %}Have you used Gumroad on your Jekyll website? How did you find the integration process? What’s your favorite e-commerce solution for Jekyll websites?
您在Jekyll网站上使用过Gumroad吗？ 您是如何找到整合过程的？ 您最喜欢Jekyll网站的电子商务解决方案是什么？
Let’s hear all about it in the comments below.
让我们在下面的评论中了解所有内容。
翻译自: https://www.sitepoint.com/e-commerce-30-seconds-gumroad-jekyll/
gumroad