Jekyllを使用して、いくつかのCSS書式を使用して、Markdownファイルに単純なHTMLボタンを追加する方法はありますか?私はジキルに非常に慣れていないので、自分のやり方を本当に知りません。ファイルをダウンロードするために、このボタンを外部URLにリンクしたいと思います。
オプション1.ショートコード+ javascript
1つ目は、ショートコードWordPressスタイルを使用し、jQueryで置き換えることです。これを実現するには、JavaScriptで巧妙な正規表現が必要になります。その場合、マークダウンは次のようになります。
Lorem ipsum dolor sit amet.
[button url="http://www.google.com"]
オプション2. Jekyllファイルを含める
別のオプションは、Jekyllインクルードを使用することです:
Lorem ipsum dolor sit amet.
{% include button.html url="http://www.google.com" %}
オプション3.プレーンHTML
3番目のオプションは、プレーンHTMLを記述することです。
Lorem ipsum dolor sit amet.
<button name="button" onclick="http://www.google.com">Click me</button>
オプション4.マークダウンの方法
最後のオプションは、マークダウンを使用してクラスを追加し、CSSを使用してリンクをボタンとしてスタイル設定することです。
Lorem ipsum dolor sit amet.
[Click me](http://www.google.com){: .btn}
結論
何を選択するかは、好みによって異なります。最初の解決策は、WordPressから、またはWordPressに移植する場合に最も簡単です。 2つ目は、真のジキルの方法です。 3番目(HTML)も意味があります。最後の1つであるマークダウン方法は、(私の意見では)最も美しいですが、真のボタンを生成しません。
から ジョン・グルーバー自身 :
MarkdownはHTMLに置き換わるものではありません。その構文は非常に小さく、HTMLタグの非常に小さなサブセットにのみ対応しています。アイデアは、HTMLタグを挿入しやすくする構文を作成することではありません。私の意見では、HTMLタグはすでに挿入するのが簡単です。 Markdownのアイデアは、散文を読み、書き、編集しやすくすることです。
ボタンは散文ではありません。作成するには、HTMLを使用する必要があります。
<button name="button">Click me</button>
JoostSが推奨するincludeオプション(2)を使用します。パラメータを含むインクルードを使用してボタンを組み込む方法を示す、より具体的な情報を次に示します。 _includesフォルダーに、次のようなボタンテンプレート(例:button.html)を作成します。
<button type="button" class="btn btn-{{include.button_class}} active">{{include.button_name}}</button>
(このHTMLコードは ボタンのブートストラップ を使用していることを前提としています。)
私が{{include.button_name}}と書いた場所は、インクルードに渡すパラメーターになります。
次に、Markdownページに、次のようなボタンを含めます。
{% include button.html button_name="My Button" button_class="primary" %}
私は自分のドキュメントの吹き出し、画像、アラートにこのテクニックを使用しています。基本的に、複雑なHTMLフォーマットがある場合はいつでも、このようなインクルードテンプレートで非表示にすることができます。