クイックヒント：Jekyllでカスタマイズ可能なHTMLウィジェットを構築する方法

Jekyll静的Webサイトジェネレーター：Rubyプラグインなしでカスタマイズ可能なHTMLウィジェットを作成

この軽量の静的WebサイトジェネレーターであるJekyllは、その強力な機能と使いやすさで人気があります。この記事では、RubyプラグインなしでJekyllとLiquid Template言語を使用してカスタマイズ可能なHTMLウィジェットを作成する方法について説明します。

カスタム変数を設定 この記事では、カスタム変数を設定するための2つの方法を紹介します：インライン方法と事前含有方法。

1

インライン方法は、ウィジェットを同じページに複数回含めることができる場合（ブログ投稿など）、最良のオプションです。以下は、PayPalボタンの例です。 最初に、フォルダーにに

という名前の新しいファイルを作成し、次のコードを追加します。

および_includesは2つのカスタム変数です。このウィジェットをMarkdownの記事に含めるときは、これを書くだけです。 paypal-widget.html

これにより、「今すぐ購入| $ 30」とマークされたボタンが作成されます。同じファイルを複数回含めることができます。たびに、異なる

<code class="language-html"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
  <input type="hidden" name="cmd" value="_s-xclick">
  <input type="hidden" name="hosted_button_id" value="{{ include.id }}">
  <input type="submit" class="buy-button" name="submit" value="{{ include.button }}">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173985127475091.gif" class="lazy" alt="" border="0"    style="max-width:90%"  style="max-width:90%" style="display: none !important;">
</form></code>

値と

>値を使用します。 include.id include.button

2

<code class="language-liquid">{% include paypal-widget.html id="YOUR_PAYPAL_BUTTON_ID" button="立即购买 | " %}</code>

記事ごとに1回しか含まれていない長いテキスト文字列とウィジェットの場合、事前含有方法を使用できます。以下は、ニュースサブスクリプションボックスの例です。

同じ、たとえばinclude.idフォルダーに新しいファイルを作成し、次のコードを追加します。 include.button

マークダウンの記事またはページのプレフィックスで、YAMLを使用して変数を定義します。

次に、記事にウィジェットを含めます：

（CSSスタイルの効果を追加）

_includesページにウィジェットを複数回含める必要があり、個別にカスタマイズする必要がある場合は、インライン変数を使用する必要があります。 signup-widget.html

<code class="language-html"><div class="signup-cta">
  <h2>{{ page.cta.title }}</h2>
  <p>{{ page.cta.body }}</p>
  <form method="POST">
    <input type="text" id="name" placeholder="姓名">
    <input type="email" placeholder="邮箱地址">
    <input type="submit" value="{{ page.cta.button }}">
  </form>
</div></code>

概要

<code class="language-yaml">---
cta:
  title: "订阅我们的新闻"
  body: "喜欢这篇文章？订阅我们的新闻，每天接收更多精彩内容！"
  button: "立即订阅！"
---</code>

この記事では、Jekyllプロジェクトで強力なモジュールを作成する2つの簡単な方法について説明しています。 さまざまなカスタムウィジェットを作成するために、これら2つの方法を柔軟に使用できます。

<code class="language-liquid">{% include signup-widget.html %}</code>

以上がクイックヒント：Jekyllでカスタマイズ可能なHTMLウィジェットを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。