web-dev-qa-db-ja.com

Jekyllで.mdファイルにボタンを追加する方法

Jekyllを使用して、いくつかのCSS書式を使用して、Markdownファイルに単純なHTMLボタンを追加する方法はありますか?私はジキルに非常に慣れていないので、自分のやり方を本当に知りません。ファイルをダウンロードするために、このボタンを外部URLにリンクしたいと思います。

13
Inigo Mantoya

オプション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つであるマークダウン方法は、(私の意見では)最も美しいですが、真のボタンを生成しません。

8
JoostS

から ジョン・グルーバー自身

MarkdownはHTMLに置き換わるものではありません。その構文は非常に小さく、HTMLタグの非常に小さなサブセットにのみ対応しています。アイデアは、HTMLタグを挿入しやすくする構文を作成することではありません。私の意見では、HTMLタグはすでに挿入するのが簡単です。 Markdownのアイデアは、散文を読み、書き、編集しやすくすることです。

ボタンは散文ではありません。作成するには、HTMLを使用する必要があります。

<button name="button">Click me</button>
6
Steven Penny

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フォーマットがある場合はいつでも、このようなインクルードテンプレートで非表示にすることができます。

2
Tom Johnson