The static site generator Jekyll is known in web design circles for being light-weight and “hacky”. But that is only part of the truth. Jekyll is surprisingly powerful in terms of what you can do with it, and how user-friendly you can make it to non-technical users and clients.
静态网站生成器Jekyll以轻巧和“ hacky”着称于Web设计界。 但这只是事实的一部分。 Jekyll在使用功能以及对非技术用户和客户的友好程度方面都非常强大。
In this quick tip, I will show how you can build HTML widgets that your clients or team members can easily customize and include anywhere in a Jekyll project—no Ruby plugins needed, just Liquid, the open source template language created by Shopify, and good old HTML.
在这个快速提示中，我将展示如何构建客户或团队成员可以轻松自定义HTML小部件，并将其包含在Jekyll项目中的任何位置—无需Ruby插件，只需使用Liquid ，Shopify创建的开源模板语言，以及旧HTML。
There are several ways of setting variables for customization. In this article, I’ll introduce two of them: the inline and Front matter methods.
有几种方法可以设置自定义变量。 在本文中，我将介绍其中两种： 内联和Front物质方法。
Setting variables inline is the best option if there’s a good chance the widget will be included more than once, say, in a blog post. In this example I’ll use a PayPal button.
内联设置变量是最好的选择，例如很有可能该小部件将被多次包含在博客文章中。 在此示例中，我将使用“贝宝”按钮。
First, create a new file called paypal-widget.html in your _includes folder. Then, fill it with this code:
首先，在_includes文件夹中创建一个名为paypal-widget.html的新文件。 然后，用以下代码填充它：
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <input name="cmd" type="hidden" value="_s-xclick"> <input name="hosted_button_id" type="hidden" value="VALUE"> <button class="buy-button" name="submit">Buy Now</button> <img src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" alt="" width="1" height="1" border="0" style="display: none !important;"> </form>The above example will generate a simple “Buy Now” button, allowing people to pay via PayPal. There’s just one problem: the code is static and can’t be customized.
上面的示例将生成一个简单的“立即购买”按钮，允许人们通过PayPal付款。 只有一个问题：代码是静态的，无法自定义。
The widget has two elements you will want to keep dynamic: the value of the hosted_button_id and the button label. Achieving this with inline variables is quickly done:
小部件具有两个要保持动态的元素： hosted_button_id的value和button标签。 使用内联变量可以快速完成此任务：
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <input name="cmd" type="hidden" value="_s-xclick"> <input name="hosted_button_id" type="hidden" value="{{ include.id }}"> <button class="buy-button" name="submit">{{ include.button }}</button> <img src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" alt="" width="1" height="1" border="0" style="display: none !important;"> </form>The variables you added are include.id and include.button. When you are ready to include the HTML widget inside, say, a Markdown post, you can simply do this:
您添加的变量是include.id和include.button 。 当您准备在其中包含HTML小部件(例如Markdown帖子)时，只需执行以下操作：
{% include paypal-widget.html id="EXAMPLE-ID" button="Buy Now | $30" %}This will create a button labeled “Buy Now | $30”. You can include the same file several times in the same page, each with different include.id and include.button values, as they are set individually inline.
这将创建一个标记为“立即购买| $ 30”。 您可以在同一页面中多次包含同一个文件，每个文件具有不同的include.id和include.button值，因为它们是分别内联设置的。
For longer text strings and widgets that will only be included once in a blog post, you can set the values of the variables in the Front matter of your posts and pages. In this example you’ll create a newsletter signup box.
对于仅在博客文章中包含一次的更长的文本字符串和窗口小部件，可以在文章和页面的“ 前题”中设置变量的值。 在此示例中，您将创建一个新闻通讯注册框。
As before, start by creating a new file in the _includes folder of your Jekyll project, name it something meaningful like signup-widget.html. Then, fill it with this code:
和以前一样，首先在Jekyll项目的_includes文件夹中创建一个新文件，然后将_includes命名为signup-widget.html 。 然后，用以下代码填充它：
<div class="signup-cta"> <h2>Sign up to the newsletter</h2> <p>Receive daily updates straight to your inbox—just fill out your name and email address and hit Submit!</p> <form method="POST"> <input id="name" placeholder="First name"> <input type="email" placeholder="Email address"> <button type="submit">Submit</button> </form> </div>In this example, there are three elements you want to keep dynamic: the h2 text, the p element’s text below it, and the button text:
在此示例中，要保持动态的三个元素： h2文本，其下方的p元素文本和button文本：
<div class="signup-cta"> <h2>{{ page.cta.title }}</h2> <p>{{ page.cta.body }}</p> <form method="POST"> <input id="name" placeholder="First name"> <input type="email" placeholder="Email address"> <button type="submit">{{ page.cta.button }}</button> </form> </div>Now when you include it in a Markdown post or page, define the following variables in the Front matter using Yaml:
现在，当您将其包含在Markdown帖子或页面中时，请使用Yaml在Front主题中定义以下变量：
--- cta: title: "Get the newsletter" body: "Like this blog post? Sign up to receive more content like this, delivered straight to your inbox every day." button: "Sign me up!" ---And then you can include the widget anywhere in the text, much like you did with the other example:
然后，您可以像在其他示例中一样，将小部件包括在文本的任何位置：
{% include signup-widget.html %}The result, after adding some CSS, looks like this:
添加一些CSS之后，结果如下所示：
You can, of course, include this more than once in a blog post—but both instances would retrieve the values for their variables from the same source, so they’d look exactly the same. If you want to make it possible to include a widget more than once in one page or blog post and customize each one individually, inline variables are the way to go.
当然，您可以在博客文章中多次添加它-但是两个实例都将从同一源检索其变量的值，因此它们看起来完全一样。 如果您希望在一个页面或博客文章中多次包含一个小部件并分别自定义每个小部件，则可以使用内联变量。
Well, there you have it. Two quick and easy ways to create powerful modules for your Jekyll project. The possibilities with this technique are endless, and I’d love to hear how you end up using it in the comments below. I’m happy to answer any questions you might have.
好吧，那里有。 为您的Jekyll项目创建强大的模块的两种快速简便的方法。 这种技术的可能性是无限的，我很乐意在下面的评论中听到您最终如何使用它。 我很高兴回答您可能遇到的任何问题。
翻译自: https://www.sitepoint.com/quick-tip-how-to-build-customizable-html-widgets-in-jekyll/
相关资源：jdk-8u281-windows-x64.exe